172 lines
3.3 KiB
Vue
172 lines
3.3 KiB
Vue
<template>
|
|
<uv-popup
|
|
ref="popup"
|
|
:customStyle="props.customStyle"
|
|
:closeOnClickOverlay="props.closeOnClickOverlay"
|
|
@maskClick="maskClick"
|
|
:mode="props.mode"
|
|
:bgColor='props.bgColor'
|
|
:closeable="props.closeable"
|
|
@change="handleChange"
|
|
:safeAreaInsetBottom="false"
|
|
>
|
|
<slot></slot>
|
|
</uv-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref,watch,computed, nextTick } from 'vue';
|
|
const popup = ref();
|
|
// 接收 v-model
|
|
const props = defineProps({
|
|
modelValue:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
closeOnClickOverlay:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
mode:{
|
|
type:String,
|
|
default:'center'
|
|
},
|
|
customStyle:{
|
|
type:String,
|
|
default:'width: 90%; height: auto; padding:20rpx 0; border-radius: 32rpx;'
|
|
},
|
|
bgColor:{
|
|
type:String,
|
|
default:'#FFFFFF'
|
|
},
|
|
closeable:{
|
|
type:Boolean,
|
|
default:false
|
|
}
|
|
});
|
|
const handleChange = (e) => {
|
|
emit('update:modelValue', e.show);
|
|
}
|
|
const maskClick = () => {
|
|
modelValue.value = false;
|
|
}
|
|
const emit = defineEmits(['close', 'confirm', 'update:modelValue']);
|
|
const modelValue = computed({
|
|
get() {
|
|
return props.modelValue;
|
|
},
|
|
set(value) {
|
|
emit('update:modelValue', value);
|
|
if(value){
|
|
popup.value.open()
|
|
}else{
|
|
popup.value.close()
|
|
}
|
|
}
|
|
})
|
|
watch(() => modelValue.value, (val) => {
|
|
// 组件没出来之前
|
|
if(!popup.value){
|
|
nextTick(()=>{
|
|
val?popup.value?.open():popup.value?.close();
|
|
})
|
|
}else{
|
|
val?popup.value?.open():popup.value?.close();
|
|
}
|
|
},{
|
|
immediate:true
|
|
});
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.modal-container {
|
|
// height: 700rpx;
|
|
// background: #000;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
|
|
.modal-title {
|
|
width: 486rpx;
|
|
height: 42rpx;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #000000;
|
|
position: relative;
|
|
// display: inline-block;
|
|
z-index: 1;
|
|
&::before{
|
|
position: absolute;
|
|
content: ' ';
|
|
width: 100%;
|
|
height: 14rpx;
|
|
background-color: var(--main-color);
|
|
border-radius: 100px;
|
|
display: block;
|
|
bottom: 0;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
.modal-text {
|
|
width: 486rpx;
|
|
margin-top: 38rpx;
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
line-height: 32rpx;
|
|
}
|
|
.upload {
|
|
margin-top: 30rpx;
|
|
height: 250rpx;
|
|
width: 100%;
|
|
// background: #000;
|
|
display: flex;
|
|
justify-content: center;
|
|
// overflow-x: scroll;
|
|
overflow-y: scroll;
|
|
// white-space: nowrap;
|
|
flex-wrap:nowrap;
|
|
// overflow: hidden;
|
|
}
|
|
.modal-button {
|
|
margin-top: 80rpx;
|
|
width: 527.22rpx;
|
|
height: 72rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
& > .modal-button-1 {
|
|
width: 260rpx;
|
|
height: 72rpx;
|
|
background: #F4F3F3;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
border-radius: 14rpx;
|
|
&:active {
|
|
background: #888;
|
|
}
|
|
}
|
|
& > .modal-button-2 {
|
|
width: 260rpx;
|
|
height: 72rpx;
|
|
background: var(--main-color);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
color: #FBFBFB;
|
|
border-radius: 14rpx;
|
|
&:active {
|
|
background: #888;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |