MiniX自绘渲染跨平台框架

# ActionSheet 动作清单

请扫码查看示例

# 介绍

用于提供可以选择执行的任务列表。

# 引入

通过以下方式来引入组件

  1. 使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
  2. 在要使用该组件的页面中使用element标签引入该组件。

# 代码演示

# 基本用法

<element name="m-action-sheet" src="@/node_modules/mui-minix/src/action-sheet/index"></element>
<m-action-sheet active="{{active}}" actions="{{actions}}" @m-select="onChange" @m-footer-click="onClose" @m-close="onClose"></m-action-sheet>
1
2
export default {
  data(){
    return  {
      active: false,
      actions:[
        {
          text:'确定'
        },
        {
          text:'更多'
        }
      ]
    }
  },
  onSelect(e){
    const action = e.detail
    console.log(action)
  },
  onClose(){
    this.active = false
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 标题

通过设置 title 属性,可以控制显示的标题。

<element name="m-action-sheet" src="@/node_modules/mui-minix/src/action-sheet/index"></element>
<m-action-sheet title="场景详细设计" active="{{active}}" actions="{{actions}}" @m-select="onChange" @m-footer-click="onClose" @m-close="onClose"></m-action-sheet>
1
2
export default {
  data(){
    return  {
      active: false,
      actions:[
        {
          text:'确定'
        },
        {
          text:'更多'
        }
      ]
    }
  },
  onSelect(e){
    const action = e.detail
    console.log(action)
  },
  onClose(){
    this.active = false
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# Api

# Prop

字段 说明 类型 默认值 是否必须
active 是否显示 boolean false 是
border-top-left-radius 左上圆角半径 number 0 否
border-top-right-radius 右上圆角半径 number 0 否
background-color 背景颜色 string #ffffff 否
title 标题 string - 否
text 最底部按钮文本 string 取消 否
z-index z 轴排序 number 1030 否
close-on-click-overlay 点击背景是否自动关闭 boolean true 否
action 动作项 Action[] [] 是
title-style 修改title样式 String '' 否
item-style 修改动作项中item样式 String '' 否
default-btn-style 修改默认按钮样式 String '' 否

# Action

属性 说明
text 动作项显示的文本

# Events

名称 说明 回调参数
m-close 关闭时触发 -
m-select 选中选项时触发 e: Action
m-footer-click 底部按钮点击时触发 -