vant UI ActionSheet 上拉菜单

时间:2020-04-23 14:59:38   收藏:0   阅读:563
<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>

技术分享图片

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

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!