使用vue2.0和mint-ui中的action sheet元件來做一個性别選擇器
搜了很多同類文章都沒能解決自己的問題,隻能手寫。
廢話不多說,代碼如下:
import部分,引用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 = '女'
},
希望對大家有所啟發!