时间戳

首页 > 解决方案 > 如何使模态在打开一次后具有错误值

vue.js - 如何使模态在打开一次后具有错误值

问题描述

每当我加载我的组件时，我都会加载一个带有指令的模式，我希望它只发生一次。当用户按下 f5 时，我不想再显示此模式，除非他用按钮触发它。我该如何设置，我需要一个带有 localStorage 的计算函数吗？

零件 InstModal(:toggleModal="instructionModal" @ok="instructionModal = false")

设置

const instructionModal = ref(false)
setTimeout(() => (instructionModal.value = true), 2000)

标签： vue.jsvuejs3

解决方案

您需要 localStorage，以便您可以在不同的会话中保留它。你不需要计算来实现你想要的，tho。假设您想使用以下键将其存储在 localStorage 中instructionModalOpened：

const instructionModal = ref(+localStorage.getItem('instructionModalOpened') || false)
setTimeout(() => {
    instructionModal.value = true;
    localStorage.setItem('instructionModalOpened', '1') 
}, 2000);

但是，如果instructionModal可以在您的代码的其他地方发生突变，您最好观看它，即：

const instructionModal = ref(+localStorage.getItem('instructionModalOpened') || false)
setTimeout(() => {
    instructionModal.value = true;
}, 2000);

watch(instructionModal, (val) => {
    if (!val) return;
    localStorage.setItem('instructionModalOpened', '1') 
});

推荐阅读