ActionSheet 操作菜单

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

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

基本使用

• 通过list设置需要显示的菜单，该值为一个数组，元素为对象，对象至少要提供text属性，另外可选的有fontSize(字体大小)，color(颜色)，disabled(是否禁用，1.5.6引入)， subText(描述信息，1.6.8引入)
• 通过v-model绑定一个值为布尔值的变量控制组件的弹出与收起，v-model的值是双向绑定的
• 通过 activeIndex.sync 和 activeColor，可以自定义激活颜色，activeIndex 默认是 null，activeColor默认是主题色。
• 通过customProps 可以配置当前组件新增一个可自定义编辑的选项。

注意

如果不需要显示激活项。不传activeIndex.sync即可。

<template>
	<view>
		<u-button @click="showAction">唤起ActionSheet</u-button>
		<u-action-sheet
			:theme="theme"
			:cancel-btn="cancel"
			:mask-close-able="maskClick"
			:tips="tips"
			@click="click"
			:list="list"
			empty-text="暂无数据"
			v-model="show"
			activeColor="#eedd44"
			:activeIndex.sync="activeIndex"
			:safe-area-inset-bottom="true"
			:customProps="customProps"
		>
		</u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				theme: 'normal',
				activeColor:'#eeff44',
				activeIndex: null,
				list: [{
					text: '最是人间留不住',
				}, {
					text: '朱颜辞镜花辞树',
					disabled: true
				}, {
					text: '正是江南好风景',
					subText: '春江水暖鸭先知'
				}, {
					text: '落花时节又逢君'
				}],
				tips: {
					text: ''
				},
				show: false,
				cancel: true,
				maskClick: true,
				emptyText: '暂无数据',
				customProps: {
					enable: true,
					length: 20,
					placeholder: '请输入'
				}
			}
		},
		methods: {
			showAction() {
				this.show = true;
			},
			click(index) {
				this.$refs.uToast.show({
					type: 'success',
					title: '点击了第' + (index + 1) + '项'
				})
			}
		}
	}
</script>

配置顶部的提示信息和底部取消按钮

• tips参数为一个对象类型，属性可以设置text，fontSize(字体大小)，color(颜色)，文本内容将会显示组件的上方，起提示作用。
• cancel-btn参数配置是否显示底部的取消按钮，默认显示

<template>
	<u-action-sheet :list="list" v-model="show" :tips="tips" :cancel-btn="true"></u-action-sheet>
</template>

<script>
	export default {
		data() {
			return {
				tips: {
					text: '在水一方',
					color: '#909399',
					fontSize: 24
				},
				list: [{
					text: '点赞',
					color: 'blue',
					fontSize: 28
				}],
				show: true
			}
		}
	}
</script>

如何知道点了第几项

click回调事件带有一个index值，这个索引值为传递的list数组的索引值，根据回调事件，能获得点击了 第几项和该项的内容

<template>
	<u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					text: '点赞',
					color: 'blue',
					fontSize: 28
				}, {
					text: '分享'
				}, {
					text: '评论'
				}],
				show: true
			}
		},
		methods: {
			click(index) {
				console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`)
			}
		}
	}
</script>

API

Props

注意：props中没有控制组件弹出与收起的参数，因为这是通过v-model绑定变量实现的，见上方说明。

参数	说明	类型	默认值	可选值
theme FPI	主题模式，普通模式normal，关怀模式care	String	normal	care
list	按钮的文字数组，见上方文档示例	Array<Object>	[ ]	-
tips	顶部的提示文字，见上方文档示例	Object	-	-
cancel-btn	是否显示底部的取消按钮	Boolean	true	false
cancelText	底部的取消按钮的文本	String	取消	-
border-radius	弹出部分顶部左右的圆角值，单位rpx	Number \ String	0	-
mask-close-able	点击遮罩是否可以关闭	Boolean	true	false
safe-area-inset-bottom	是否开启底部安全区适配	Boolean	false	true
z-index	z-index值	Number \ String	1075	-
cancel-text 1.3.0	取消按钮的提示文字	String	取消	-
activeIndex.sync FPI	激活的选项的下标	Number	null	-
activeColor FPI	自定义激活的选项的颜色	String	#3296FA	-
empty-text FPI	无数据的提示文字	String	暂无数据	-
get-container FPI	(仅限 H5 使用)指定挂载节点,可以传入 body,#app,.class	String	''	-
customProps FPI		Object	{enable: false,length: 20,placeholder: '请输入'}	{enable: true,length: 20,placeholder: '请输入自定义选项'}

Event

事件名	说明	回调参数	版本
click	点击ActionSheet列表项时触发	index: 点击了第几个，从0开始	-
close	点击取消按钮时触发	-	-