ActionSheet 上拉菜单

使用指南

从底部弹出的菜单模态框，提供和当前场景相关的 2 个以上的操作动作，也支持提供描述。内置固定的展示样式、不支持特别灵活的修改。

TIP

此组件基于h3-popup-modal组件实现 , 属于Popup家族组件，查看这篇blogPopup家族, 了解更多

代码演示

查看代码

<template>
  <div>
    <h3-action-sheet
      v-model="showActionSheet"
      :title="title"
      :menus="actionSheetMenus"
      @select="clickActionSheetMenu"
      @cancel="clickActionSheetMenu"
      showCancel
    />
    <h3-button @click="toggleActionSheet" type="primary">
      action sheet
    </h3-button>
    <br />
    <br />
    <h3-button @click="toggleActionSheetWithTitle" type="primary">
      action sheet with title
    </h3-button>
  </div>
</template>
<script>
import H3ActionSheet from '@/components/h3-action-sheet';
import H3Button from '@/components/h3-button';

export default {
  components: {
    H3ActionSheet,
    H3Button,
  },
  data () {
    return {
      showActionSheet: false,
      title: '',
      actionSheetMenus: [
        {
          label: 'Default',
        },
        {
          label: 'Primary',
          type: 'primary',
        },
        {
          label: 'Warn',
          type: 'warning',
        },
        {
          label: 'Success',
          type: 'success',
        },
        {
          label: 'Delete',
          type: 'error',
        },
        {
          label: 'Disabled',
          disabled: true,
        },
      ],
    };
  },
  methods: {
    toggleActionSheet () {
      this.title = '';
      this.showActionSheet = true;
    },
    toggleActionSheetWithTitle () {
      this.title = 'I am description, description, description';
      this.showActionSheet = true;
    },
    clickActionSheetMenu (menu) {
      console.log(menu);
    },
  },
};
</script>

与h3-mobile-vue组件的区别以及迁移

通过对弹出组件梳理，进行重构及统一弹出风格及UI。若要做迁移请参考

1. 弃用的props：theme

2. 替换的props：

   • value => visible
   • closeOnClickingMask => maskClosable
   • message => title
   • closeOnClickingMenu => menuClosable

3. 新增的props：closable及h3-popup-modal组件的props

4. menus 子配置项 修改

API

Prop

属性	说明	类型	默认值
visible	是否显示，v-model绑定值	boolean	false
maskClosable	点击蒙层是否可触发关闭	boolean	false
mask	是否显示透明蒙层，防止触摸穿透	boolean	true
maskCls	mask蒙层自定义class	string	-
wrapCls	wrap弹窗内容区域的自定义class	string	-
round	是否圆角	boolean	false
getRenderContainer	把组件挂载某个地方,函数请返回节点,字符串默认通过document.querySelector查找	Function=> Node / string	document.body
showCancel	是否显示取消菜单	boolean	true
cancelText	取消菜单显示文字	string	'取消'
title	模态框标题描述文字	string	-
closable	头部关闭按钮是否显示，默认不显示	boolean	false
menus	模态框菜单对象	array	[]
menuClosable	点击菜单是否可触发关闭	boolean	true

• menus 子配置项

属性	说明	类型
disabled	是否禁用	boolean
type	样式类型 可选值：default | primary | warning | error | success	string
icon	图标	string
label	菜单名称	string

Event

事件名	说明	参数
toggle	切换显示时触发，v-model绑定事件	value
show	显示时回调	value：true
hide	关闭时回调	value：false
cancel	点击取消按钮及蒙层回调	无
select	点击菜单回调	参数1为传入的item，即menus[index],参数2为index