<template>
	<view>
		<u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet>
		<un-button @click="show = true">打开ActionSheet</un-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 success!
copy

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

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

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

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

<template>
	<view>
		<u-action-sheet :actions="list" @select="selectClick">
			<template #trigger>
				<un-input
					:value="selectedValue"
					placeholder="请选择"
					disabled-color="#fff"
					disabled
					clearable
				/>
			</template>
		</u-action-sheet>
	</view>
</template>

<script>
export default {
	data() {
		return {
			selectedValue: '',
			list: [
				{ name: '选项一' },
				{ name: '选项二' },
				{ name: '选项三', subname: '描述文本' }
			]
		};
	},
	methods: {
		selectClick(e) {
			this.selectedValue = e.name
			console.log('选择了:', e)
		}
	}
};
</script>
✅ Copy success!
copy

<template>
	<view>
		<u-action-sheet ref="actionSheetRef" :actions="list" @select="selectClick"></u-action-sheet>
		<un-button @click="openActionSheet">JavaScript方式打开</un-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{ name: '选项一' },
				{ name: '选项二' },
				{ name: '选项三', subname: '描述文本' }
			]
		};
	},
	methods: {
		openActionSheet() {
			this.$refs.actionSheetRef.open()
		},
		selectClick(e) {
			this.$refs.actionSheetRef.close()
			console.log('选择了:', e)
			uni.$u.toast(`已选择：${e.name}`)
		}
	}
};
</script>
✅ Copy success!
copy