ActionSheet

介绍

从屏幕下方移入的操作表。

引入

"usingComponents": {
	"m-action-sheet": "mind-ui-weapp/action-sheet/index"
}

示例

基础用法

动作面板通过 actions 属性来定义选项，actions 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象格式见文档 Api。

<m-action-sheet 
	visible="{{ visible }}" 
	actions="{{ actions }}" 
	bind:cancel="handleCancel" 
	bind:click="handleClickItem" 
/>

Page({
	data: {
		visible: false,
		actions: [
			{
				name: '选项1'
			},
			{
				name: '选项2',
				loading: true
			},
			{
				name: '选项3',
				icon: 'movie',
				color: '#409EFF'
			}
		]
	},

	// 打开 actoin-sheet 组件
	handleOpen() {
		this.setData({
			visible: true
		});
	},

	// 关闭 action-sheet 组件
	handleCancel() {
		this.setData({
			visible: false
		});
	},

	// 点击了选项
	handleClickItem({ detail }) {
		// 选项索引值
		const index = detail.index
	}
})

显示取消按钮

设置 show-cancel 属性后，会在底部展示取消按钮，点击后关闭当前面板并触发 cancel 事件。

<m-action-sheet
	show-cancel
	:visible="{{ visible }}"
	:actions="{{ actions }}"
	bind:cancel="handleCancel"
	bind:click="handleClickItem"
/>

自定义头部

<m-action-sheet 
	visible="{{ visible }}" 
	actions="{{ actions }}" 
	show-cancel 
	bind:cancel="handleCancel" 
	bind:click="handleClickItem" 
	mask-closable="{{ false }}"
>
  <view slot="header">
    <view>确定吗？</view>
    <text>删除后无法恢复哦</text>
  </view>
</m-action-sheet>

Page({
	data: {
		visible: false,
		actions: [
			{
				name: '删除',
				color: '#ed3f14'
			}
		]
	},

	handleOpen() {
		this.setData({
			visible: true
		});
	},

	handleCancel() {
		this.setData({
			visible: false
		});
	},

	// 点击删除项
	handleClickItem() {
		let action = [...this.data.actions]
		action[0].loading = true

		this.setData({
			actions: action
		})

		setTimeout(() => {
			action[0].loading = false
			this.setData({
				visible: false,
				actions: action
			});
		}, 2000)
	}
})

微信开放能力

<m-action-sheet 
	visible="{{ visible }}" 
	actions="{{ actions }}" 
	show-cancel 
	bind:cancel="handleCancel" 
	bind:click="handleClickItem"
/>

Page({
  data: {
    visible: false,
    actions: [
      {
        name: '获取用户手机号',
        openType: 'getPhoneNumber'
      }
    ]
  },

  getPhoneNumber({ detail }) {
    console.log(detail)
  },

  handleOpen() {
    this.setData({
      visible: true
    })
  },

  handleCancel() {
    this.setData({
      visible: false
    })
  }
})

Properties

参数	说明	类型	可选值	默认值
visible	是否显示	Boolean	—	false
mask-closable	是否允许点击遮罩层关闭	Boolean	—	true
actions	菜单选项	Array	—	—
show-cancle	是否显示取消按钮	Boolean	—	true
cancle-text	取消按钮内容	String	—	取消

Actions

参数	说明	类型	可选值	默认值
name	选项内容	String	—	—
color	选项颜色	String	—	—
icon	内置图标或图片地址	String	—	—
loading	加载状态	Boolean	—	false
disabled	是否禁用	Boolean	—	false
openType	微信开放能力	Function	—	—

ActionSheet slot

名称	说明
header	自定义标题栏

Event

方法名称	说明	返回值
bind:click	选项点击回调	actions 索引值 index
bind:cancle	取消点击回调	—