Mind UI

# ActionSheet

# 介绍

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

# 引入

"usingComponents": {
	"m-action-sheet": "/dist/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: 'getUserInfo'
      }
    ]
  },

  getuserinfo({ 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

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

← HeaderBar 导航栏 →