ワイズリマインダー

CDN版Vue3でSFCを使用しカナ自動入力をしてみた

デモ表示はこちら

次の条件のもと作成されています。
・Vue3その他もろもろはインストールしたくない。
・CDNからダウンロードした各種jsを同ドメイン内にアップロードしている。
・CompositionAPIを使用。

 

【ポイント】
onMountedを使用する。
vanilla-autokanaを使用。
https://github.com/ryo-utsunomiya/vanilla-autokana

 

index.html

<body id="body">
 <compo></compo>
</body>

 

index.js

'use strict';

Vue.createApp({
  setup( ){
  },
  components: {
    'compo': Vue.defineAsyncComponent( () => window['vue3-sfc-loader']['loadModule']('./index02.vue', window['Vue3']['loaderOption']() ) )
  }
}).mount('#body');

 

indev02.vue

<template>
 <input type="text" id="name"><br>
 <input type="text" id="kana"><br>
</template>

<script scoped>
import { onMounted } from 'vue'
export default{
  setup( props ){
    onMounted( () => {
      AutoKana.bind("#name", "#kana");
    });
  }
}
</script>

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

検索

最近のコメント

最近の投稿

タグ

フィード配信

アーカイブ

外部リンク