CDN版Vue3でv-ifでDOMが変化する時にカナの自動入力をしてみた

2023.01.05

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

【ポイント】
watchEffectにflushオプションを指定する。
vanilla-autokanaを使用。
https://github.com/ryo-utsunomiya/vanilla-autokana

index.html

<body id="body">
 <button type="button" @click="btnClick">コンポーネントを{{ compoVisible ? '隠す' : '表示' }}</button>
 <compo></compo>
</body>

index.js

'use strict';

Vue.createApp({
  setup( ){
    const compoVisible = Vue.ref( false );
    Vue.provide('compoVisible', compoVisible);

    const btnClick = (e) => {
      if (compoVisible.value) {
        compoVisible.value = false;
      } else {
        compoVisible.value = true;
      };
    };
    return {
      btnClick,
      compoVisible
    };
  },
  components: {
    'compo': Vue.defineAsyncComponent( () => window['vue3-sfc-loader']['loadModule']('./index03.vue', window['Vue3']['loaderOption']() ) )
  }
}).mount('#body');

index03.vue

<template>
 <div v-if="visible">
  <input type="text" id="name"><br>
  <input type="text" id="kana"><br>
 </div>
</template>


<script scoped>
import { watchEffect } from 'vue'
export default{
  setup( props ){
    const visible = Vue.inject('compoVisible');

    watchEffect( () => {
      console.log( visible.value );
      if (visible.value) AutoKana.bind("#name", "#kana");
    }, {
      flush: 'post'
    })

    return {
      visible
    };
  }
}

コメントを残すコメントをキャンセル

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

ワイズリマインダー

CDN版Vue3でv-ifでDOMが変化する時にカナの自動入力をしてみた

コメントを残すコメントをキャンセル

検索

最近のコメント

最近の投稿

タグ

フィード配信

アーカイブ

外部リンク

CDN版Vue3でv-ifでDOMが変化する時にカナの自動入力をしてみた

コメントを残す コメントをキャンセル

検索

最近のコメント

最近の投稿

タグ

フィード配信

アーカイブ

外部リンク

コメントを残すコメントをキャンセル