如何显示弹出窗口

Question

vuejs提交表单成功或失败后如何显示弹窗

目前我只是在提交表单后显示警报消息。我需要用 css 显示弹出窗口。

          .then(function (response) {
                self.output = response.data;

               //console.log(self.output);
                  if(self.output){
              alert("succesfuly added ");
              }
            else{
              alert("failed added ")
            }
            })

Answer 1

使用弹出窗口的内容创建一个 div。 v-如果 div 并根据需要显示它。使用 css 设置 div 样式。

<div v-if="displayPopUp">
 <slot />
</div>

data() {
 return {
  displayPopUp = false
 }
}

.then(()=>(this.displayPopUp = true))

弹出动作完成后改变displayPopUp的值。