vant UI ActionSheet 上拉菜單


<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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM