vue2中使用mint-ui,性別選擇

安裝需要的組件

import { DatetimePicker,Toast,Popup,Picker  } from 'mint-ui';

templete部分

<div class="sex">
     <span>性別</span>
      <div @click="sexVisible = true">{{sex}}</div>
 </div>

<div class="sexPicker">
       <mt-popup
           v-model="sexVisible"
            position="bottom">
            <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
         </mt-popup>
</div>

　　

data部分

sexVisible: false,  //選擇器的顯示與影藏
slots: [
      {
             flex: 1,
             values: ['男','女'],
             className: 'slot1',
              textAlign: 'center',
              flex: 1
        }
],

methods部分

onValuesChange(picker, values) {
    //console.log(values)
    this.sex = values[0];
    this.sexVisible = false;
},