底部操作表

组件介绍

ux-action-sheet 组件类似 uni.showActionSheet，uni.showActionSheet 对操作项目有限制，使用 ux-action-sheet 组件可以更灵活实现底部操作列表功能。

组件图示

ux-action-sheet 组件属性

属性名称	类型	默认值	作用
width	Number	680	核心菜单区域宽度
height	Number	500	选项列表滚动区域高度
borderRadius	String	10rpx	核心菜单圆角尺寸
zIndex	Number	999	组件 z-index 值
title	String	''	组件标题
titleClass	Array	['ux-color-primary']	组件标题样式
items	Array	[]	选择列表数据
listClass	Array	['ux-primary-text', 'ux-border-b', 'ux-action-sheet-item']	选择列表项目样式
cancelBtnName	String	取消	取消按钮文本
isCancelBtn	Boolean	true	是否展示取消按钮
canCloseByShade	Boolean	false	点击遮罩层能否关闭组件
cancelBtnClasses	Array	['ux-text', 'ux-color-grey2', 'ux-text-center']	取消按钮样式

组件事件

@selected 选择项目后触发，携带数据 : 选中项目索引；
@open 打开组件时触发；
@close 关闭组件时触发；
@cancel 点击取消按钮时触发；

演示代码

<template>
	<scroll-view class="ux-body ux-page-color ux-flex1">
		<text class="ux-h6 ux-color-grey ux-mt">底部操作表</text>
		<view 
		class="ux-bg-white ux-mt">
			<view 
			class="ux-list-items" 
			@tap="open1">
				<view 
				class="ux-list-body ux-border-b" 
				hover-class="ux-tap">
					<view 
					class="ux-list-title">
						<text 
						class="ux-list-title-text ux-list-one-line ux-primary-text">点击这里打开操作列表</text>
					</view>
				</view>
				<text 
				class="ux-list-arrow-right ux-icons ux-color-grey">{{"\ue601"}}</text>
			</view>
		</view>
		
		<!-- 组件 -->
		<ux-action-sheet 
		ref="uxactionsheet" 
		@selected="selected" 
		title="请选择您的班级" 
		:items="actionSheetItems">
		</ux-action-sheet>
	</scroll-view>
</template>
<script>
export default {
	data() {
		return {
			ref1 : null as UxActionSheetComponentPublicInstance | null,
			actionSheetItems : [
				'一年一班','一年二班','一年三班',
				'一年四班','一年五班','一年六班'
			] as string[]
		}
	},
	mounted:function(){
		this.ref1 = this.$refs['uxactionsheet'] as UxActionSheetComponentPublicInstance;
		this.ref1?.$callMethod("open");
	},
	methods: {
		open1  : function () {
			this.ref1?.$callMethod("open");
		},
		close1 : function () {
			this.ref1?.$callMethod("close");
		},
		selected : function(idx:number){
			console.log(idx);
			console.log(this.actionSheetItems[idx]);
			this.ref1?.$callMethod("close");
		}
	}
}
</script>
<style scoped>
.modal-btns{line-height:88rpx; font-size:26rpx; text-align:center; width:200rpx;}
</style>