vue2.0 toast组件开发以及全局引入

1.在Vue里引入toast提示组件效果

2.重要代码片段

（1）html

<div class="npm-com-toast" v-show="isShow" @click="close"><div class="mask"><div class="box" @click.stop><div class="html" v-html="msg"></div></div></div>
</div>

（2）js

<script>
export default {data () {return {msg: '',isShow: false,timeout: null,resolve: null,};},methods: {/*** 显示toast* @desc 本方法为异步方法，将在toast关闭时执行成功回调* @param {Number} [options.msg=''] 显示的内容，可以是html* @param {Number} [options.duration=3000] 持续显示时间*/async show ({msg = '', duration = 3000} = {}) {return new Promise(resolve => {// 清除之前的Loading定时器if (this.isShow) {this.close();}this.msg = msg;// 生成新的定时器this.isShow = true;this.resolve = resolve;this.timeout = setTimeout(this.close, duration);});},/*** 关闭toast* @param duration*/close () {this.isShow = false;clearTimeout(this.timeout);this.timeout = null;// 清空显示内容this.msg = '';if (this.resolve) {this.resolve();this.resolve = null;}},/*** 显示/关闭toast提示* @desc 本方法为异步方法，将在toast关闭时执行成功回调* @param {Object} options 复合参数（值为false：隐藏|值为其他情况或不传：显示）* @param {Number} [options.duration=30000] 持续显示时间*/async toast (options) {if (options === false) {await this.close();} else {await this.show(options);}},}
};
</script>

(3) css

.npm-com-toast {position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: table;z-index: 100;line-height: 1;.mask {display: table-cell;vertical-align: middle;text-align: center;animation: npm-com-toast-mask-animation 0.3s forwards;@keyframes npm-com-toast-mask-animation {0% {background: rgba(0, 0, 0, 0);}100% {background: rgba(0, 0, 0, 0.1);}}.box {display: inline-block;box-sizing: border-box;padding: 10px 15px;min-width: 120px;max-width: 120px;min-height: 40px;border-radius: 4px;background: rgba(0, 0, 0, 0.65);color: #FFF;font-size: 14px;line-height: 20px;animation: npm-com-toast-mask-box-animation 0.3s forwards;@keyframes npm-com-toast-mask-box-animation {0% {transform: scale(0);}100% {transform: scale(1);}}.html {display: inline-block;text-align: center;}}}
}

(4) 在npm-com-toast 文件夹下建立index.js

import Vue from 'vue';
import Popup from './npm-com-toast.vue'const PopupBox = Vue.extend(Popup);Popup.install = function (data) {let instance = new PopupBox({data}).$mount()document.body.appendChild(instance.$el)Vue.nextTick(() => {instance.show({msg: instance.msg,duration: instance.duration})})
}export default Popup

(5) 在main.js里导入toast

import npmComToast from './components/npm-com-toast/index.js';Vue.prototype.$toast = npmComToast.install;

(6) 在页面使用

this.$toast({msg: '测试----',duration: 2000,
})

最后，也有其他引入方式，具体看情况。

vue2.0 toast组件开发以及全局引入相关推荐

ASP.NET2.0自定义控件组件开发第六章深入讲解控件的属性
深入讲解控件的属性持久化(一) 系列文章链接: ASP.NET自定义控件组件开发第一章待续 ASP.NET自定义控件组件开发第一章第二篇接着待续 ASP.NET自定义控件组件开发第一章第 ...
【Vue2.0】— 组件的自定义事件（十八）
[Vue2.0]- 组件的自定义事件(十八) <template><div ><h2>{{msg}}</h2><!-- 通过父组件给子组件传递函数 ...
【Vue2.0】—组件（十一）
[Vue2.0]-组件(十一) <body><div id="root"><h2>{{name}}</h2><hr>&l ...
vue2.0.js基础开发使用心得（结合实际项目对数据的增删改查）
1.首先申明,没有使用vue 的组件,以及脚手架等,都是一些基础语法的使用. ------------------------------------------------------------- ...
Vue2.0 全家桶开发的网页应用（参照吾记APP)
github链接借鉴吾记APP,使用 vue2.0 vue-router vuex 为主要技术栈,elementui做为ui框架,多模块 spa 模式,webpack2.0 负责模块打包,gulp ...
Vue2.0 Vue组件单文件组件
聊到单文件就要写道xxx.vue,但是.vue文件浏览器是不认识的得处理和加工成.js怎么处理和加工渠道一: webpack 渠道二: 借助Vue官方提供的脚手架(官方给你搭建的整个webpack编 ...
Vue2.0进阶组件短信倒计时组件
原本我想隔个几天再发文章,刚好今天项目上线,环境有问题,导致只有干等,刚好要为公司打造一套属于公司自己的一系列功能组件,这个使命就交给我了,大家也一直叫我来点干货,说实话我只是一个湿货,肚子里干一点就 ...
vue2.0 子组件和父组件之间的传值
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
vue2.0 - layout组件（五）SideBar和Main页面布局
1. SideBar下的组件 2. index.vue 页面内容 <template><div class="asideNav"><!-- 如果不要L ...

vue2.0 toast组件开发以及全局引入

vue2.0 toast组件开发以及全局引入相关推荐

最新文章

热门文章