这种场景你可能需要把模态框包装成插件。vue插件开发和组件的区别 - 水秋玄​im.mkinit.com

vue插件和组件的区别

使用插件的方式包装组件和直接注册全局组件其实是一样的，都是注册组件。不同的是，一般组件我们是作为页面的某一块结构，按需引用，但是有些应用场景你可能会用到也可能用不到，总之就是你不知道什么时候会用到，总不能在每个页面都引用吧。再一个，控制组件需要传递props，也就是说每次引用都需要写方法才能达到控制的目的。

所以一般组件就不适合轻提示、加载动画、模态框这种随时需要的功能，所以需要把组件包装成插件，直接添加到页面上(一般是插入到body)，再通过在vue的原型上添加全局功能，使用自定义的方法(api)来控制组件。

vue的组件就是组件，没有其他。但是插件不仅仅限于组件，它也可以包装过滤器、混入、自定义指令。这就是组件和插件的区别。

插件的开发(以轻提示为例子，同时也演示过滤器、混入、自定义指令)

不存在的目录自行创建

1、首先创建一个单文件组件(src/plugins/js2-vuepluginsdemo/js2-vuepluginsdemo.vue)

这就是一个普通的组件

export default {

name:'toast',

data(){

return {

show:false,

message:''

}

}

}

.fade-enter-active, .fade-leave-active {

transition: opacity .5s;

}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {

opacity: 0;

}

.toast{

position:fixed;

z-index:100;

left:50%;

top:50%;

transform: translate(-50%,-50%);

padding:1em 2em;

background-color:rgba(0,0,0,.9);

color:#FFF;

}

2、创建一个暴露install方法的模块(src/plugins/js2-vuepluginsdemo/js2-vuepluginsdemo.js)

这个插件包含了轻提示组件、混入、过滤、自定义指令这几个基本功能，都可以全局使用。

import toast_component from './js2-vuepluginsdemo.vue'

export default {

//插件需要暴露一个install方法作为回调函数，接收Vue和配置参数

install: (Vue, options) => { //options 是use时可以传递的参数

console.log(options)

/*

* 定义一个全局混入，混入到所有组件中

*/

Vue.mixin({

methods: {

sayhi() { //所有组件都拥有该方法

console.log(this, 'sayhi');

}

},

mounted() { //所有组件都会输出

this.sayhi()

}

})

/*

* toast 组件插件

*/

const component = Vue.extend(toast_component) //创建一个组件构造器

const toast = new component({

name:''

data: { //可通过构造时传参初始化数据

'js2': '我是通过构造器传递的参数'

}

}) //实例化组件

toast.$mount()//$mount 如果没有参数，模板将被渲染为文档之外的的元素，必须使用原生 DOM API 把它插入文档中。

document.body.appendChild(toast.$el)//手动插入到body

Vue.prototype.$toast = (msg, duration = 1500) => {//在Vue的原型上创建一个方法作为全局方法，操作的是组件中的data数据

toast.message = msg;

toast.show = true;

setTimeout(() => {

toast.show = false;

}, duration);

}

/*

* 定义一个全局指令

*/

Vue.directive('focus',{

inserted(ele){

ele.focus()

}

})

/*

* 定义一个全局过滤器

*/

Vue.filter('length',value=>{

return value.length

})

}

}

3、注册插件

在入口文件(main.js)中导入并注册插件：

import toast from './plugins/js2-vuepluginsdemo/js2-vuepluginsdemo.js'//导入插件

//import toast from 'js2-vuepluginsdemo'//通过npm下载的包这样引入

Vue.use(toast,{option:'我是通过use传入的参数'})//注册这个插件

4、在任何组件中都可以使用插件中的功能

在组件的mounted中调用提示：this.$toast('Welcome to Your Vue.js App',3000)

使用过滤：{{ msg | length }}

使用指令：