<template>
<!-- `checked` 为 true 或 false -->
<el-checkbox v-model="checked">备选项</el-checkbox>
</template>
<script>
export default {
data() {
return {
checked: true
};
}
};
</script>
剖析
- checkbox 有三种状态：选中，取消选中，半选
- checkbox 有三种使用情况：
- 单独使用, v-model绑定的值为布尔类型
- 单独使用，v-model绑定的值为数组类型，且需与label搭配
- 与checkbox-group搭配使用，且需与label搭配（checkbox-group见下回）
测试代码
<template>
<div>
<p>checkbox</p>
<!-- 第一种情况 -->
<y-checkbox v-model="checkboxValue" @change="handleChange">杭州</y-checkbox>
<!-- 第二种情况 -->
<y-checkbox v-model="checkboxArr" label="1" @change="handleChange">杭州</y-checkbox>
<!-- 半选中状态 -->
<y-checkbox
:indeterminate="checkboxIndeterminate"
v-model="checkboxIndeterminateValue"
@change="handleIndeterminate">半选中状态</y-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
checkboxValue: true,
checkboxArr: [
'1',
'2',
'3',
],
checkboxIndeterminate: true,
checkboxIndeterminateValue: false,
}
},
watch: {
checkboxValue() {
console.log('父组件checkboxValue', this.checkboxValue)
}
},
methods: {
handleChange(data) {
console.log('父组件change事件', data);
},
handleIndeterminate(data) {
console.log('半选', data);
// 将半选控制标识更改为false, 便可以正常选中和取消选中了
this.checkboxIndeterminate = false;
}
}
}
</script>
- 注意：单独使用checkbox时，且设置了半选中
:indeterminate="checkboxIndeterminate"，则需要绑定change事件以更改该checkboxIndeterminate为false，从而正常选中和取消选中
组件checkbox
template
<template>
<!-- checkbox选中状态: 选中, 不选中, 半选
单独使用checkbox，如何判断选中状态呢?
prop接收的value值类型需为布尔类型: true选中, false不选中
半选中状态如何处理?
半选中状态下，如果再次点击，将indeterminate置为false, 便可以选中和取消选中了
但是只能在父组件中控制indeterminate的值（因为子组件不能更改父组件prop传进来的值） -->
<label
class="y-checkbox"
role="checkbox">
<!-- checkbox分两部分, 一部分是多选框，一部分是标签 -->
<span
class="y-checkbox__input"
:class="{
'is-checked': isChecked,
'is-indeterminate': indeterminate,
}"
>
<!-- y-checkbox__inner 替换了原生多选框的样式，原生多选框只有两种状态，通过自定义的样式可定义第三种半选状态-->
<span class="y-checkbox__inner"></span>
<!-- 原生多选框, 如果value和labl都没有传, 则选中状态变化后, model值为true或false
定义ref以便获取该dom元素从而通知该原生多选框的选中状态
自定义属性 aria-hidden 可直观明白该html是否展示
-->
<input
ref="checkbox"
class="y-checkbox__original"
type="checkbox"
:value="label"
aria-hidden="false"
v-model="model"
@change="handleChange"/>
</span>
<!-- 标签, 如果子元素存在则展示子元素, 否则标签为label -->
<span
class="y-checkbox__label">
<slot></slot>
<templat v-if="!$slots.default">{{label}}</templat>
</span>
</label>
</template>
scripts
checkbox 选中状态判定
<script>
export default {
name: 'YCheckbox',
props: {
value: {},
// label选中状态的值, 只有在checkbox-group或者value为数组类型的时候方可有效
label: {},
// 半选中状态
indeterminate: Boolean,
},
computed: {
// 原生多选框值的选中状态
model: {
get() {
return this.value;
},
set(val) {
console.log('model发生了变化', val);
/**
* 通知父组件value值发生了变化
* v-model双向绑定, 手动通知父组件吗？这是因为并非是value值发生了变化，
* 而是另一个依赖变量model发生了变化, model发生变化后value也要变, 所以需要手动触发
*/
this.$emit('input', val);
}
},
/**
* 选中状态的判定
* 如何判定选中状态？
* 这里分三种情况，一种是单个使用(value为布尔类型, label为undefined)
* 一种情况是单个使用(value为数组类型, label为数组中的某一项)
* 一种情况是父组件为checkbox-group(value为undefined, label有值)
*/
isChecked() {
// this.model.toString(), {}.toString.call(this.model)有什么区别？
// 若this.model=true, 则 this.model.toString()->true, {}.toString.call(this.model)->[object Boolean]
console.log('第一种情况', {}.toString.call(this.model), {}.toString.call(this.model) === '[object Boolean]')
// 如果是第一种情况, 单独使用多选框且value值为布尔类型
if({}.toString.call(this.model) === '[object Boolean]') {
return this.model;
}
// 如果是第二种情况，单独使用且value为数组类型
// 数组的判定类型有几种？
// console.log('第二种情况', this.model, Array.isArray(this.model), this.model.indexOf(this.label), this.model.includes(this.label));
else if(Array.isArray(this.model)) {
console.log(this.model, this.label);
// 判断值是否存在于数组中
// indexOf和includes的区别
return this.model.indexOf(this.label) > -1;
}
// 第三种情况，父组件是checkbox-group
console.log('第三种情况，父组件是checkbox-group');
}
},
methods: {
/**
* 父组件可能有change事件，即选中状态变化后的回调
* 因为这是由原生多选框选中状态变化后的回调，需要等视图更新后方可获取到新值，并将新值传给回调函数
*/
handleChange() {
// console.log('原生checkbox发生了变化', this.model);
this.$nextTick(()=>{
this.$emit('change', this.model);
})
},
},
mounted() {
console.log('checkbox', this.value, this.label);
// console.log(this.model.toString(), {}.toString.call(this.model), {}.toString.call(this.model) === '[object Boolean]')
},
watch: {
isChecked() {
console.log('watchisChecked', this.isChecked)
}
}
}
</script>
this.model.toString()与{}.toString.call(this.model)的区别indexOf与includes的区别
style
.y-checkbox {
position: relative;
margin-right: 30px;
}
.y-checkbox:last-child {
margin-right: 0;
}
.y-checkbox__input {
position: relative;
}
.y-checkbox__inner {
display: inline-block;
position: relative;
width: 14px;
height: 14px;
border: 1px solid #dcdfe6;
border-radius: 2px;
box-sizing: border-box;
vertical-align: middle;
}
.y-checkbox__inner::after {
content: '';
display: content-box;
width: 3px;
height: 7px;
position: absolute;
top: 2px;
left: 4px;
box-sizing: border-box;
border: 1px solid #fff;
border-top: 0;
border-left: 0;
transform: rotate(0deg) scale(0);
}
/* 选中样式 */
.y-checkbox__input.is-checked .y-checkbox__inner {
background-color: #409eff;
border-color: #409eff;
}
/* 选中后中间的对号,通过旋转45度得到 */
.y-checkbox__input.is-checked .y-checkbox__inner::after {
transform: rotate(45deg) scale(1);
}
/* 半选中状态 */
.y-checkbox__input.is-indeterminate .y-checkbox__inner {
background-color: #409eff;
border-color: #409eff;
}
/* 半选中状态 中间的横杠 */
.y-checkbox__input.is-indeterminate .y-checkbox__inner::after {
content: none;
}
.y-checkbox__input.is-indeterminate .y-checkbox__inner::before {
content: '';
display: inline-block;
height: 2px;
background-color: #fff;
position: absolute;
top: 5px;
right: 0;
left: 0;
transform: scale(.5);
}
/* 隐藏原生多选框 */
.y-checkbox__original {
opacity: 0;
outline: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
margin: 0;
}
.y-checkbox__label {
font-size: 14px;
display: inline-block;
padding-left: 10px;
}
总结
- 该 checkbox 测试，实现v-model、lable属性和change事件
- checkbox 逻辑跟 radio 有很多相似之处，相似的html结构、判定逻辑
- checkbox 三种选中状态（注意半选中状态切换到选中状态和取消选中状态）以及其两种使用形式
- indexOf 与 includes 的区别
- {}.toString.call(obj) 与 obj.toString() 的区别
- checkbox 选中状态下中间的对号的生成（伪元素创建，旋转）
