Vue之简易弹窗组件

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

**组件模板**  
Notice.vue

<template>
      <div class="box" v-if="isShow">
        <h3>{ { title}}</h3>
        <p class="box-content">{ { message}}</p>
      </div>
    </template>
    
    <script>
    export default { 
      props: { 
        title: { 
          type: String,
          default: ""
        },
        message: { 
          type: String,
          default: ""
        },
        duration: { 
          type: Number,
          default: 1000
        }
      },
      data() { 
        return { 
          isShow: false
        };
      },
      methods: { 
        show() { 
          this.isShow = true;
          setTimeout(this.hide, this.duration);
        },
        hide() { 
          this.isShow = false;
          this.remove();
        }
      }
    };
    </script>
    
    <style>
    .box { 
      position: fixed;
      width: 100%;
      top: 16px;
      left: 0;
      text-align: center;
      pointer-events: none;
      background-color: #fff;
      border: grey 3px solid;
      box-sizing: border-box;
    }
    .box-content { 
      width: 200px;
      margin: 10px auto;
      font-size: 14px;  
      padding: 8px 16px;
      background: #fff;
      border-radius: 3px;
      margin-bottom: 8px;
    }
    </style>

**创建组件实例**  
create.js

import Vue from "vue";
    // 传递一个组件配置，返回一个组件实例，并且挂载它到body上
    function create(Component, props) { 
      // 组件实例创建
      const Ctor = Vue.extend(Component);
      const comp = new Ctor({ propsData: props})
      comp.$mount()
      // dom追加
      document.body.appendChild(comp.$el)
      // 获取组件实例
      comp.remove = () => { 
        document.body.removeChild(comp.$el)
        comp.$destroy()
      }
      return comp
    }
    export default create;

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

import Notice from "../components/Notice.vue"
    import create from "../utils/create"
    export default { 
        install(Vue){ 
            Vue.prototype.$notice = function(options){ 
                create(Notice,options).show();
            }
        }
    }

**main.js引入使用**

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

**组件内调用**

this.$notice({ 
      title: "请求成功",
      message: "成功",
      duration: 3000,
    })

**效果展示**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/8667eda92e2f454895ad72333a34e694.png