您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要讲解了“Vue下怎么封装全局toast组件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue下怎么封装全局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>
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')
<template> <div class="hello"> <h2>{{ msg }}</h2> </div> </template> <script> export default { name: 'HelloWorld', data: () => { return { msg: 'HelloWord' } }, mounted () { // 使用 toast 组件 this.$toast('组件挂载成功') } } </script>
在借助 vue-cli 的情况下,可以方便实现组件的导入导出,但是在不借助构建工具的情况下,就需要使用其他方法了
<!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" :> <span :>{{ message }}</span> </div>` })
// 定义插件对象 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)
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 : @click="handleClick"> <span :>点击提示</span> </div>` }) const vm = new Vue({ el: '#app' }) </script> </body> </html>
感谢各位的阅读,以上就是“Vue下怎么封装全局toast组件”的内容了,经过本文的学习后,相信大家对Vue下怎么封装全局toast组件这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。