本篇内容介绍了“vue全局提示插件开发toast怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
插件
插件通常用来为 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为提示的消息
<template>
<div v-if="visible">
<div>{{message}}</div>
</div>
</template>
<script>
export default {
data() {
return {
visible: false,
message: ""
};
}
};
</script>
接着在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文件的全部内容
<template>
<!-- 全局提示框 -->
<transition name="slide-fade">
<div v-if="visible">
<div>{{message}}</div>
</div>
</transition>
</template>
<script>
export default {
data() {
return {
visible: false,
message: ""
};
}
};
</script>
<style scoped>
.dialog-tips{
min-width: 380px;
box-sizing: border-box;
border-radius: 4px;
border: 1px solid #e1f3d8;
position: fixed;
left: 50%;
top: 20px;
transform: translateX(-50%);
background-color: #f0f9eb;
overflow: hidden;
padding: 15px 15px 15px 20px;
display: flex;
align-items: center;
color: #67c23a;
}.slide-fade-enter, .slide-fade-leave-to {
margin-top:-30px;
opacity: 0;}.slide-fade-enter-active,.slide-fade-leave-active {
transition: all .3s ease;
}.slide-fade-enter-to,.slide-fade-leave {
margin-top:0px;
opacity:1;
}
</style>
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
“vue全局提示插件开发toast怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。