Vue3.0はチェックボックスコンポーネントのカプセル化を実装します

<!-- 基本的なコンポーネント スタイル -->
<テンプレート>
  <div class="xtx-checkbox" @click="changeChecked()">
    <i v-if="チェック済み" class="iconfont icon-checked"></i>
    <i v-else class="iconfont icon-unchecked"></i>
    <span v-if="$slots.default"><スロット /></span>
  </div>
</テンプレート>

<スクリプト>
'vue' から { ref } をインポートします
エクスポートデフォルト{
  名前: 'XtxCheckbox',
  設定 （） {
    const チェック済み = ref(false)
    定数changeChecked = () => {
      チェックされた値 = !チェックされた値
    }
    戻り値: {checked, changeChecked}
  }
}
</スクリプト>

<style スコープ lang="less"> 
 // スタイルは適宜変更できます。xtx-checkbox {
  表示: インラインブロック;
  右マージン: 2px;
  .アイコンチェック済み{
    色: @xtxColor;
    ~ スパン {
      色: @xtxColor;
    }
  }
  私 {
    位置: 相対的;
    上: 1px;
  }
  スパン {
    左マージン: 2px;
  }
}
</スタイル>
// 注: グローバルに使用する必要がある場合は、グローバル コンポーネントとして登録する必要があります。

<!-- v-model ディレクティブを実装する -->
...構造<script>を省略する
'vue' から { toRef } をインポートします
エクスポートデフォルト{
  名前: 'XtxCheckbox',
  小道具: {
    modelValue: { // v-modelのデフォルトのバインディング値はmodelValueです
      タイプ: ブール値、
      デフォルト: false
    }
  },
  セットアップ（props、{emit}）{
    const checked = toRef(props, 'modelValue') // 受信したブール値を格納するためにcheckedを定義します。const changeChecked = () => {
      emitting('update:modelValue', !checked.value) // チェックボックスをチェックするために親コンポーネントに値を渡します}
    戻り値: {checked, changeChecked}
  }
}
</スクリプト>
...楕円形スタイル

<!-- 基本的な使用方法 -->
<!-- カスタム チェックボックス テスト -->
<xtx-checkbox v-model="checked">カスタムチェックボックス</xtx-checkbox>
<スクリプト>
'vue' から { ref } をインポートします
エクスポートデフォルト{
  名前: 'サブカテゴリ',
  設定 （） {
    const チェック済み = ref(true)
    チェック済みを返す
  }
}
</スクリプト> 

<!-- @vueuse/core 関数の記述 -->
<テンプレート>
  <div class="xtx-checkbox" @click='checked=!checked'>
    <i v-if="チェック済み" class="iconfont icon-checked"></i>
    <i v-else class="iconfont icon-unchecked"></i>
    <span>
      <スロット />
    </span>
  </div>
</テンプレート>

<スクリプト>
import { useVModel } from '@vueuse/core' // npm i @vueuse/core または yarn add @vueuse/core が必要です
エクスポートデフォルト{
  名前: 'XtxCheckbox',
  小道具: {
    モデル値: {
      タイプ: ブール値、
      デフォルト: false
    }
  },
  セットアップ（props、{emit}）{
    // 親コンポーネントから渡された modelValue の値を取得します。const checked = useVModel(props, 'modelValue', emitting)
    チェック済みを返す
  }
}
</スクリプト>


// 使用方法は上記と同じ <xtx-checkbox v-model="checked">カスタム チェックボックス</xtx-checkbox>
<スクリプト>
'vue' から { ref } をインポートします
エクスポートデフォルト{
  名前: 'サブカテゴリ',
  設定 （） {
    const チェック済み = ref(true)
    チェック済みを返す
  }
}
</スクリプト>