ActionSheet 底部面板

使用指南

组件介绍

ActionSheet 底部面板，从底部向上拉起操作菜单列表。

引入方式

import { Actionsheet } from 'feart';
components:{
  'fe-actionsheet':Actionsheet,
}

data() {
    return {
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      actions1: [
        { key: 'menu1', text: '拍照' },
        { key: 'menu2', text: '从相册选择' },
      ],
      actions2: [
        { text: '选项一', badgeContent: '', badgeColor: '#ff3b30' },
        { text: '选项二', badgeContent: 'new', badgeColor: '#ff3b30' },
        { text: '选项三' },
      ],
      actions3: [
        {
          key: 'agree',
          text: '同意',
          color: '#4fc08d',
        },
        {
          key: 'delete',
          text: '确认删除',
          color: 'f4333c',
        },
      ],
      actions4: [
        { key: 'menu1', text: '选项一描述最多一行', disabled: true },
        { key: 'menu2', text: '选项二最多一行' },
        { key: 'menu3', text: '选项三描述最多一行' },
      ],
      actions5: [
        { text: '选项一描述最多一行', icon: 'image' },
        { text: '选项二最多一行', icon: 'laws' },
        { text: '选项三描述最多一行', icon: 'star' },
      ],
    };
  }

代码演示

默认（基础用法）

<fe-button class="middle" @click.native="show1 = true">默认</fe-button>
<fe-actionsheet
  v-model="show1"
  :actions="actions1"
  :round="true"
  cancel-text="取消"
></fe-actionsheet>

带新消息（带徽标）

<fe-button class="middle" @click.native="show2 = true">带新消息</fe-button>
<fe-actionsheet v-model="show2" :actions="actions2" cancel-text="取消"></fe-actionsheet>

带说明

<fe-button class="middle" @click.native="show3 = true">带说明</fe-button>
<fe-actionsheet
  v-model="show3"
  :actions="actions3"
  description="这是提供一行或二行注释, 通过信息澄清的方式避免产生用户疑问。"
  cancel-text="关闭"
></fe-actionsheet>

带标题

<fe-button class="middle" @click.native="show4 = true">带标题</fe-button>
<fe-actionsheet
  v-model="show4"
  :actions="actions4"
  title="我是标题呀"
  alignLeft
  :close-on-clicking-action="false"
  @select="onSelect"
  @cancel="onCancel"
  @click-mask="onClickMask"
></fe-actionsheet>

带图标

<fe-button class="middle" @click.native="show5 = true">带图标</fe-button>
<fe-actionsheet
  v-model="show5"
  :actions="actions5"
  alignLeft
  :close-on-clicking-action="false"
></fe-actionsheet>

API

Action 数据结构

actions 举例：[{key: 'menu1', text: '拍照',disabled: true}, {key: 'menu2', text: '从相册选择',color:'red'}]，
如果 key 带有.noop 表明这是纯文本(HTML)展示，
不会触发事件，用于展示描述或者提醒。

Events