天天看點

使用vue2.0和mint-ui中的action sheet元件來做一個性别選擇器使用vue2.0和mint-ui中的action sheet元件來做一個性别選擇器

使用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 = '女'
   
},
           

希望對大家有所啟發!