cpdm_pc/src/components/CpdmTip.vue

<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const open = (val: any) => {
    type.value = val.type;
    message.value = val.message
    visible.value = true

    if (type.value == 2) {
        timeP.value = setTimeout(() => {
            //跳转到计划页面
            router.push({ name: 'plan' })
        }, 1000 * 120)
        // 1000 * 120
    }
}

//定时器方法
const timeP = ref<any>()
//

defineExpose({ open })
const visible = ref<boolean>(false)
const message = ref<string>('')
const type = ref<number>(1)
const closeFun = () => {
    visible.value = false
    if (type.value == 2) {
        clearTimeout(timeP.value);
    }

}
onMounted(() => {

})
onUnmounted(() => {
    console.log('----------------------')
    clearTimeout(timeP.value)
})

</script>
<template>
    <div>
        <el-dialog v-model="visible" width="500" style="border-radius: 40px;" class="dig_kg"
            :close-on-click-modal="false">
            <template #header="{ close, titleId, titleClass }">
                <div class="my-header" style="text-align: center;">
                    <div class="exit_login_title">温馨提示</div>
                    <div class="exit_login_info">{{ message }}</div>
                    <div class="start_button_out">
                        <div class="start_button_self" @click="closeFun">
                            确定
                        </div>
                    </div>

                </div>
            </template>
        </el-dialog>
    </div>


</template>
<style lang="scss" scoped>
.exit_login_title {
    text-align: center;
    color: #222222;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 3px;
}

.exit_login_info {
    text-align: center;
    letter-spacing: 3px;
    font-size: 18px;
    margin-top: 20px;
}

.start_button_out {
    margin-top: 40px;
    // margin-bottom: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;

    .start_button_self {
        cursor: pointer;
        // width: 100px;
        border-radius: 4px;
        // border: 1px solid #48D68E;
        color: #ffffff;
        background-color: #333333;
        // margin-right: 20px;
        padding: 5px 50px;
        cursor: pointer;
        display: flex;
        align-items: center;
        background: url(../assets/zs/bottom_new.png) no-repeat;
        background-size: 100% 100%;

    }
}
</style>