uView ActionSheet 操作菜单

本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。
本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。

#平台差异说明

#基本使用

• 通过title(设置标题)，cancelText(取消按钮的文字，不为空时显示按钮)，description(选项上方的描述信息)
• 通过actions设置需要显示的菜单，该值为一个数组，元素为对象，对象至少要提供name属性，另外可选的有subname(描述)，disabled(是否禁用)，loading(加载动画)，?color(字体颜色)，fontSize(字体大小)，
• 通过show绑定一个值为布尔值的变量控制组件的弹出与收起，show的值是双向绑定的

<template>
	<view>
		<u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet>
		<u-button @click="show = true">打开ActionSheet</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title:'标题',
			list: [
				{
					name:'选项一',
					subname:"选项一描述",
					color:'#ffaa7f',
					fontSize:'20'
				},
				{
					name: '选项二禁用',
					disabled:true
				},
				{
					name: '开启load加载', //开启后文字不显示
					loading:true
				}
			],
			show: false
		};
	}
};
</script>

copy

#配置点击遮罩关闭和点击某个菜单项时关闭弹窗

• 通过closeOnClickAction参数来配置点击某个菜单项时是否关闭弹窗。
• 通过closeOnClickOverlay参数配置点击遮罩是否允许关闭（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调）

<template>
	<view>
		<u-action-sheet :actions="list" :closeOnClickOverlay="true" :closeOnClickAction="true"  :title="title" :show="show"></u-action-sheet>
		<u-button @click="show = true">打开ActionSheet</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title:'标题',
			list: [
				{
					name:'选项一'
				},
				{
					name: '选项二'
				}
			],
			show: false
		};
	},
	onLoad() {},
	methods: {
	}
};
</script>

copy

#点击获取所点击选项name

select回调事件带有一个object值，这个索引值为传递的select数组的name值，根据回调事件，能获得点击了 该项的内容

<template>
	<view>
		<u-action-sheet :actions="list" @select="selectClick" :title="title" :show="show"></u-action-sheet>
		<u-button @click="show = true">打开ActionSheet</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title:'标题',
			list: [
				{
					name:'选项一'
				},
				{
					name: '选项二'
				}
			],
			show: false
		};
	},
	onLoad() {},
	methods: {
		selectClick(index){
			console.log(index)
		}
	}
};
</script>