Vue封装全局toast组件的完整实例
更新时间：2021年07月13日 11:18:03 作者：_kyz
组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码,这篇文章主要给大家介绍了关于Vue封装全局toast组件,需要的朋友可以参考下
前言
最近体验了下Vue，Toast都是前端常用组件，本文详细介绍了Vue封装全局toast组件的过程，下面话不多说了，来一起看看详细的介绍吧
一. 借助 vue-cli
1. 定义 Toast 组件
// components/Toast
<template>
<transition name="fade">
<div v-show="visible">{{message}}</div>
</transition>
</template>
<script>
export default {
data () {
return {
visible: false,
message: ''
}
}
}
</script>
<style scoped>
div {
position: fixed;
top: 30%;
left: 50%;
padding: 5px 20px;
color: #fff;
background-color: #424242;
border-radius: 5px;
text-align: center;
transform: translate(-50%, -50%);
}
/* vue动画过渡效果设置 */
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
2. 在 main.js 里面配置
import Vue from 'vue'
import App from './App.vue'
import Toast from './components/Toast'
// 定义插件对象
const ToastObj = {
install: function (Vue) {
// 创建一个Vue的“子类”组件
const ToastConstructor = Vue.extend(Toast)
// 创建一个该子类的实例,并挂载到一个元素上
const instance = new ToastConstructor()
console.log(instance)
// 将这个实例挂载到动态创建的元素上,并将元素添加到全局结构中
instance.$mount(document.createElement('div'))
document.body.appendChild(instance.$el)
// 在Vue的原型链上注册方法，控制组件
Vue.prototype.$toast = (msg, duration = 1500) => {
instance.message = msg
instance.visible = true
setTimeout(() => {
instance.visible = false
}, duration)
}
}
}
Vue.use(ToastObj)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
3. 在其他组件内使用
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data: () => {
return {
msg: 'HelloWord'
}
},
mounted () {
// 使用 toast 组件
this.$toast('组件挂载成功')
}
}
</script>
二、不借助 vue-cli
在借助 vue-cli 的情况下，可以方便实现组件的导入导出，但是在不借助构建工具的情况下，就需要使用其他方法了
1. 注册 toast 组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./static/vue/vue.min.js"></script>
</head>
<body>
<div id="app">
<my-button></my-button>
</div>
<div id="toast"></div>
<script>
// 定义 toast 全局组件
const Toast = Vue.component('toast', {
data() {
return {
isShow: false,
message: '全局提示',
wrapperStyle: {
position: 'fixed',
top: '20%',
left: '50%',
zIndex: 10000,
padding: '6px 12px',
backgroundColor: '#424242',
borderRadius: '5px',
transform: 'translate(-50%, -50%)'
},
textStyle: {
color: '#fff',
fontSize: '14px'
}
}
},
template: `<div v-show="isShow" :style="wrapperStyle">
<span :style="textStyle">{{ message }}</span>
</div>`
})
2. 注册 toast 插件
// 定义插件对象
const ToastObj = {
install: function (Vue) {
// 创建一个 toast 组件实例,并挂载到一个元素上
const instance = new Toast()
// 将这个实例挂载到DOM中
instance.$mount('#toast')
// 在Vue的原型链上注册方法，控制组件
Vue.prototype.$toast = ({message, duration = 2000} = {}) => {
instance.message = message
instance.isShow = true
setTimeout(() => {
instance.isShow = false
}, duration)
}
}
}
// 注册 toast 插件
Vue.use(ToastObj)
3. 在其他组件内使用
Vue.component('my-button', {
data() {
return {
wrapperStyle: {
width: '70px',
padding: '20px',
backgroundColor: 'green'
},
textStyle: {
color: '#fff',
fontSize: '16px'
}
}
},
methods: {
handleClick() {
this.$toast({
message: '我点击了'
})
}
},
template: `<div :style="wrapperStyle" @click="handleClick">
<span :style="textStyle">点击提示</span>
</div>`
})
const vm = new Vue({
el: '#app'
})
</script>
</body>
</html>
总结
到此这篇关于Vue封装全局toast组件的文章就介绍到这了,更多相关Vue封装全局toast组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于vue3使用base64加密的两种方法,我们在vue项目中有时会使用到Base6464转码,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了Vue生命周期的示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要介绍了Vue修改Dom不生效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了vue.js 实现输入框动态添加功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
这篇文章主要为大家介绍了基于ant-design-vue实现表格操作按钮组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
本文主要介绍了vue+element 分页封装的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
我们通常会用到脚手架vuecli创建项目,此时需要安装脚手架,下面这篇文章主要给大家介绍了关于vue脚手架安装以及安装失败问题的解决办法,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了element-ui配合node实现自定义上传文件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了Vue Mint UI mt-swipe的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要为大家详细介绍了Vue实现手机计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
最新评论