一、效果图
说明:点击 开始下划线
>> 该下拉项变成 结束上划线
>> 点击 结束上划线
>> 该下拉项又变回 开始下划线
二、代码实现
- html部分
<a-form-model-item>
<a-select v-model="form.insert" @select="insertClick" >
<a-select-option :value="overlineValue">{{overline}}</a-select-option>
</a-select>
</a-form-model-item>
- js部分
data(){
return {
overline: '开始上划线',
overlineValue: '\\O',
form:{
insert:''
},
}
}
insertClick() {
if(this.form.insert === '\\O'){
this.overline = '结束上划线'
this.overlineValue = '\\o'
}
if (this.form.insert === '\\o') {
this.overline = '开始上划线'
this.overlineValue = '\\O'
}
}
- 效果见图
说明:可以发现, 开始上划线
和 结束上划线
可以实现动态切换。但选中后输入框里面的内容是该项对应的value值,并不是我们想要的效果。
三、优化代码
- html部分
<a-form-model-item>
<a-select v-model="insertObj" @select="insertClick" :labelInValue="true" >
<a-select-option :value="overlineValue">{{overline}}</a-select-option>
</a-select>
</a-form-model-item>
- js部分
data(){
return {
overline: '开始上划线',
overlineValue: '\\O',
form:{
insert:''
},
insertObj:{}
}
}
insertClick() {
this.form.insert = this.insertObj.key
if (this.form.insert === '\\O') {
this.overline = '结束上划线'
this.overlineValue = '\\o'
}
if (this.form.insert === '\\o') {
this.overline = '开始上划线'
this.overlineValue = '\\O'
}
}
- 代码说明
用到了select组件自带的 labelInValue参数,将select的value包装成了一个对象,这样就可以解决上述的问题。
