首页 > 其他 > 详细

vant UI ActionSheet 上拉菜单

时间:2020-04-23 14:59:38      阅读:563      评论:0      收藏:0      [点我收藏+]
<template>
  <!-- ActionSheet 上拉菜单 -->
  <div id="action_sheet">
 
    <van-button type="primary" @click="alertMenu">弹出菜单</van-button>
    <van-action-sheet v-model="show" :actions="actions" cancel-text="取消" round @cancel="toCancel" @select="onSelect" />
 
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
        msg: ‘‘,
        show: false,
        actions: [{
            name: ‘选项1‘
          },
          {
            name: ‘选项2‘
          },
          {
            name: ‘选项3‘,
            subname: ‘描述信息‘
          }
        ]
      }
    },
    methods: {
      alertMenu(){
        this.show = true;
      },
      onSelect(item){
          console.log(item);
          this.show = false;
          this.$toast({
            message:item.name,
            duration:500
          })
      },
      toCancel(){
        console.log(‘点击了取消‘);
      }
    },
    mounted() {
 
    }
  }
</script>

技术分享图片

vant UI ActionSheet 上拉菜单

原文:https://www.cnblogs.com/gzw-23/p/12760632.html

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