fs-uni-template/components/fs-action/fs-action.vue

<template>
	<fs-popup direction="bottom" height="auto" v-model="visible" :showMask="showMask" :maskClickable="maskClickable">
		<view class="fs-action">
			<view class="fs-action-item" v-for="(item, index) in list" :key="index" @click="handleAction(item)">
				{{ item.name }}
			</view>
			<view class="fs-action-extra"><slot></slot></view>
			<view class="fs-action-cancel" v-if="showCancel" @click="cancel">{{ cancelText }}</view>
		</view>
	</fs-popup>
</template>

<script>
/**
 * 动作组件
 * @description 动作组件
 * @property {Array} list action列表
 * @property {Boolean} showMask 是否展示遮罩
 * @property {Boolean} maskClickable 遮罩是否可点击
 * @property {Boolean} showCancel 是否展示取消action
 * @property {String} cancelText “取消”文字
 * @event {Function} change change事件
 * @example <fs-action :list="list" v-model="show" @change="change"></fs-action>
 */
export default {
	name: 'fs-action'
}
</script>

<script setup>
import { computed } from 'vue'

const props = defineProps({
	list: Array,
	modelValue: Boolean,
	showMask: {
		type: Boolean,
		default: true
	},
	maskClickable: {
		type: Boolean,
		default: true
	},
	cancelText: {
		type: String,
		default: '取消'
	},
	showCancel: {
		type: Boolean,
		default: true
	}
})
const emits = defineEmits(['update:modelValue', 'change'])

const visible = computed({
	get: () => props.modelValue,
	set: value => emits('update:modelValue', value)
})

const cancel = () => {
	emits('update:modelValue', false)
}
const handleAction = item => {
	emits('change', item)
	cancel()
}
</script>

<style lang="scss" scoped>
.fs-action {
	background-color: #f8f8f8;

	&-item {
		padding: 20rpx;
		text-align: center;
		background-color: #fff;

		& + & {
			border-top: 1px solid var(--border-color);
		}
	}

	&-cancel {
		padding: 20rpx;
		text-align: center;
		background-color: #fff;
		margin-top: 10rpx;
	}
}
</style>