模态框

Modal

实验题目

模态框

实验目的

掌握模板引用的使用

掌握过渡组件的使用

进一步熟悉侦听的使用

进一步熟悉组件的创建和使用

进一步熟悉组件的样式

实验内容

人机交互时，如前端校验、数据加载等时，给出相应的弹窗提示

静态模态框的使用 - 无参

动态模态框的使用 - 带参

为模态框添加过渡效果

需求分析

视口右上角显示

出现3秒后消失

根据不同的情况，显示不同的提示

出现和消失使用淡入淡出的过渡效果

可以手动关闭

参考效果和参考代码

第一阶段静态模态框

模态框组件 - 创建模态框组件 Tips.vue - 在视口右上角展示一条静态数据；利用属性 flag 控制模态框的显示和隐藏

<script setup>
const props = defineProps({ tips: String })
</script>

<template>
  <div class="tips" v-if="flag">hi, there.</div>
</template>

<style scoped>
.tips {
  position: fixed;
  top: 20px;
  right: 20px;
  color: #fff;
  padding: 4px 20px;
  font-size: 12px;
  color: #fff;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 99;
}
</style>

父组件 - 引入模态框组件

import Tips from './components/Tips.vue';

. 使用响应式数据 isOpenModal 控制其显示和隐藏：真，则显示，否则关闭

let isOpenModal = ref(false)

. 使用侦听

watch(isModalOpen, (newval, oldval) => {
    if (newval) {
        setTimeout(() => {
        isModalOpen.value = false
        }, 3000);
    }
})

. 使用延时

const OpenModal = () => {
  isOpenModal.value = true
  setTimeout(() => {
    isOpenModal.value = false;
  }, 3000);
}

. 使用鼠标单击事件 - 略

. 结构使用

<template>
  <Tips :flag="isOpenModal"></Tips>
  <button @click="OpenModal">click to open modal</button>
</template>

第二阶段传递参数

根据不同的情况传递不同的提示信息

模态框组件 - 增加一个属性 tips，取代静态文本；也可以增加一个普通属性，通过暴露接口 defineExpose 暴露出去给父组件使用

const props = defineProps({ tips: String, flag: Boolean })

<div class="tips" v-if="flag">{{ tips }}</div>

父组件 - 声明数据并传递；同时在打开方法中传递；方便起见，封装为函数 showTips

let tips = ref('')
const OpenModal = () => {
  showTips('msg here')
}

const showTips = (msg) => {
  isOpenModal.value = true;
  tips.value = msg;
  setTimeout(() => {
    isOpenModal.value = false;
  }, 3000);
}

<Tips :flag="isOpenModal" :tips="tips"></Tips>

第三阶段过渡模态框

使用过渡组件包裹模态框根元素并指定 name 为 modal-fade，添加淡入淡出过渡效果

过渡、延时等既可以在父组件中使用过，也可以在模态框组件使用；在哪里使用要结合每个组件的具体情况；如果其中一个组件也用到了类似的设计，那么就应该在该组件中使用，避免重复设计

  <transition name="modal-fade">
    //
  </transition>

.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: opacity 0.3s ease;
}

.modal-fade-enter-from,
.modal-fade-leave-to {
  opacity: 0;
}

第四阶段改进模态框

使用特定的字体图标，增加用户体验，如感叹号、警告等

手动关闭 - 增加关闭按钮，单击时，关闭模态框；关闭按钮定位在模态框右上角；通过 defineEmits 触发自定义事件实现

增加动态标题 title，如针对密码修改、图片上传等场景的提示

指定位置 position：水平垂直居中、左上角、右上角、底部居中、顶部居中等 - 略

其它设计

拓展与思考

手动关闭模态框

多次互不冲突的触发模态框依次显示

侦听仓库的加载