|
前言
最近体验了下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 = falsenew 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组件内容请搜索wanshiok.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持wanshiok.com！
利用JavaScript差集实现一个对比小工具
JS防抖节流函数的实现与使用场景 |
