vue怎么接收后台的数据(Vue封装全局toast组件的完整实例)
类别:编程学习 浏览量:2979
时间:2021-10-16 00:46:52 vue怎么接收后台的数据
Vue封装全局toast组件的完整实例目录
- 前言
- 一. 借助 vue-cli
- 1. 定义 Toast 组件
- 2. 在 main.js 里面配置
- 3. 在其他组件内使用
- 二、不借助 vue-cli
- 1. 注册 toast 组件
- 2. 注册 toast 插件
- 3. 在其他组件内使用
- 总结
最近体验了下Vue,Toast都是前端常用组件,本文详细介绍了Vue封装全局toast组件的过程,下面话不多说了,来一起看看详细的介绍吧
一. 借助 vue-cli1. 定义 Toast 组件
// components/Toast <template> <transition name="fade"> <li v-show="visible">{{message}}</li> </transition> </template> <script> export default { data () { return { visible: false, message: '' } } } </script> <style scoped> li { 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('li')) 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> <li class="hello"> <h1>{{ msg }}</h1> </li> </template> <script> export default { name: 'HelloWorld', data: () => { return { msg: 'HelloWord' } }, mounted () { // 使用 toast 组件 this.$toast('组件挂载成功') } } </script>
在借助 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> <li id="app"> <my-button></my-button> </li> <li id="toast"></li> <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: `<li v-show="isShow" :style="wrapperStyle"> <span :style="textStyle">{{ message }}</span> </li>` })
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: `<li :style="wrapperStyle" @click="handleClick"> <span :style="textStyle">点击提示</span> </li>` }) const vm = new Vue({ el: '#app' }) </script> </body> </html>
到此这篇关于Vue封装全局toast组件的文章就介绍到这了,更多相关Vue封装全局toast组件内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue过滤器使用思路(vue 过滤器和自定义指令的使用)
- vue高阶组件怎么用(vue更多筛选项小组件使用详解)
- vue可以用vite打包吗(vite+vue3+element-plus项目搭建的方法步骤)
- vue弹窗模板(Vue登录页面的动态粒子背景插件实现)
- vue加element ui弹窗(Vue中ElementUI分页组件Pagination的使用方法)
- vue定时器中间变颜色(Vue如何优雅的清除定时器)
- elementuivue使用技巧(Vue Element前端应用开发之常规Element界面组件)
- vuex存取修改数据流程(vuex数据持久化的两种实现方案)
- vue 表格数据增加修改(vue element实现表格增加删除修改数据)
- vue和springboot分页开发实现(解决Vue+SpringBoot+Shiro跨域问题)
- vue实现添加一段代码功能(Vue实现动态查询规则生成组件)
- vue实现添加购物车小球(Vue实现简易购物车案例)
- vue实现列表向上滚动更新(vue实现列表无缝滚动)
- vue双向数据绑定js如何实现(纯JS如何实现vue.js下的双向绑定功能)
- vue 动态绑定指令(vue动态绑定图标的完整步骤)
- vue常用的指令和修饰符(Vue中 Vue.prototype使用详解)
- 艺人吴卓羲10年警察生涯,演足10年阿Sir,系咩玩法(艺人吴卓羲10年警察生涯)
- 菲律宾潜水(菲律宾潜水价格)
- 泰国人妖(变性手术生殖器要割掉吗)
- 泰国美女(泰国人妖和女性如何区分)
- 泰国旅游业怎么样(泰国的旅游产业)
- 越南新娘(越南新娘婚介网站)
热门推荐
- docker容器端口和内部进程(Docker动态给容器Container暴露端口操作)
- linux关闭autofs服务命令(Linux系统的ECS实例挂载NAS提示“mount: can't find /root/nas in /etc/fstab”错误的解决)
- thinkphp导入excel(Yii框架使用PHPExcel导出Excel文件的方法分析改进版)
- html怎么设置地图(HTML5获取当前地理位置并在百度地图上展示的实例)
- python2个字典合成(Python两个字典键同值相加的几种方法)
- php经典算法大全(php菜单/评论数据递归分级算法的实现方法)
- docker的postgres镜像包(Docker中运行PostgreSQL并推荐几款连接工具)
- word-break、word-wrap、white-space的用法
- Jquery实现table表格行的添加、删除
- SQL SERVER中查看一个数据库的表结构及字段
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9