Vue之简易弹窗组件

组件模板 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, })

效果展示