目录

• 前言
• 一、封装的意义
• 二、如何封装？
• • 1. 封装
  • 2. 使用
  • 3. @vueuse/core实现
• 三、 效果演示
• 总结

---

前言

复选框的效果在网页中很常见，那么你知道复选框是如何实现的吗？还不会的话快来看看，看完后你就可以自己实现复选框的封装了~

---

一、封装的意义

• 复用性更好
• 代码可维护性
• 可以拓展其他业务

二、如何封装？

使用到的字体图标为阿里CDN上的字体图标资源，在public/index.html的head标签中引入即可

<link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">

1. 封装

与之前文章一样，src/components目录下新建my-checkbox.vue文件

代码如下（示例）：

<template>
  <div class="my-checkbox" @click='toggleSelect()'>
    <i v-if="checked" class="iconfont icon-checked"></i>
    <i v-else class="iconfont icon-unchecked"></i>
    <span>
      <slot />
    </span>
  </div>
</template>
<script>
import { toRef } from 'vue'

export default {
  name: 'MyCheckbox',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    }
  },
  setup (props, { emit }) {
    // 父组件将原始的状态值传递给子组件并且保证响应式能力
    const checked = toRef(props, 'modelValue')
    const toggleSelect = () => {
      // checked.value = !checked.value
      // 修改父组件中的modelValue的值
      emit('update:modelValue', !checked.value)
    }
    return { checked, toggleSelect }
  }
}
</script>

通过插件方式注册为全局组件的方式这里就不演示了，小伙伴可以翻看一下之前写的文章

2. 使用

任意.vue结尾文件中使用

代码如下（示例）：

标签中的内容会放置在封装的全局插件的默认插槽中，各位可根据需求定制。

<template>
 <div class="home-container">
   <my-checkbox v-model="isSelect">复选框</my-checkbox>
 </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup () {
    const isSelect = ref(false)

    return { isSelect }
  }

}
</script>

<style lang="less">
.home-container {
  margin: 100px auto;
  width: 100px;
  height: 100px;
}
</style>

3. @vueuse/core实现

项目根目录下打开任意终端，执行npm install @vueuse/core@5.3.0

代码如下（示例）：

<template>
  <div class="my-checkbox" @click='checked=!checked'>
    <i v-if="checked" class="iconfont icon-checked"></i>
    <i v-else class="iconfont icon-unchecked"></i>
    <span>
      <slot />
    </span>
  </div>
</template>
<script>
// import { toRef } from 'vue'
import { useVModel } from '@vueuse/core'

export default {
  name: 'MyCheckbox',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    }
  },
  setup (props, { emit }) {
    // 获取父组件传递过来的modelValue的值
    const checked = useVModel(props, 'modelValue', emit)
    return { checked }
  }
}
</script>

三、 效果演示

---

总结

Everything will be ok~

标签：vue,封装,props,复选框,vue3,checked,modelValue
来源： https://blog.csdn.net/m0_57712926/article/details/120477150