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