动作面板 ActionSheet

基本

  1. <za-cell>
  2.   <za-button size="xs" slot="description" @click="visible2 = true">开启</za-button>
  3.   普通
  4. </za-cell>
  5. <za-cell>
  6.   <za-button size="xs" slot="description" @click="visible1 = true">开启</za-button>
  7.   带取消操作
  8. </za-cell>
  9. <za-cell>
  10.   <za-button size="xs" slot="description" @click="visible3 = true">开启</za-button>
  11.   圆角，留边
  12. </za-cell>
  13. <za-actionsheet :visible.sync="visible1" :actions="actions1" @cancel="cancelCb"></za-actionsheet>
  14. <za-actionsheet :visible.sync="visible2" :actions="actions2" :showCancel="false" @cancel="cancelCb"></za-actionsheet>
  15. <za-actionsheet :visible.sync="visible3" :spacing="true" shape="radius" :actions="actions2" @cancel="cancelCb"></za-actionsheet>

Vue Script

  1. <script name="vue">
  2. export default {
  3.   data() {
  4.     return {
  5.       visible1: false,
  6.       visible2: false,
  7.       visible3: false,
  8.       actions1: [{
  9.         text: '操作一',
  10.         onClick: () => console.log('action 1'),
  11.       },{
  12.         text: '操作二',
  13.         onClick: () => console.log('action 2'),
  14.       },{
  15.         theme: 'error',
  16.         text: '操作三',
  17.         onClick: () => console.log('action 3'),
  18.       }],
  19.       actions2: [{
  20.         text: '操作一',
  21.         onClick: () => console.log('action 1'),
  22.       },{
  23.         text: '操作二',
  24.         onClick: () => console.log('action 2'),
  25.       }],
  26.     }
  27.   },
  28.   methods: {
  29.     cancelCb(reason, event){
  30.       console.log(reason, event)
  31.     }
  32.   },
  33. };
  34. </script>

API

ActionSheet Attributes

属性类型默认值可选值／参数说明
shapestring''形状 ，可选radius
spacingbooleanfalse是否留边
visiblebooleanfalse是否显示, 支持.sync 修饰符 (v2.3.0+)
actionsarrayOf(object)[ ]object: { theme, text, onClick }动作列表
cancel-textstring'取消'取消菜单的文案

ActionSheet Events

事件名称说明回调参数
cancel关闭时触发的事件event 事件对象

Actions 类型定义

属性类型默认值说明
textstring-按钮文字
themestring'default'按钮主题，可选值 default、primary、success、warning、error
onClickfunction-按钮点击后触发的回调函数

ActionSheet 动作面板 - 图1