写这一系列组件的目的
- 更快地熟悉vue的语法
- 进一步了解模块化的开发
- 同时参照iview源代码，积累组件的开发经验(设计模式)，如何写出低耦合，高内聚，方便维护的组件。
已开发的组件
- Input组件
- Radio组件
Input组件
1. .number修饰符：使用v-model.number可以将用户输入的内容转为Number类型
2. 通过组件对外暴露css类名，不会破坏组件结构
//组件内默认返回(input的类名/input左边的icon/input右边的icon)
cssStyle: {
type: Object,
default() {
return {
inputWrapper: '',
iconLeft: '',
iconRight: ''
}
}
}
需要使用该组件的页面只需要写入类名
<i-input :css-style="cssDefaultConfig"></i-input>
cssDefaultConfig: {
inputWrapper: "extend",
iconLeft: "i-left",
iconRight: "i-right"
}
3.使用scss预处理器: 对于一些只展示UI的内容，方便处理
&[size='small'] {
width: 100px;
}
&[size='middle'] {
width: 200px;
}
&[size='large'] {
width: 500px;
}
4.具名插槽的使用
组件内提前设置好插槽，可以实现Input两边的内容
<slot name="prepend"></slot>
<slot name="append"></slot>
Radio组件
1.自定义组价上的v-model：默认情况下Radio组件是绑定的属性是value并且绑定的事件是Input，所以实现时候需要指定正确的事件
<Radio
v-model="isSelected"
:check-type="checkType"
@change="getHandle1">Apple</Radio>
//Radio组件
//将默认绑定属性由value改为checked,事件由input改为change
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: {
type: Boolean,
default: false
}
}
同时需要触发change事件
<input
type="radio"
@change="handleChange"
hidden/>
handleChange(event) {
this.$emit('change', event.target.checked);
}
至此，就实现了自定义组件上的双向绑定功能了。
2.这里强调的一点就是type=radio的两个属性：a.name;b.id;
当出现一组互斥的单选组，需要将这一组下的name属性设置为同个名称;
如果你是使用了label中的for属性，这里必须跟input的Id属性保持一致。
目前该组件的name,id生成是不合理的，后续会在checkBox组件使用一个自动生成Id的插件
3.对于v-model传入的值，需要将其在data或者computed进行初始化操作
return {
choosed: this.checked,
type: this.checkType
}
4.scss使用混合器减少代码量
$primary-color: #2d8cf0;
$success-color: #19be6b;
$warning-color: #ff9900;
@mixin link-colors($color) {
background: -webkit-radial-gradient( circle closest-side,$color 50%,#fff 50%);
box-shadow: 0 0 4px 1px $color;
}
input[check-type='primary']:checked + .label_radio::before{
@include link-colors($primary-color);
}
input[check-type='success']:checked + .label_radio::before{
@include link-colors($success-color);
}
input[check-type='warning']:checked + .label_radio::before{
@include link-colors($warning-color);
}
5.对于插槽中的通信
//APP.vue
//使用的方式
<RadioGroup v-model="phone" size="middle">
<Radio label="android">
<span>Android</span>
</Radio>
<Radio label="windows">
<span>Windows</span>
</Radio>
<Radio label="apple">
<span>Apple</span>
</Radio>
</RadioGroup>
//RadioGroup,这里就需要使用插槽slot
<div id="radioGroup">
<slot></slot>
</div>
那么现在我们如何进行父子组件的通信呢?
这个时候就需要用到一对组合了：
this.$children/this.$parent
//再通过判断就可以实现两者间的通信,这里有个地方需要注意，最好这两个组件是一一对应的，否则会因为过多的this.$children/this.$parent导致难以维护。
this.$parent.$options.name == 'radioGroup'
