first

components/my-components/my-action-sheet.vue

@@ -0,0 +1,107 @@
+<template>
+	<view class="action-sheet" @tap="close" v-if="show">
+		<view class="box">
+			<slot name="title">
+			</slot>
+			<view class="item" @tap.stop="itemClick(index)" v-for="(item,index) in props.list" :key="index">
+				<button class="bg-fff btn" hover-class="btn-hover-class" :class="{'color-main':active==index}">{{item}}</button>
+			</view>
+			<view class="bock-gary"></view>
+			<view class="cancel-btn" @tap="close">
+				<button>取消</button>
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+	const props=defineProps({
+		//那个按钮文字高亮
+		active:{
+			type:Number,
+			default:-1
+		},
+		autoClose:{
+			type:Boolean,
+			default:true
+		},
+		title:{
+			type:String,
+			default:''
+		},
+		list:{
+			type:Array,
+			default:['编辑','删除']
+		},
+		show:{
+			type:Boolean,
+			default:false
+		}
+	})
+	const emits=defineEmits(['itemClick','close'])
+	let show=ref(false)
+	function open(){
+		show.value=true
+	}
+	function close(){
+		show.value=false
+		emits('close')
+	}
+	function itemClick(index){
+		if(props.autoClose){
+			close()
+		}
+		emits('itemClick',index)
+	}
+	defineExpose({
+		open,close
+	})
+</script>
+
+<style lang="scss">
+	$bg:rgb(240, 240, 240);
+	.action-sheet{
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		top: 0;
+		background-color: rgba(51,51,51,.5);
+		z-index: 999;
+		.box{
+			position: absolute;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			border-radius: 20rpx 20rpx 0rpx 0rpx;
+			overflow: hidden;
+			background-color: #fff;
+			/* #ifndef H5 */
+			padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
+			 padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+			/* #endif */
+		
+			.item{
+				text-align: center;
+				font-size: 32rpx;
+				border-bottom: 1px solid $bg;
+				.btn{
+					border-radius: 0;
+				}
+			}
+		}
+	}
+	.bock-gary{
+		background-color: $bg;
+		height: 20rpx;
+	}
+	.cancel-btn{
+		text-align: center;
+		font-size: 32rpx;
+	}
+	.btn-hover-class{
+		background-color: rgb(222, 222, 222);
+	}
+</style>