vue全局提示插件怎么开发
这篇文章主要讲解了“vue全局提示插件怎么开发”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue全局提示插件怎么开发”吧!
为奉化等地区用户提供了全套网页设计制作服务,及奉化网站建设行业解决方案。主营业务为网站设计制作、做网站、奉化网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
插件
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:1.添加全局方法或者 property。2.添加全局资源:指令/过滤器/过渡等。3.通过全局混入来添加一些组件选项。4.添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。5.一个库,提供自己的 API,同时提供上面提到的一个或多个功能。
vue插件的编写方法一般分为以上5类,其注册与绑定机制如下:
export default { install(Vue, options) { Vue.myGlobalMethod = function () { // 1. 添加全局方法或属性,如: vue-custom-element // 逻辑... } Vue.directive('my-directive', { // 2. 添加全局资源:指令/过滤器/过渡等,如 vue-touch bind (el, binding, vnode, oldVnode) { // 逻辑... } ... }) Vue.mixin({ created: function () { // 3. 通过全局 mixin方法添加一些组件选项,如: vuex // 逻辑... } ... }) Vue.prototype.$myMethod = function (options) { // 4. 添加实例方法,通过把它们添加到 Vue.prototype 上实现 // 逻辑... } } }
上方代码使用了es6部分语法列出了4种编写插件的方法,而install是注册插件主要调用的方法,包含了两个参数(Vue实例和自定义配置属性options)
开发插件
我们这里主要使用的是第四种方法,将我们的插件函数注册到Vue.prototype实例上面
首先我们在plugin里创建个toast文件夹用来放置插件,里面包含两个文件,toast.vue和toast.js,
然后在编写我们的样式结构文件toast.vue
这里我们使用了一个visible变量来控制提示框的显示,message为提示的消息
{{message}}
接着在toast.js里面编写插件的方法与处理函数
import ToastComponent from './toast.vue' //引入toast.vue组件export default { // 导出一个对象,里面包含vue注册插件所调用的方法install install: function (Vue) { const ToastConstructor = Vue.extend(ToastComponent) // 将toast.vue组件生成为Vue的子类 const instance = new ToastConstructor(); // 生成一个该子类的实例 instance.$mount(document.createElement('div')) // 将这个实例挂载在新创建的div上,并加入到body中 document.body.appendChild(instance.$el) // 通过Vue的原型注册一个方法$toast,有两个参数(msg为提示的文字,duration为延时关闭) Vue.prototype.$toast = (msg, duration = 1500) => { if (instance.visible) return; // visible是toast.vue组件的一个变量,用来控制提示框的显示 instance.message = msg; instance.visible = true; setTimeout(() => { // 默认延时1.5s关闭提示框 instance.visible = false; }, duration); } }}
这样我们就完成了组件的封装,是不是很简单
使用插件
现在把我们封装好的插件引入到main.js中
import toast from './plugin/toast' Vue.use(toast);
然后我们就可以在组件中使用它了
this.$toast('提示文字')
我们现在把toast.vue添加上样式和过度效果,让它看起来更加的友好,以下是toast.vue文件的全部内容
{{message}}
感谢各位的阅读,以上就是“vue全局提示插件怎么开发”的内容了,经过本文的学习后,相信大家对vue全局提示插件怎么开发这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
文章题目:vue全局提示插件怎么开发
文章转载:http://ybzwz.com/article/johdsh.html