mintUI之action-sheet的使用

一、實現效果（如圖）

二、代碼

1、結構代碼

<button class="mint-button" @click="actionSheet">
                <label class="mint-button-text">今日</label>
              </button>
        <mt-actionsheet
          :actions="actions"
          v-model="sheetVisible">
        </mt-actionsheet>

2、js代碼

export default {
    data(){
      return{
        actions:[
          {
        name: '今日',
        method : this.getToday    // 調用methods中的函數
      },
      {
        name: '本月', 
        method : this.getMonth    // 調用methods中的函數
      },
      {
        name:'累計',
        method : this.getCumulative
      }],
      // action sheet 默認不顯示
      sheetVisible: false
      }
    },
    components: {
      mtFooter,
      mtHeader
    },
    methods:{
      actionSheet: function(){
              // 打開action sheet
            this.sheetVisible = true;
          },
      getToday:function(){
        console.log('getToday')
      },
      getMonth:function(){
        console.log('getMonth')
      },
      getCumulative:function(){
        console.log('getCumulative')
      },
    }
  }

 有使用問題歡迎大家留言！

博主qq：1432208663