文中默认对vue/cli曾经了解。 写该文章是版本为4.x
实现弹窗组件
在components文件中 新建一个notice文件夹 cd notice
新建一个Notice.vue
<template> <div class="notice" v-if="isShow"> <h4>{{title}}</h4> <p>{{content}}</p> </div></template><script> export default { name: 'Notice', props: { title: { type: String, default: '' }, content: { type: String, default: '' }, duration: { type: Number, default: 2000 // 默认2秒后隐没 } }, data () { return { isShow: false, } }, methods: { hide() { this.isShow = false; this.remove(); // 组件销毁 } }, mounted () { this.isShow = true; setTimeout( this.hide,this.duration) } }</script><style lang="scss" scoped>.notice { width: 200px; border: 1px solid #333; padding: 10px; position: absolute; right: 0;}</style>新建一个index.js文件 次要是组件实例的创立性能
import Vue from 'vue'import Notice from './Notice.vue'const NoticeController = Vue.extend(Notice)function notice(options) { const nc = new NoticeController({ propsData: options // propsData 用于值得传递 }); nc.$mount(); // 挂载 document.body.appendChild(nc.$el); // 插入body当中 nc.remove = function () { // 该办法用于销毁实例 document.body.removeChild(nc.$el); nc.$destroy() } console.log(nc); return nc;}export default notice次要性能根本都实现
抉择就是用于页面的实现的成果了
第一步 把组件实例注册全局中 main.js
import notice from './components/notice/index'Vue.prototype.$notice = notice第二步，创立一个用于实现弹窗的按钮 组件 XButton.vue
<template> <div> <button @click="click">告诉信息按钮</button> </div></template><script> export default { methods: { click() { this.$emit('click') } }, }</script>第三步，把这个按钮组件挂载某个页面上 比如说： home.vue
<template> <div class="home"> <x-button @click="open"></x-button> </div></template><script>// @ is an alias to /srcimport XButton from '@/components/XButton.vue'export default { name: 'Home', components: { XButton }, methods: { open() { this.$notice({ title: 'xuwen', content: '123' }) } },}</script>整一个弹窗的组件实现了，该弹窗组件是以element ui 中的弹窗组件 为原型实现的