2019/01/26 추기

당초 이에 만족했으나 아이폰에 입력하는 데 문제가 있었다.
창의 주음표를 자동으로 입력하는 vanilla-autookana면 아이폰도 입력에 문제가 없으니 사용하게 해주세요.

개시하다

계정의 로그인 화면을 만들 때 이름과 가명의 입력란이 나온다.
스마트폰이 전성시대인 만큼 가명 같은 입력은 번거롭기 때문에 생략하기도 한다.
그러나 위대한 선조는 창조되었다
jQuery.autokana　～　 https://github.com/harisenbon/autokana
있다
'주음가명'자동 입력이죠!
이런 요구도 많다.
그럼, 제이큐리로 할 때 그냥 흔쾌히 사용했어요.
정말 고마워요.
하지만 Vue.나는 js로 하기 시작했어. 난처해...땀.
그리고 이곳을 샅샅이 뒤졌어요...
http://sui.hateblo.jp/entry/2015/03/30/082621
React에 대한 기사지만 React도 Vue입니다.크게 봐도 마찬가지죠!
써봤어요. (웃음)

성급한 사람을 향하다

다음은 간단한 시연과 샘플이 있으니 소스를 보시면 알 수 있습니다.
시위 화면: https://idani.github.io/vue-autokana/
출처: https://github.com/idani/vue-autokana-sample

출처 설명?

Vue 프로젝트의 템플릿 작성

# vue init webpack xxxxx

historykana 가져오기

# npm i historykana --save

파일 이름

완전 소스가 붙어있는 느낌.
helloworld.vue

<template>
  <div class="hello">
    漢字：<input type="text" v-model="name" v-on:input="update_furigana">
    ふりがな：<input type="text" v-model="furigana">
  </div>
</template>

<script>
import historykana from 'historykana'
export default {
  name: 'HelloWorld',
  data () {
    return {
      name: '',
      furigana: '',
      history: []
    }
  },
  methods: {
    update_furigana (input) {
      this.history.push(input.target.value)
      this.furigana = historykana(this.history)
    }
  }
}
</script>

hisotrykana에 전달하기 위한 입력 역사 배열에는'history'가 있습니다.
'한자' 라고 쓰여 있는 Input 표시줄에서 입력 이벤트가 발생할 때마다 v-on에서 정의한 '업데이트 furigana' 방법을 사용합니다.
'업데이트 furigana' 방법의 매개 변수인 'input' 은 v-on에 쓰이지 않았지만 $이벤트 (이벤트 대상) 가 왔습니다.
Vue.js의 특성입니까? "업데이트 furigana"방법은 입력에서 확인하기 전에도 호출되지만 v-model에서 설정한 "this.name"에는 확인하기 전의 문자가 없습니다.
따라서 input로 정의된 이벤트 대상에서 입력 확정 전의 문자를 가져와history에 넣습니다.
그리고 히스토리 카나를 이용해 로켓포를 꺼냈다.

총결산

이런 느낌, Vue.js에서도 프리가나를 간단하게 자동으로 입력할 수 있다.
선인의 소스에 감사하다.

참조 링크

https://github.com/harisenbon/autokana

https://qiita.com/u-chida/items/6c07d558b3f06c9ed8d8

http://sui.hateblo.jp/entry/2015/03/30/082621

https://qiita.com/ryo511/items/d83e1d80830e36d183e0

https://github.com/wilf312/vue-autokana