vue 自定义提示框(Toast)组件的实现代码

Vue 前端之家
前端之家收集整理的这篇文章主要介绍了vue 自定义提示框(Toast)组件的实现代码，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

1.自定义 提示框 组件

src / components / Toast / index.js

自定义 提示框( Toast )组件 */ var Toast = {}; var showToast = false,// 存储toast显示状态 showLoad = false,// 存储loading显示状态 toastVM = null,// 存储toast vm loadNode = null; // 存储loading节点元素

Toast.install = function (Vue,options) {
// 参数
var opt = {
defaultType: 'bottom',duration: '2500',wordWrap: false
};
for (var property in options) {
opt[property] = options[property];
}

Vue.prototype.$toast = function (tips,type) {

var curType = type ? type : opt.defaultType;
var wordWrap = opt.wordWrap ? 'lx-word-wrap' : '';
var style = opt.width ? 'style="width: ' + opt.width + '"' : '';
var tmp = '<div v-show="show" :class="type" class="lx-toast ' + wordWrap + '" ' + style + '>{{tip}}

';

if (showToast) {
// 如果toast还在，则不再执行
return;
}
if (!toastVM) {
var toastTpl = Vue.extend({
data: function () {
return {
show: showToast,tip: tips,type: 'lx-toast-' + curType
}
},template: tmp
});
toastVM = new toastTpl()
var tpl = toastVM.$mount().$el;
document.body.appendChild(tpl);
}
toastVM.type = 'lx-toast-' + curType;
toastVM.tip = tips;
toastVM.show = showToast = true;

setTimeout(function () {
toastVM.show = showToast = false;
},opt.duration)
};

['bottom','center','top'].forEach(function (type) {
Vue.prototype.$toast[type] = function (tips) {
return Vue.prototype.$toast(tips,type)
}
});

Vue.prototype.$loading = function (tips,type) {
if (type == 'close') {
loadNode.show = showLoad = false;
} else {
if (showLoad) {
// 如果loading还在，则不再执行
return;
}
var loadTpl = Vue.extend({
data: function () {
return {
show: showLoad
}
},template: '<div v-show="show" class="lx-load-mark"><div class="lx-load-Box"><div class="lx-loading"><div class="loading_leaf loading_leaf_0">

<div class="loading_leaf loading_leaf_1">
<div class="loading_leaf loading_leaf_2">
<div class="loading_leaf loading_leaf_3">
<div class="loading_leaf loading_leaf_4">
<div class="loading_leaf loading_leaf_5">
<div class="loading_leaf loading_leaf_6">
<div class="loading_leaf loading_leaf_7"><div class="loading_leaf loading_leaf_8"><div class="loading_leaf loading_leaf_9"><div class="loading_leaf loading_leaf_10"><div class="loading_leaf loading_leaf_11"><div class="lx-load-content">' + tips + ''
});
loadNode = new loadTpl();
var tpl = loadNode.$mount().$el;

document.body.appendChild(tpl);
loadNode.show = showLoad = true;
}
};

['open','close'].forEach(function (type) {
Vue.prototype.$loading[type] = function (tips) {
return Vue.prototype.$loading(tips,type)
}
});
}

// 向外暴露接口
module.exports = Toast;

src / components / Toast / toast.css

Box-sizing: border-Box; max-width: 80%; height: 40px; line-height: 20px; padding: 10px 20px; transform: translateX(-50%); -webkit-transform: translateX(-50%); text-align: center; z-index: 9999; font-size: 14px; color: #fff; border-radius: 5px; background: rgba(0,0.7); animation: show-toast .5s; -webkit-animation: show-toast .5s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lx-toast.lx-word-wrap {
width: 80%;
white-space: inherit;
height: auto;
}

.lx-toast.lx-toast-top {
top: 50px;
bottom: inherit;
}

.lx-toast.lx-toast-center {
top: 50%;
margin-top: -20px;
bottom: inherit;
}

@keyframes show-toast {
from {
opacity: 0;
transform: translate(-50%,-10px);
-webkit-transform: translate(-50%,-10px);
}
to {
opacity: 1;
transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
}
}

.lx-load-mark {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
}

.lx-load-Box {
position: fixed;
z-index: 3;
width: 7.6em;
min-height: 7.6em;
top: 180px;
left: 50%;
margin-left: -3.8em;
background: rgba(0,0.7);
text-align: center;
border-radius: 5px;
color: #FFFFFF;
}

.lx-load-content {
margin-top: 64%;
font-size: 14px;
}

.lx-loading {
position: absolute;
width: 0px;
left: 50%;
top: 38%;
}

.loading_leaf {
position: absolute;
top: -1px;
opacity: 0.25;
}

.loading_leaf:before {
content: " ";
position: absolute;
width: 9.14px;
height: 3.08px;
background: #d1d1d5;
Box-shadow: rgba(0,0.0980392) 0px 0px 1px;
border-radius: 1px;
-webkit-transform-origin: left 50% 0px;
transform-origin: left 50% 0px;
}

.loading_leaf_0 {
-webkit-animation: opacity-0 1.25s linear infinite;
animation: opacity-0 1.25s linear infinite;
}

.loading_leaf_0:before {
-webkit-transform: rotate(0deg) translate(7.92px,0px);
transform: rotate(0deg) translate(7.92px,0px);
}

.loading_leaf_1 {
-webkit-animation: opacity-1 1.25s linear infinite;
animation: opacity-1 1.25s linear infinite;
}

.loading_leaf_1:before {
-webkit-transform: rotate(30deg) translate(7.92px,0px);
transform: rotate(30deg) translate(7.92px,0px);
}

.loading_leaf_2 {
-webkit-animation: opacity-2 1.25s linear infinite;
animation: opacity-2 1.25s linear infinite;
}

.loading_leaf_2:before {
-webkit-transform: rotate(60deg) translate(7.92px,0px);
transform: rotate(60deg) translate(7.92px,0px);
}

.loading_leaf_3 {
-webkit-animation: opacity-3 1.25s linear infinite;
animation: opacity-3 1.25s linear infinite;
}

.loading_leaf_3:before {
-webkit-transform: rotate(90deg) translate(7.92px,0px);
transform: rotate(90deg) translate(7.92px,0px);
}

.loading_leaf_4 {
-webkit-animation: opacity-4 1.25s linear infinite;
animation: opacity-4 1.25s linear infinite;
}

.loading_leaf_4:before {
-webkit-transform: rotate(120deg) translate(7.92px,0px);
transform: rotate(120deg) translate(7.92px,0px);
}

.loading_leaf_5 {
-webkit-animation: opacity-5 1.25s linear infinite;
animation: opacity-5 1.25s linear infinite;
}

.loading_leaf_5:before {
-webkit-transform: rotate(150deg) translate(7.92px,0px);
transform: rotate(150deg) translate(7.92px,0px);
}

.loading_leaf_6 {
-webkit-animation: opacity-6 1.25s linear infinite;
animation: opacity-6 1.25s linear infinite;
}

.loading_leaf_6:before {
-webkit-transform: rotate(180deg) translate(7.92px,0px);
transform: rotate(180deg) translate(7.92px,0px);
}

.loading_leaf_7 {
-webkit-animation: opacity-7 1.25s linear infinite;
animation: opacity-7 1.25s linear infinite;
}

.loading_leaf_7:before {
-webkit-transform: rotate(210deg) translate(7.92px,0px);
transform: rotate(210deg) translate(7.92px,0px);
}

.loading_leaf_8 {
-webkit-animation: opacity-8 1.25s linear infinite;
animation: opacity-8 1.25s linear infinite;
}

.loading_leaf_8:before {
-webkit-transform: rotate(240deg) translate(7.92px,0px);
transform: rotate(240deg) translate(7.92px,0px);
}

.loading_leaf_9 {
-webkit-animation: opacity-9 1.25s linear infinite;
animation: opacity-9 1.25s linear infinite;
}

.loading_leaf_9:before {
-webkit-transform: rotate(270deg) translate(7.92px,0px);
transform: rotate(270deg) translate(7.92px,0px);
}

.loading_leaf_10 {
-webkit-animation: opacity-10 1.25s linear infinite;
animation: opacity-10 1.25s linear infinite;
}

.loading_leaf_10:before {
-webkit-transform: rotate(300deg) translate(7.92px,0px);
transform: rotate(300deg) translate(7.92px,0px);
}

.loading_leaf_11 {
-webkit-animation: opacity-11 1.25s linear infinite;
animation: opacity-11 1.25s linear infinite;
}

.loading_leaf_11:before {
-webkit-transform: rotate(330deg) translate(7.92px,0px);
transform: rotate(330deg) translate(7.92px,0px);
}

@-webkit-keyframes opacity-0 {
0% {
opacity: 0.25;
}
0.01% {
opacity: 0.25;
}
0.02% {
opacity: 1;
}
60.01% {
opacity: 0.25;
}
100% {
opacity: 0.25;
}
}

@-webkit-keyframes opacity-1 {
0% {
opacity: 0.25;
}
8.34333% {
opacity: 0.25;
}
8.35333% {
opacity: 1;
}
68.3433% {
opacity: 0.25;
}
100% {
opacity: 0.25;
}
}

@-webkit-keyframes opacity-2 {
0% {
opacity: 0.25;
}
16.6767% {
opacity: 0.25;
}
16.6867% {
opacity: 1;
}
76.6767% {
opacity: 0.25;
}
100% {
opacity: 0.25;
}
}

@-webkit-keyframes opacity-3 {
0% {
opacity: 0.25;
}
25.01% {
opacity: 0.25;
}
25.02% {
opacity: 1;
}
85.01% {
opacity: 0.25;
}
100% {
opacity: 0.25;
}
}

@-webkit-keyframes opacity-4 {
0% {
opacity: 0.25;
}
33.3433% {
opacity: 0.25;
}
33.3533% {
opacity: 1;
}
93.3433% {
opacity: 0.25;
}
100% {
opacity: 0.25;
}
}

@-webkit-keyframes opacity-5 {
0% {
opacity: 0.270958333333333;
}
41.6767% {
opacity: 0.25;
}
41.6867% {
opacity: 1;
}
1.67667% {
opacity: 0.25;
}
100% {
opacity: 0.270958333333333;
}
}

@-webkit-keyframes opacity-6 {
0% {
opacity: 0.375125;
}
50.01% {
opacity: 0.25;
}
50.02% {
opacity: 1;
}
10.01% {
opacity: 0.25;
}
100% {
opacity: 0.375125;
}
}

@-webkit-keyframes opacity-7 {
0% {
opacity: 0.479291666666667;
}
58.3433% {
opacity: 0.25;
}
58.3533% {
opacity: 1;
}
18.3433% {
opacity: 0.25;
}
100% {
opacity: 0.479291666666667;
}
}

@-webkit-keyframes opacity-8 {
0% {
opacity: 0.583458333333333;
}
66.6767% {
opacity: 0.25;
}
66.6867% {
opacity: 1;
}
26.6767% {
opacity: 0.25;
}
100% {
opacity: 0.583458333333333;
}
}

@-webkit-keyframes opacity-9 {
0% {
opacity: 0.687625;
}
75.01% {
opacity: 0.25;
}
75.02% {
opacity: 1;
}
35.01% {
opacity: 0.25;
}
100% {
opacity: 0.687625;
}
}

@-webkit-keyframes opacity-10 {
0% {
opacity: 0.791791666666667;
}
83.3433% {
opacity: 0.25;
}
83.3533% {
opacity: 1;
}
43.3433% {
opacity: 0.25;
}
100% {
opacity: 0.791791666666667;
}
}

@-webkit-keyframes opacity-11 {
0% {
opacity: 0.895958333333333;
}
91.6767% {
opacity: 0.25;
}
91.6867% {
opacity: 1;
}
51.6767% {
opacity: 0.25;
}
100% {
opacity: 0.895958333333333;
}
}

2.全局引入

main.js

3.页面调用

Toast.vue

4.效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/vue/30892.html
vuevuevue自定义提示框

猜你在找的Vue相关文章

elementui的el-tree第一次加载无法展开和选中的问题
问题现象 elmentui的el-tree数据加载问题，导致第一次加载选中当前节点和高亮当前节点没有...
VSCODE打开一个文件，另一个文件就关闭的问题的解决方法
因为刚打开文件，vscode默认是预览状态，如果编辑过之后，就不会有这个问题。 可以通过双击...
一文带你学会国产加密算法SM4的vue实现方案
前言 上篇文章我们介绍了国产SM4加密算法的后端java实现方案。没有看过的小伙伴可以看一下...
解决vue报错：Module build failed (from ./node_modules/_eslint-loader@2.2.1@eslint-loader/index.js): TypeError: Cannot read property 'range' of null
在项目中引入动态路由时报错 写法: 报错: Module build failed (from ./node_modules/_esl...
vue中解决Uncaught ReferenceError: regeneratorRuntime is not defined问题
问题产生 在使用babel编译es6时，遇到报错Uncaught ReferenceError: regeneratorRuntime i...
element-UI中手动调用table排序
&amp;lt;el-table :data=&amp;quot;tableData&amp;quot; &amp;quot;width...
Vue双向绑定原理及其实现
在之前面试的时候被面试官问到是否了解Vue双向绑定的原理，其实自己之前看过双向绑定的原理...
Vue事件修饰符详解
整体学习Vue时看到Vue文档中有事件修饰符的描述，但是看了之后并没有理解是什么意思，于是...
Vue-router插件使用
单页面原理 Vue是单页面开发，即页面不刷新。 页面不刷新，而又要根据用户选择完成内容的更...
Vue 分支循环
v-for 通过v-for进行循环，不光可以拿到元素本身，也可以拿到索引值。 如果数据是对象类型...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作