vue はメソッドを呼び出すパブリック コンポーネントをカプセル化します

要件: プロジェクト内のすべてのプロンプト情報はポップアップ スタイルであり、 2 秒間表示されると
vue ページから自動的に消えます。

<template>
  <!-- 公用提示信息页面 -->
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    :show-close="false"
    top="40vh"
    width="30%"
  >
    <div class="content">
      <span>{
    
    {
    
     text }}</span>
    </div>
  </el-dialog>
</template>
<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      dialogVisible: true,
      text: ""
    };
  }
};
</script>
<style lang="less" scoped>
.content {
    
    
  font-size: 16px;
  color: #333;
  text-align: center;
  span {
    
    
    margin-left: 10px;
  }
}
/deep/ .el-dialog__header {
    
    
  padding: 0;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-weight: 600;
  background-color: #08519c;
}
/deep/ .el-dialog__title {
    
    
  color: #fff;
}
</style>

jsページ

// 公共提示信息js
import Vue from "vue";
import Toast from "./dialogMessage.vue"; //引入组件
// 返回一个“扩展实例构造器”
let ToastConstructor = Vue.extend(Toast);

let myToast = (text, duration) => {
    
    
  let toastDom = new ToastConstructor({
    
    
    el: document.createElement("div") //将toast组件挂载到新创建的div上
  });
  document.body.appendChild(toastDom.$el); //把toast组件的dom添加到body里

  toastDom.text = text;
  toastDom.duration = duration;

  // 在指定 duration 之后让 toast消失
  setTimeout(() => {
    
    
    toastDom.dialogVisible = false;
  }, toastDom.duration);

  // 调用时  this.$toast("新内容", 1000);
};
export default myToast;

main.js にグローバルに登録します

import toast from "./components/dialogMessage.js"; //引入toast函数
  //给Vue对象添加$toast方法
  Vue.prototype.$toast = toast;

メッセージを使用するのと同じようにページ内で使用されます

 this.$toast("新内容", 1000);

効果