目录
前言
复选框的效果在网页中很常见，那么你知道复选框是如何实现的吗？还不会的话快来看看，看完后你就可以自己实现复选框的封装了~
一、封装的意义
- 复用性更好
- 代码可维护性
- 可以拓展其他业务
二、如何封装？
使用到的字体图标为阿里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~