加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

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

发布时间：2020-12-17 02:13:58 所属栏目：百科 来源：网络整理
导读：1.自定义 提示框 组件 src / components / Toast / index.js Toast.install = function (Vue,options) { // 参数 var opt = { defaultType: 'bottom',duration: '2500',wordWrap: false }; for (var property in options) { opt[property] = options[propert

1.自定义 提示框 组件

src / components / Toast / index.js

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

.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.效果图

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同