93 lines
1.7 KiB
Vue
93 lines
1.7 KiB
Vue
<template>
|
|
<van-dialog
|
|
v-model:show="show"
|
|
class="dialog"
|
|
teleport="body"
|
|
:z-index="zIndex"
|
|
v-bind="$attrs"
|
|
>
|
|
<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>
|
|
</van-dialog>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, watch } from 'vue'
|
|
|
|
defineOptions({ inheritAttrs: false })
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
show?: boolean
|
|
timeOut?: number
|
|
text1?: string
|
|
text2?: string
|
|
text3?: string
|
|
zIndex?: number
|
|
}>(),
|
|
{
|
|
show: false,
|
|
timeOut: 3000,
|
|
zIndex: 5300,
|
|
}
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:show', value: boolean): void
|
|
}>()
|
|
|
|
const show = computed({
|
|
get: () => props.show,
|
|
set: (value: boolean) => emit('update:show', value),
|
|
})
|
|
|
|
watch(
|
|
() => props.show,
|
|
(value) => {
|
|
if (value && props.timeOut !== -1) {
|
|
setTimeout(() => {
|
|
emit('update:show', 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;
|
|
}
|
|
|
|
.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>
|