|
checkbox 源码
{{label}}
import Emitter from 'element-ui/src/mixins/emitter';
export default {
name: 'ElCheckbox',
mixins: [Emitter],
inject: {
elForm: {
default: ''
},
elFormItem: {
default: ''
}
},
componentName: 'ElCheckbox',
data() {
return {
selfModel: false,
focus: false,
isLimitExceeded: false
};
},
computed: {
model: {
get() {
return this.isGroup
? this.store : this.value !== undefined
? this.value : this.selfModel;
},
set(val) {
// 如果有ElCheckboxGroup，要判断选中值的个数
if (this.isGroup) {
this.isLimitExceeded = false; // 个数超过范围的标识
(this._checkboxGroup.min !== undefined &&
val.length < this._checkboxGroup.min &&
(this.isLimitExceeded = true)); // 短路逻辑可以这样赋值
(this._checkboxGroup.max !== undefined &&
val.length > this._checkboxGroup.max &&
(this.isLimitExceeded = true));
// 不超出范围，向上emit
this.isLimitExceeded === false &&
this.dispatch('ElCheckboxGroup', 'input', [val]); // 触发ElCheckboxGroup组件中的input事件
} else {
this.$emit('input', val);
this.selfModel = val;
}
}
},
isChecked() {
if ({}.toString.call(this.model) === '[object Boolean]') {
// 如果this.model是布尔值类型，直接返回
return this.model;
} else if (Array.isArray(this.model)) {
// 如果this.model是数组类型（说明使用了el-checkbox-group），此时如果包含label的值就说明此el-checkbox被选中，反之没被选中
return this.model.indexOf(this.label) > -1;
} else if (this.model !== null && this.model !== undefined) {
// 如果this.model不是布尔值，数组，null，undefined，那就剩下string，number
return this.model === this.trueLabel;
}
},
// 判断是否用了el-checkbox-group包裹
isGroup() {
let parent = this.$parent;
while (parent) {
if (parent.$options.componentName !== 'ElCheckboxGroup') {
// 如果父组件name不是ElCheckboxGroup，继续向上找
parent = parent.$parent;
} else {
// 如果父组件name是ElCheckboxGroup，把父组件实例赋值给_checkboxGroup
// 在计算属性中也可以赋值
this._checkboxGroup = parent;
return true;
}
}
return false;
},
store() {
// 优先取ElCheckboxGroup中的value，其次取本组件中的value
return this._checkboxGroup ? this._checkboxGroup.value : this.value;
},
/* used to make the isDisabled judgment under max/min props */
/* 如果使用checkbox-group，要根据max和mix属性判断checkbox的disabled状态 */
isLimitDisabled() {
const { max, min } = this._checkboxGroup;
// 如果没有max并且没有mix，那么不做disabled限制
return !!(max || min) &&
// 如果已选的个数等于max了，并且当前checkbox没被选中，那么该checkbox不能被选，禁用掉
(this.model.length >= max && !this.isChecked) ||
// 如果已选的个数等于mix了，并且当前checkbox被选了，那么该checkbox不能被勾掉，禁用掉
(this.model.length {
if (this.isGroup) {
this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);
}
});
}
},
created() {
this.checked && this.addToStore();
},
mounted() { // 为indeterminate元素 添加aria-controls 属性
if (this.indeterminate) {
// 以aria-开头的都是无障碍浏览属性
this.$el.setAttribute('aria-controls', this.controls);
}
},
watch: {
value(value) {
this.dispatch('ElFormItem', 'el.form.change', value);
}
}
};
复制代码
mixins emitter
function broadcast(componentName, eventName, params) {
this.$children.forEach(child => {
var name = child.$options.componentName;
if (name === componentName) {
child.$emit.apply(child, [eventName].concat(params));
} else {
broadcast.apply(child, [componentName, eventName].concat([params]));
}
});
}
export default {
methods: {
// 向上找到componentName组件 触发eventName事件
dispatch(componentName, eventName, params) {
var parent = this.$parent || this.$root;
var name = parent.$options.componentName;
// 如果有parent并且，没有name或者name不等于componentName 进入while
// 终止条件是没有parent或者name等于componentName
// 当然没有parent什么也不做
while (parent && (!name || name !== componentName)) {
parent = parent.$parent;
if (parent) {
name = parent.$options.componentName;
}
}
if (parent) {
// 找到componentName组件后，触发eventName事件
parent.$emit.apply(parent, [eventName].concat(params));
}
},
// 向下找到componentName组件，触发eventName事件
broadcast(componentName, eventName, params) {
broadcast.call(this, componentName, eventName, params);
}
}
};
复制代码
checkbox-group 源码
import Emitter from 'element-ui/src/mixins/emitter';
export default {
name: 'ElCheckboxGroup',
componentName: 'ElCheckboxGroup',
mixins: [Emitter],
inject: {
elFormItem: {
default: ''
}
},
props: {
value: {},
disabled: Boolean,
min: Number,
max: Number,
size: String,
fill: String,
textColor: String
},
computed: {
_elFormItemSize() {
return (this.elFormItem || {}).elFormItemSize;
},
checkboxGroupSize() {
return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
}
},
watch: {
value(value) {
this.dispatch('ElFormItem', 'el.form.change', [value]);
}
}
};
复制代码
辅助阅读
v2.cn.vuejs.org/v2/guide/fo…
|