ActionSheet 上拉菜单

引入

  1. import{ActionSheet}from'vant';
  2. Vue.use(ActionSheet);

代码演示

基础用法

ActionSheet通过actions数组来定义展示的选项,数组的每一项是一个对象,对象属性见文档下方表格。

  1. <van-action-sheet
  2. v-model="show"
  3. :actions="actions"
  4. @select="onSelect"
  5. />
  1. exportdefault{
  2. data(){
  3. return{
  4. show:false,
  5. actions:[
  6. { name:'选项'},
  7. { name:'选项'},
  8. { name:'选项', subname:'描述信息'}
  9. ]
  10. };
  11. },
  12. methods:{
  13. onSelect(item){
  14. // 点击选项时默认不会关闭菜单,可以手动关闭
  15. this.show =false;
  16. Toast(item.name);
  17. }
  18. }
  19. }

选项状态

选项可以设置为加载状态或禁用状态

  1. <van-action-sheet
  2. v-model="show"
  3. :actions="actions"
  4. />
  1. exportdefault{
  2. data(){
  3. return{
  4. show:false,
  5. actions:[
  6. { name:'选项'},
  7. { name:'选项', loading:true},
  8. { name:'禁用选项', disabled:true}
  9. ]
  10. };
  11. }
  12. }

展示取消按钮

设置cancelText属性后,会在底部展示取消按钮,点击后关闭当前菜单

  1. <van-action-sheet
  2. v-model="show"
  3. :actions="actions"
  4. cancel-text="取消"
  5. @select="onSelect"
  6. @cancel="onCancel"
  7. />

展示标题栏

通过设置title属性展示标题栏,同时可以使用插槽自定义菜单内容

  1. <van-action-sheetv-model="show"title="标题">
  2. <p>内容</p>
  3. </van-action-sheet>

API

Props

参数说明类型默认值版本
actions菜单选项Array[]-
title标题String--
cancel-text取消按钮文字String--
overlay是否显示遮罩层Booleantrue-
close-on-click-action是否在点击选项后关闭Booleanfalse2.0.0
close-on-click-overlay是否在点击遮罩层后关闭Booleantrue-
lazy-render是否在显示弹层时才渲染节点Booleantrue1.1.11
lock-scroll是否锁定背景滚动Booleantrue2.0.0
get-container指定挂载的节点,可以传入选择器,或一个返回节点的函数String | () => HTMLElement--
safe-area-inset-bottom是否开启 iPhone X 底部安全区适配,需要在 viewport meta 标签中设置 viewport-fit=coverBooleanfalse1.6.15

Events

事件名说明回调参数
select选中选项时触发,禁用或加载状态下不会触发item: 选项对应的对象, index: 选择对应的索引
cancel取消按钮点击时触发-
click-overlay点击遮罩层时触发-

actions

Props中的actions为一个对象数组,数组中的每一个对象配置每一列,每一列有以下key

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

ActionSheet 上拉菜单 - 图1