vue3加TypeScript注册全局组件复选框

公共组件复选框组件

背景：选中，未选中的样式是定制的
基本样式

<script lang="ts" setup name="XtxCheckbox"></script>

<template>
  <div class="xtx-checkbox">
   <!-- 选中图标 -->
    <i class="iconfont icon-checked"></i>
    <!-- 为选中图标 -->
    <i class="iconfont icon-unchecked"></i>
    <span>提示文本</span>
  </div>
</template>

<style scoped lang="less">
.xtx-checkbox {
  display: inline-block;
  margin-right: 2px;
  .icon-checked {
    color: @xtxColor;
    ~ span {
      color: @xtxColor;
    }
  }
  i {
    position: relative;
    top: 1px;
  }
  span {
    margin-left: 2px;
  }
}
</style>

全局注册

import XtxCheckbox from '@/components/XtxCheckbox/XtxCheckbox.vue'
export default {
  install(app: App) {
    app.component('XtxCheckbox', XtxCheckbox)
  }
}

具体代码

<script lang="ts" setup name="XtxCheckbox">

// 接收传过来的值
const {modelValue} = defineProps<{
  modelValue:boolean
}>()

const emit = defineEmits<{(e: 'update:modelValue', val: boolean): void}>()
const hClick = ()=>{
  // 通知父组件取反
 emit('update:modelValue',!modelValue)
}
</script>

<template>
  <div class="xtx-checkbox">
    <!-- 选中图标 -->
    <i @click="hClick" class="iconfont icon-checked" v-if="modelValue" ></i>
    <!-- 为选中图标 -->
    <i @click="hClick" class="iconfont icon-unchecked" v-else></i>
    <span><slot/></span>
  </div>
</template>

<style scoped lang="less">
.xtx-checkbox {
  display: inline-block;
  margin-right: 2px;
  .icon-checked {
    color: @xtxColor;
    ~ span {
      color: @xtxColor;
    }
  }
  i {
    position: relative;
    top: 1px;
  }
  span {
    margin-left: 2px;
  }
}
</style>

父组件使用

<script setup lang='ts'>
import { ref } from 'vue';

const isAgree = ref(true)
</script>

<template>
    <div>
      <!-- 复选框组件 -->
      <!-- 千玺是插槽 -->
     <XtxCheckbox v-model="isAgree">千玺</XtxCheckbox>
    </div>
</template>

<style lang='less' scoped>

</style>

温馨提示：样式代码不在上面 👆 直接复制用不了 嘿嘿