首页 > 其他 > 详细

mintUI之action-sheet的使用

时间:2019-11-01 15:05:31      阅读:373      评论:0      收藏:0      [点我收藏+]

一、实现效果(如图)

技术分享图片

二、代码

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

mintUI之action-sheet的使用

原文:https://www.cnblogs.com/yuxiaoge/p/11776802.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!