vue3.0实现复选框组件的封装
作者:欢玺Yee
这篇文章主要为大家详细介绍了vue3.0实现复选框组件的封装代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue3.0实现复选框组件封装的具体代码,供大家参考,具体内容如下
大致步骤:
- 实现组件本身的选中与不选中效果
- 实现组件的v-model指令
- 改造成 @vueuse/core 的函数写法
<!-- 组件基本样式 --> <template> <div class="xtx-checkbox" @click="changeChecked()"> <i v-if="checked" class="iconfont icon-checked"></i> <i v-else class="iconfont icon-unchecked"></i> <span v-if="$slots.default"><slot /></span> </div> </template> <script> import { ref } from 'vue' export default { name: 'XtxCheckbox', setup () { const checked = ref(false) const changeChecked = () => { checked.value = !checked.value } return { checked, changeChecked } } } </script> <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> // 注:如需全局使用,需注册为全局组件
<!-- 实现v-model指令 --> ... 省略结构 <script> import { toRef } from 'vue' export default { name: 'XtxCheckbox', props: { modelValue: { // v-model默认绑定的值为modelValue type: Boolean, default: false } }, setup (props, { emit }) { const checked = toRef(props, 'modelValue') // 定义checked存储接收到的boolean值 const changeChecked = () => { emit('update:modelValue', !checked.value) // 给使用的父组件传值,实现复选框的勾选 } return { checked, changeChecked } } } </script> ... 省略样式
<!-- 基本使用 --> <!-- 自定义复选框测试 --> <xtx-checkbox v-model="checked">自定义复选框</xtx-checkbox> <script> import { ref } from 'vue' export default { name: 'SubCategory', setup () { const checked = ref(true) return { checked } } } </script>
<!-- @vueuse/core的函数写法 --> <template> <div class="xtx-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 { useVModel } from '@vueuse/core' // 需要 npm i @vueuse/core 或 yarn add @vueuse/core export default { name: 'XtxCheckbox', props: { modelValue: { type: Boolean, default: false } }, setup (props, { emit }) { // 获取父组件传递过来的modelValue的值 const checked = useVModel(props, 'modelValue', emit) return { checked } } } </script> // 使用方法如上 <xtx-checkbox v-model="checked">自定义复选框</xtx-checkbox> <script> import { ref } from 'vue' export default { name: 'SubCategory', setup () { const checked = ref(true) return { checked } } } </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。