【Vant Weapp】van-action-sheet 动作面板

宾果的救星

已于 2022-11-08 10:27:16 修改

阅读量5.4k

点赞数 2

分类专栏：微信小程序文章标签：前端

于 2021-01-24 13:45:27 首次发布

本文链接：https://blog.csdn.net/wuli_youhouli/article/details/113085502

版权

微信小程序专栏收录该内容

19 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何在 Vue 中使用 vant-action-sheet 组件来自定义取消按钮的样式，并展示了如何监听取消操作和选择事件。通过设置 `show`、`actions` 和 `cancel-text` 属性，结合数据绑定实现弹窗显示与关闭。同时，`onCancel` 和 `onSelect` 方法用于处理用户点击取消和选择列表项后的逻辑，例如更新选中状态并调用获取列表的方法。

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

展示取消按钮的默认样式

自定义使用

触发的地方

<view class="title" bindtap="onOpen">
    {{activeName}} <van-icon name="arrow-down" />
</view>

展示的弹窗

<van-action-sheet 
    show="{{ showDate }}" 
    actions="{{ list }}" 
    cancel-text="取消"  
    bind:cancel="onCancel" 
    bind:select="onSelect"
/>

.title {
  display: flex;
  align-items: center;
  font-size: 34rpx;
  font-weight: bold;
  padding:20rpx 30rpx 30rpx;
}

data:{
  list: [
    {
      name: '周',
      id: 0
    },
    {
      name: '月',
      id: 1
    },
    {
      name: '季',
      id: 2
    },
    {
      name: '年',
      id: 3
    }
  ], 
  active:0,
  activeName:'周',
  showDate: false,
}

onOpen() {
  this.setData({ showDate: true });
},
onCancel() {
  this.setData({ showDate: false });
},

onSelect(event) {
  let d = event.detail
  this.setData({
    active: d.id,
    activeName: d.name,
    showDate: false
  })

  // 选择结束后获取列表
  this.getList()
},