vant/packages/actionsheet/zh-CN.md

Actionsheet 上拉菜单

使用指南

import { Actionsheet } from 'vant';

Vue.use(Actionsheet);

代码演示

基础用法

需要传入一个actions的数组，数组的每一项是一个对象，对象属性见文档下方表格。

<van-actionsheet
  v-model="show"
  :actions="actions"
  @select="onSelect"
/>

export default {
  data() {
    return {
      show: false,
      actions: [
        {
          name: '选项'
        },
        {
          name: '选项',
          subname: '描述信息'
        },
        {
          loading: true
        },
        {
          name: '禁用选项',
          disabled: true
        }
      ]
    };
  },

  methods: {
    onSelect(item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.show = false;
      Toast(item.name);
    }
  }
}

带取消按钮的 Actionsheet

如果传入了cancelText属性，且不为空，则会在下方显示一个取消按钮，点击会将当前Actionsheet关闭。

<van-actionsheet
  v-model="show"
  :actions="actions"
  cancel-text="取消"
  @select="onSelect"
  @cancel="onCancel"
/>

带标题的 Actionsheet

如果传入了title属性，且不为空，则另外一种样式的Actionsheet，里面内容需要自定义。

<van-actionsheet v-model="show" title="支持以下配送方式">
  <p>一些内容</p>
</van-actionsheet>

API

参数	说明	类型	默认值
actions	菜单选项	Array	[]
title	标题	String	-
cancel-text	取消按钮文字，为空时不展示取消按钮	String	-
overlay	是否显示遮罩层	Boolean	true
close-on-click-overlay	点击遮罩是否关闭菜单	Boolean	true
lazy-render	是否在首次显示弹层时才渲染 DOM 节点	Boolean	true
get-container	指定挂载的节点，可以传入 CSS 选择器， 或一个返回 DOM 节点的函数	`String	() => HTMLElement`

Event

事件名	说明	参数
select	选中选项时触发，禁用或加载状态下不会触发	item: 选项对应的对象
cancel	取消按钮点击时触发	-

actions

API中的actions为一个对象数组，数组中的每一个对象配置每一列，每一列有以下key：

key	说明
name	标题
subname	二级标题
className	为对应列添加额外的 class
loading	是否为加载状态
disabled	是否为禁用状态

更新日志

版本	类型	内容
1.1.16	feature	新增 select 事件
1.1.16	bugfix	修复选项加载中时仍然有点击态的问题
1.1.11	feature	新增 lazy-render 属性
1.1.9	feature	支持禁用选项
1.1.8	bugfix	修复在 rem 布局下标题文字大小错误的问题
1.0.4	feature	新增 cancel 事件
1.0.4	improvement	增加最大高度限制
1.0.0	bugfix	修复下边框未展示的问题