小试牛刀的 Vue3 多选框

源码:地址

由于自己最近一直在使用 Vue3,本着学了不用就作废的原则就自己尝试着写了 UI 组件示例。而刚开始选择的就是多选框这个组件。
多选框 Checkbox 组件是平时使用频率蛮高的一个组件,我们现在一步步来完善自己的组件。

开始

先定义组件

 <ani-checkbox>选项</ani-checkbox>
 

创建组件 Checkbox.vue 文件

<template>
  <label
    class="checkbox-wrap"
  >
    <input
      type="checkbox"
      v-model="model"
    />
    <i class="check-icon">✓</i>
    <slot></slot>
  </label>
</template>
 

Checkbox 进行美化,主要先隐藏 input[type=checkbox] 再对 input[type=checkbox]:checked 选择器进行处理

<style lang="less" scoped>
@color: #333;
@activeColor: #409eff;
.checkbox-wrap {
margin-right: 15px;
font-size: 14px;
user-select: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
.check-icon {
margin-right: 5px;
font-size: 14px;
font-style: normal;
display: inline-block;
width: 14px;
height: 14px;
text-align: center;
line-height: 14px;
color: #fff;
border: 1px solid @color;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
input[type='checkbox'] {
display: none;
}
input[type='checkbox']:checked + .check-icon {
background-color: @activeColor;
border-color: @activeColor;
}
&.is-checked-text {
color: @activeColor;
}
}
</style>

效果如下
image.png

逻辑处理

先定义 props

<ani-checkbox v-model="checked" @change="onChange">选项</ani-checkbox>

我们知道 Vue3 对于 v-model 的处理和以前稍稍有点不同。
image.png
由文档所述,其中的 propvalue 变成了 modelValue,所以我们组件内定义的 props 需要改变

props: {
modelValue: {
type: [Boolean, Number, String],
default: () => undefined
}
}

我们利用 computed 实现双向绑定

  setup(props, { emit }) {
const model = computed({
get() {
return props.modelValue;
},
set(val) {
emit("update:modelValue", val);
},
});
return {
model
}
}

再添加事件回调

<input type="checkbox" v-model="model" @change="onChange"/>

这里需要注意,emit 事件时需要在 emits 中注册

  emits: ['change'],
setup(props, { emit }) {
...
const onChange = () => {
emit('change', model.value);
}
return {
onChange
}
},

由此,一个简单的 checkbox 组件就完成了。不过我们现在使用的 composition-api 形式,我们可以封装一下整个逻辑 useCheckbox 函数

import { getCurrentInstance } from 'vue';
export function useCheckbox(props) {
const { proxy } = getCurrentInstance()
const model = computed({
get() {
return props.modelValue;
},
set(val) {
proxy.emit("update:modelValue", val);
},
});
const onChange = () => {
proxy.emit('change', model.value);
}
return {
model,
onChange
}
}

再在组件中引入

import { useCheckbox } from './useCheckbox';
setup(props) {
return useCheckbox(props);
}

多选框组

我们使用了很多 UI 库组件,checkbox 存在多选,大多数组件库也有这个多选组,我们接下来封装一个多选框组。
新建一个 checkbox-group.vue 文件

<template>
<div class="ani-checkbox-group">
<slot></slot>
</div>
</template>

而实际使用时,我们利用 checkbox-group 包裹 checkbox 组件

<ani-checkbox-group v-model="checkList">
<ani-checkbox>选项一</ani-checkbox>
<ani-checkbox>选项二</ani-checkbox>
<ani-checkbox>选项三</ani-checkbox>
</ani-checkbox-group>

模板文件我们已经写完了,接下来我们来完善逻辑;这里利用 provide/inject 来传递父组件参数

export default {
name: 'AniCheckboxGroup',
props: {
modelValue: {
type: [Array],
default: () => undefined
}
},
emits: ['change'],
setup(props, ctx) {
// 定义事件
const changeEvent = value => {
ctx.emit('update:modelValue', value);
nextTick(() => {
ctx.emit('change, value);
});
};
const modelValue = computed({
get() {
return props.modelValue;
},
set(val) {
changeEvent(val);
}
});
// 向子组件传递
provide('CheckboxGroup', {
name: 'CheckboxGroup',
modelValue,
...toRefs(props),
changeEvent
});
}
}
 

子组件中 inject 接收

// 接收父组件消息
export const useCheckboxGroup = () => {
// 这里的名称对应 provide 名称
const checkboxGroup = inject('CheckboxGroup', {});
// 判断是否为多选框组
const isGroup = computed(
() => checkboxGroup && checkboxGroup.name === 'CheckboxGroup'
);
return {
isGroup,
checkboxGroup
};
};

useCheckbox 中需要判断是否为多选框组,具体思路看注释吧🤣,其实逻辑也简单~

export const useCheckbox = props => {
const { emit } = getCurrentInstance();
const { isGroup, checkboxGroup } = useCheckboxGroup();
// 存在多选组,则使用多选组 modelValue
const store = computed(() =>
checkboxGroup ? checkboxGroup.modelValue.value : props.modelValue
);
// 还是判断多选组
const model = computed({
get() {
return isGroup.value ? store.value : props.modelValue;
},
set(val) {
if (isGroup.value && Array.isArray(val)) {
checkboxGroup.changeEvent(val);
} else {
emit('update:modelValue', val);
}
}
});
// 判断多选框是否选中
const isChecked = computed(() => {
const value = model.value;
if (isPropType(value, 'boolean')) {
return value;
} else if (isPropType(value, 'array')) {
return value.includes(props.label);
}
return null;
});
const onChange = e => {
const target = e.target;
const value = target.checked ? true : false;
emit('change', value, e);
};
return {
model,
isChecked,
onChange
};
};

这里模板需要修改,我们需要传入选中的选项字段 value 和多选框是否选中 checked

  <label
class="checkbox-wrap"
>
<input
type="checkbox"
v-model="model"
:value="label"
:checked="isChecked"
@change="onChange"
/>
<i class="check-icon">✓</i>
<slot></slot>
</label>

实现效果
12.gif

总结

还是要自己动手封装,组件内的一些细节和思路对于业务逻辑还是有一定的启发作用。

原创文章,作者:我心飞翔,如若转载,请注明出处:https://www.pipipi.net/14632.html

发表评论

登录后才能评论