背景：在dialog 弹窗 组件 中 执行mounted钩子，将数据初始化，等取消关闭 弹窗 后，发现mounted钩子不执行 原因：在 vue 的生命周期 中 ，在页面初始化的时候mounted只会执行一次，关闭 弹窗 页面并没有销毁，所以不会再次执行 <select-experience-group :trialMoneyRecordID=trialMoneyRecordID :showExperienceGroup='showExperienceGroup' @closeCover="handleExperienceGroup"> </select-experience-group> 解决办法：就是隐藏dia

封装消息 提示框 1.使用场景2. 提示 组件 message . vue 3.滑动效果4. 通过方法的形式调用 1.使用场景 场景还是比较多的 例如常见的登录、做一些功能发送失败的ajax都可以用弹框 提示 2. 提示 组件 message . vue <template> <div class="xtx- message " :style="style[type]"> <!-- 上面绑定的是样式 --> <!-- 不同 提示 图标会变 --> import Vue from ' vue ' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue .use(ElementUI) 3. 在需要使用消息 提示 弹窗 的组件 中 ，使用`this.$ message `方法调用： ```javascript this.$ message ({ message : ' 提示 信息', type: 'success' 使用` Vue -SweetAlert2`： 1. 安装 Vue -SweetAlert2：`npm install vue -sweetalert2 --save` 2. 在 Vue 项目的入口文件`main.js` 中 引入 Vue -SweetAlert2： ```javascript import Vue from ' vue ' import Vue Sweetalert2 from ' vue -sweetalert2'; import 'sweetalert2/dist/sweetalert2.min.css'; Vue .use( Vue Sweetalert2); 3. 在需要使用消息 提示 弹窗 的组件 中 ，使用`this.$swal`方法调用： ```javascript this.$swal(' 提示 信息'); 以上两种方式都可以实现消息 提示 弹窗 的效果，你可以根据自己的需求选择其 中 一种。