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

　　

1。自定义提示框组件

　　

src/组件/面包/index.js

　　 　　/* * 　　*自定义提示框(吐司)组件 　　*/var面包={};//var showToast=false,存储吐司显示状态 　　showLoad=false,//存储加载显示状态 　　toastVM=null,//存储烤面包vm 　　loadNode=零;//存储装节点元素 　　 　　吐司。安装=function (Vue、期权){//参数 　　var选择={ 　　defaultType:“底”, 　　持续时间:“2500”, 　　自动换行:假 　　}; 　　(var属性的选项){ 　　选择[属性]=[属性]选项; 　　} 　　 　　Vue.prototype。吐司美元=function(提示、类型){ 　　 　　var curType=类型& # 63;类型:opt.defaultType; 　　var自动换行=opt.wordWrap & # 63;“lx-word-wrap”:”; 　　var风格=opt.width & # 63;“:”; 　　var tmp=' & lt; div v-show=罢故尽?类=袄嘈汀眂lass=發x-toast +自动换行+”“+时尚+”在{{提示}}& lt;/div>”; 　　 　　如果(showToast) {//如果面包还在,则不再执行 　　返回; 　　} 　　如果(! toastVM) { 　　var toastTpl=Vue.extend ({ 　　数据:函数(){ 　　返回{ 　　显示:showToast, 　　提示:提示, 　　类型:+ curType lx-toast - 　　} 　　}， 　　模板:tmp 　　}）; 　　toastVM=new toastTpl () 　　var tpl=toastVM。()。el美元; 　　document.body.appendChild (tpl); 　　} 　　toastVM。类型=發x-toast——”+ curType; 　　toastVM。提示=技巧; 　　toastVM。显示=showToast=true; 　　 　　setTimeout(函数(){ 　　toastVM。显示=showToast=false; 　　},opt.duration) 　　}; 　　 　　[“底”,“中心”,“高级”)。forEach(函数(式){ 　　Vue.prototype。吐司美元[型]=函数(tips) { 　　Vue.prototype返回。美元的面包(提示、类型) 　　} 　　}）; 　　 　　Vue.prototype。加载美元=function(提示、类型){ 　　如果(type=='关闭'){ 　　loadNode。显示=showLoad=false; 　　其他}{ 　　如果(showLoad) {//如果加载还在,则不再执行 　　返回; 　　} 　　var loadTpl=Vue.extend ({ 　　数据:函数(){ 　　返回{ 　　显示:showLoad 　　} 　　}， 　　模板:“& lt; div v-show=靶恪眂lass=發x-load-mark”祝辞& lt; div类=發x-load-box祝辞& lt; div类=發x-loading祝辞& lt; div class=" loading_leaf loading_leaf_0”祝辞& lt;/div> & lt; div class=" loading_leaf loading_leaf_1”祝辞& lt;/div> & lt; div class=" loading_leaf loading_leaf_2”祝辞& lt;/div> & lt; div class=" loading_leaf loading_leaf_3”祝辞& lt;/div> & lt; div class=" loading_leaf loading_leaf_4”祝辞& lt;/div> & lt; div class=" loading_leaf loading_leaf_5”祝辞& lt;/div> & lt; div class=" loading_leaf loading_leaf_6”祝辞& lt;/div> & lt; div class=" loading_leaf loading_leaf_7”祝辞& lt;/div> & lt; div class=" loading_leaf loading_leaf_8”祝辞& lt;/div> & lt; div class=" loading_leaf loading_leaf_9”祝辞& lt;/div> & lt; div class=" loading_leaf loading_leaf_10”祝辞& lt;/div> & lt; div class=" loading_leaf loading_leaf_11”祝辞& lt;/div> & lt;/div> & lt; div类=發x-load-content”在“+技巧+“& lt;/div> & lt;/div> & lt;/div>” 　　}）; 　　loadNode=new loadTpl (); 　　var tpl=loadNode。()。el美元; 　　 　　document.body.appendChild (tpl); 　　loadNode。显示=showLoad=true; 　　} 　　}; 　　 　　(“开放”,“关闭”)。forEach(函数(式){ 　　Vue.prototype。$加载[型]=function (tips) { 　　Vue.prototype返回。美元加载(提示、类型) 　　} 　　}）; 　　}//向外暴露接口 　　模块。出口=吐司; 　　 　　

src/组件/面包/toast.css

　　 　　/* * 　　*吐司样式 　　*/.lx-toast { 　　位置:固定; 　　底部:100 px; 　　左:50%; 　　box-sizing: border-box; 　　max-width: 80%; 　　高度:40像素; 　　行高:20 px; 　　填充:10 px 20 px; 　　变换:translateX (-50%); 　　-webkit-transform: translateX (-50%); 　　text-align:中心; 　　z - index: 9999; 　　字体大小:14 px; 　　颜色:# fff; 　　border - radius: 5 px; 　　背景:rgba (0, 0, 0, 0.7); 　　动画:show-toast 0; 　　-webkit-animation: show-toast 0; 　　溢出:隐藏; 　　文本溢出:省略; 　　空白:nowrap;} 　　} 　　 　　.lx-toast。lx-word-wrap { 　　宽度:80%; 　　空白:继承; 　　高度:汽车; 　　} 　　 　　.lx-toast。lx-toast-top { 　　上图:50 px; 　　底部:继承; 　　} 　　 　　.lx-toast。lx-toast-center { 　　上图:50%; 　　margin-top: -20 px; 　　底部:继承; 　　} 　　 　　@keyframes show-toast { 　　从{ 　　透明度:0; 　　变换:翻译(-50%,-10 px); 　　-webkit-transform:翻译(-50%,-10 px); 　　} 　　,{ 　　透明度:1; 　　变换:翻译(-50%,0); 　　-webkit-transform:翻译(-50%,0); 　　} 　　} 　　 　　.lx-load-mark { 　　位置:固定; 　　左:0; 　　上图:0; 　　宽度:100%; 　　高度:100%; 　　z - index: 9999; 　　} 　　 　　.lx-load-box { 　　位置:固定; 　　z - index: 3; 　　宽度:7.6 em; 　　最小高度:7.6 em; 　　前:180像素; 　　左:50%; 　　margin-left: -3.8 em; 　　背景:rgba (0, 0, 0, 0.7); 　　text-align:中心; 　　border - radius: 5 px; 　　颜色:# FFFFFF; 　　} 　　 　　.lx-load-content { 　　margin-top: 64%; 　　字体大小:14 px; 　　} 　　 　　.lx-loading { 　　位置:绝对的; 　　宽度:0 px; 　　左:50%; 　　上图:38%; 　　} 　　 　　.loading_leaf { 　　位置:绝对的; 　　上图:1 px; 　　透明度:0.25; 　　} 　　 　　.loading_leaf:{之前 　　内容:“”; 　　位置:绝对的; 　　宽度:9.14 px; 　　高度:3.08 px; 　　背景:# d1d1d5; 　　不必:rgba (0, 0, 0, 0.0980392) 0 px 0 px 1 px; 　　border - radius: 1 px; 　　-webkit-transform-origin:左50% 0 px; 　　transform-origin:左50% 0 px; 　　} 　　 　　.loading_leaf_0 { 　　-webkit-animation: opacity-0 1.25年代线性无限; 　　动画:opacity-0 1.25年代线性无限; 　　} 　　 　　.loading_leaf_0:{之前 　　-webkit-transform:旋转(0度)翻译(7.92 px, 0 px); 　　变换:旋转(0度)翻译(7.92 px, 0 px); 　　} 　　 　　.loading_leaf_1 { 　　-webkit-animation: opacity-1 1.25年代线性无限; 　　动画:opacity-1 1.25年代线性无限; 　　} 　　 　　.loading_leaf_1:{之前 　　-webkit-transform:旋转(30度)翻译(7.92 px, 0 px); 　　变换:旋转(30度)翻译(7.92 px, 0 px); 　　} 　　 　　.loading_leaf_2 { 　　-webkit-animation: opacity-2 1.25年代线性无限; 　　动画:opacity-2 1.25年代线性无限; 　　} 　　 　　.loading_leaf_2:{之前 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

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