使用Vant完成底部弹出框 ActionSheet 上拉菜单

最新推荐文章于 2024-07-30 15:36:41 发布

柠檬不萌只是酸i

最新推荐文章于 2024-07-30 15:36:41 发布

阅读量1.2w

点赞数 4

分类专栏： Vant 文章标签： Vant里面的上拉菜单 ActionSheet上拉菜单

本文链接：https://blog.csdn.net/Miss_liangrm/article/details/100852662

版权

本文介绍了如何使用Vant组件库中的ActionSheet创建底部弹出的上拉菜单，提供了效果展示及代码示例，并指出了更多API和Options的查看途径。

摘要由CSDN通过智能技术生成

效果图：

代码展示：（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: '描述信息'
          }
        ]
      }
    },