使用vue2.0和mint-ui中的action sheet组件来做一个性别选择器
搜了很多同类文章都没能解决自己的问题,只能手写。
废话不多说,代码如下:
import部分,引用mint-ui的组件
import { Actionsheet,Popup } from 'mint-ui';
template部分代码
<div @click="sexVisible = true">
<mt-cell title="性别" is-link>
{{getPersonalData.gender}}
</mt-cell>
</div>
<mt-actionsheet
:actions= "slotsdata" //编辑slot里面的data数据
v-model="sexVisible"> //控制选择器的显示和隐藏
</mt-actionsheet>
data部分的代码
data() {
return {
sexVisible:false, //选择器的显示与隐藏
slotsdata: [{
name: '男',
method : this.man //调用函数
}, {
name: '女',
method : this.woman //调用函数
}],
};
},
method部分的代码
methods: {
man() {
this.getPersonalData.gender = '男'
},
woman()
this.getPersonalData.gender = '女'
},
希望对大家有所启发!