Vue如何封装全局toast组件
短信预约 -IT技能 免费直播动态提醒
本篇内容主要讲解“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%);
}
.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>
<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>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script class="lazy" data-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组件”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
