108 lines
2.0 KiB
Vue
108 lines
2.0 KiB
Vue
<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" :style="{color:index==0?'red':''}" :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> |