Vue之简易弹窗组件

古城微笑少年丶 2022-12-03 09:14 301阅读 0赞

组件模板
Notice.vue

  1. <template>
  2.   <div class="box" v-if="isShow">
  3.     <h3>{ { title}}</h3>
  4.     <p class="box-content">{ { message}}</p>
  5.   </div>
  6. </template>
  8. <script>
  9. export default { 
  10.   props: { 
  11.     title: { 
  12.       type: String,
  13.       default: ""
  14.     },
  15.     message: { 
  16.       type: String,
  17.       default: ""
  18.     },
  19.     duration: { 
  20.       type: Number,
  21.       default: 1000
  22.     }
  23.   },
  24.   data() { 
  25.     return { 
  26.       isShow: false
  27.     };
  28.   },
  29.   methods: { 
  30.     show() { 
  31.       this.isShow = true;
  32.       setTimeout(this.hide, this.duration);
  33.     },
  34.     hide() { 
  35.       this.isShow = false;
  36.       this.remove();
  37.     }
  38.   }
  39. };
  40. </script>
  42. <style>
  43. .box { 
  44.   position: fixed;
  45.   width: 100%;
  46.   top: 16px;
  47.   left: 0;
  48.   text-align: center;
  49.   pointer-events: none;
  50.   background-color: #fff;
  51.   border: grey 3px solid;
  52.   box-sizing: border-box;
  53. }
  54. .box-content { 
  55.   width: 200px;
  56.   margin: 10px auto;
  57.   font-size: 14px;  
  58.   padding: 8px 16px;
  59.   background: #fff;
  60.   border-radius: 3px;
  61.   margin-bottom: 8px;
  62. }
  63. </style>

创建组件实例
create.js

  1. import Vue from "vue";
  2. // 传递一个组件配置，返回一个组件实例，并且挂载它到body上
  3. function create(Component, props) { 
  4.   // 组件实例创建
  5.   const Ctor = Vue.extend(Component);
  6.   const comp = new Ctor({ propsData: props})
  7.   comp.$mount()
  8.   // dom追加
  9.   document.body.appendChild(comp.$el)
  10.   // 获取组件实例
  11.   comp.remove = () => { 
  12.     document.body.removeChild(comp.$el)
  13.     comp.$destroy()
  14.   }
  15.   return comp
  16. }
  17. export default create;

编写插件，挂载到vue原型上，便于全局调用
notice.js

  1. import Notice from "../components/Notice.vue"
  2. import create from "../utils/create"
  3. export default { 
  4.     install(Vue){ 
  5.         Vue.prototype.$notice = function(options){ 
  6.             create(Notice,options).show();
  7.         }
  8.     }
  9. }

main.js引入使用

  1. import notice from './plugins/notice.js'
  2. Vue.use(notice)

组件内调用

  1. this.$notice({ 
  2.   title: "请求成功",
  3.   message: "成功",
  4.   duration: 3000,
  5. })

效果展示
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，301人围观）

还没有评论，来说两句吧...

相关阅读