105 lines
2.8 KiB
Vue
105 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<!-- <div v-if="modelValue">-->
|
||
|
|
<van-dialog class="dialog">
|
||
|
|
<div class="my-4">
|
||
|
|
<div class="w-full flex justify-center">
|
||
|
|
<slot name="img">{{ text2 }}</slot>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="w-full flex justify-center text-[18px] font-semibold">
|
||
|
|
<slot name="title">{{ text1 }}</slot>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-2 border-t border-solid border-[#E5E7EB] pt-4 mx-2 mt-6 font-semibold text-[15px]">
|
||
|
|
<slot name="button">{{ text3 }}</slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- <div class="w-full mt-6 text-white ">-->
|
||
|
|
<!-- <div class="w-full flex mb-[10px] ">-->
|
||
|
|
|
||
|
|
<!-- <span class="text-lg flex-1">-->
|
||
|
|
|
||
|
|
<!-- </span>-->
|
||
|
|
<!-- </div>-->
|
||
|
|
<!-- <div class="flex justify-start mb-6 mt-8" style="font-weight:700;">-->
|
||
|
|
<!-- <slot name="button">{{text2}}</slot>-->
|
||
|
|
<!-- </div>-->
|
||
|
|
<!-- </div>-->
|
||
|
|
</van-dialog>
|
||
|
|
<!-- <van-dialog style="background-color: #2b3f6e" show-cancel-button cancelButtonText="بیخیال" confirmButtonText="بله" cancelButtonColor="">-->
|
||
|
|
<!-- <div class="w-full mt-6 text-white ">-->
|
||
|
|
<!-- <div class="w-full flex mb-[10px] ">-->
|
||
|
|
<!-- <Icon icon="vuesax-linear:info-circle" class="mx-4" size="25"/>-->
|
||
|
|
<!-- <span class="text-lg flex-1">-->
|
||
|
|
<!-- <slot name="title">{{text1}}</slot>-->
|
||
|
|
<!-- </span>-->
|
||
|
|
<!-- </div>-->
|
||
|
|
<!-- <div class="flex justify-start mb-6 mt-8" style="font-weight:700;">-->
|
||
|
|
<!-- <slot name="button">{{text2}}</slot>-->
|
||
|
|
<!-- </div>-->
|
||
|
|
<!-- </div>-->
|
||
|
|
<!-- </van-dialog>-->
|
||
|
|
<!-- </div>-->
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
|
||
|
|
// import { Dialog as VanDialog} from "vant";
|
||
|
|
import {ref, watch} from 'vue';
|
||
|
|
|
||
|
|
const show = ref(true);
|
||
|
|
const props = withDefaults(defineProps<{
|
||
|
|
// modelValue: boolean,
|
||
|
|
timeOut: number,
|
||
|
|
text1?: string,
|
||
|
|
text2?: string,
|
||
|
|
text3?: string
|
||
|
|
// top?: string,
|
||
|
|
|
||
|
|
}>(), {})
|
||
|
|
const emit = defineEmits<{
|
||
|
|
(e: 'update:modelValue', value: boolean): void
|
||
|
|
}>()
|
||
|
|
watch(() => props.modelValue, (value) => {
|
||
|
|
if (props.timeOut !== -1) showNotify()
|
||
|
|
})
|
||
|
|
const showNotify = () => {
|
||
|
|
console.log('notify', show.value)
|
||
|
|
setTimeout(() => {
|
||
|
|
emit('update:modelValue', false)
|
||
|
|
}, props.timeOut);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less">
|
||
|
|
.notify-enter-active {
|
||
|
|
animation: notify-in 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.notify-leave-active {
|
||
|
|
animation: notify-in 0.2s reverse;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dialog .van-dialog__confirm, .van-dialog__cancel {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.van-dialog__confirm, .van-dialog__cancel {
|
||
|
|
//background-color: ;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dialog .van-dialog__confirm .van-button__text {
|
||
|
|
color: #1C2D56;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dialog .van-dialog__cancel .van-button__text {
|
||
|
|
color: #6b7280;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
</style>
|