frontend/examking-app/plugins/uview-ui/components/u-action-sheet/u-action-sheet.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
	<u-popup mode="bottom" :border-radius="borderRadius" :popup="false" v-model="value" :maskCloseAble="maskCloseAble"
	    length="auto" :safeAreaInsetBottom="safeAreaInsetBottom" @close="popupClose" :z-index="uZIndex">
		<view class="u-tips u-border-bottom" v-if="tips.text" :style="[tipsStyle]">
			{{tips.text}}
		</view>
		<block v-for="(item, index) in list" :key="index">
			<view 
				@touchmove.stop.prevent 
				@tap="itemClick(index)" 
				:style="[itemStyle(index)]" 
				class="u-action-sheet-item u-line-1" 
				:class="[index < list.length - 1 ? 'u-border-bottom' : '']"
				:hover-stay-time="150"
			>
				<text>{{item.text}}</text>
				<text class="u-action-sheet-item__subtext u-line-1" v-if="item.subText">{{item.subText}}</text>
			</view>
		</block>
		<view class="u-gab" v-if="cancelBtn">
		</view>
		<view @touchmove.stop.prevent class="u-actionsheet-cancel u-action-sheet-item" hover-class="u-hover-class"
		    :hover-stay-time="150" v-if="cancelBtn" @tap="close">{{cancelText}}</view>
	</u-popup>
</template>

<script>
	/**
	 * actionSheet 操作菜单
	 * @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
	 * @tutorial https://www.uviewui.com/components/actionSheet.html
	 * @property {Array<Object>} list 按钮的文字数组，见官方文档示例
	 * @property {Object} tips 顶部的提示文字，见官方文档示例
	 * @property {String} cancel-text 取消按钮的提示文字
	 * @property {Boolean} cancel-btn 是否显示底部的取消按钮（默认true）
	 * @property {Number String} border-radius 弹出部分顶部左右的圆角值，单位rpx（默认0）
	 * @property {Boolean} mask-close-able 点击遮罩是否可以关闭（默认true）
	 * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
	 * @property {Number String} z-index z-index值（默认1075）
	 * @property {String} cancel-text 取消按钮的提示文字
	 * @event {Function} click 点击ActionSheet列表项时触发
	 * @event {Function} close 点击取消按钮时触发
	 * @example <u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
	 */
	export default {
		name: "u-action-sheet",
		props: {
			// 点击遮罩是否可以关闭actionsheet
			maskCloseAble: {
				type: Boolean,
				default: true
			},
			// 按钮的文字数组，可以自定义颜色和字体大小，字体单位为rpx
			list: {
				type: Array,
				default () {
					// 如下
					// return [{
					// 	text: '确定',
					// 	color: '',