首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 17, 2018

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}}</div>';
 
  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><div class="loading_leaf loading_leaf_1"></div><div class="loading_leaf loading_leaf_2"></div><div class="loading_leaf loading_leaf_3"></div><div class="loading_leaf loading_leaf_4"></div><div class="loading_leaf loading_leaf_5"></div><div class="loading_leaf loading_leaf_6"></div><div class="loading_leaf loading_leaf_7"></div><div class="loading_leaf loading_leaf_8"></div><div class="loading_leaf loading_leaf_9"></div><div class="loading_leaf loading_leaf_10"></div><div class="loading_leaf loading_leaf_11"></div></div><div class="lx-load-content">' + tips + '</div></div></div>'
   });
   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

/**
 * Toast 样式
 */
.lx-toast {
 position: fixed;
 bottom: 100px;
 left: 50%;
 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, 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, 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, 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

// 全局引入Toast
import './components/Toast/toast.css';
import Toast from './components/Toast/index';
Vue.use(Toast);

3.页面调用

Toast.vue

<!-- 提示框 -->

<template>

 <div>

  <!-- 标题栏 -->

  <mt-header title= "提示框" >

  <router-link to= "/" slot= "left" >

   <mt-button icon= "back" >返回</mt-button>

  </router-link>

  </mt-header>

  <!-- 内容 -->

  <button @click= "openTop()" >top</button>

  <button @click= "openCenter()" >center</button>

  <button @click= "openBottom()" >bottom</button>

  <button @click= "openLoading()" >loading</button>

 </div>

</template>

<script>

 export default {

  name: 'Toast' ,

  data(){

  return {

   //

  }

  },

  methods:{

  openTop(){

   this .$toast.top( 'top' );

  },

  openCenter(){

   this .$toast.center( 'center' );

  },

  openBottom(){

   this .$toast( 'bottom' );  // or this.$toast.bottom('bottom');

  },

  openLoading(){

   this .$loading( 'loading...' );

   let self = this ;

   setTimeout( function () {

   self.closeLoading()

   }, 2000)

  },

  closeLoading(){

   this .$loading.close();

  }

  }

 }

</script>

<style lang= "less" scoped>
 //
</style>

4.效果图

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

马清元

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
如何实现动态删除javascript函数
May 27 Javascript
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 #Javascript
在iFrame子页面里实现模态框的方法
Aug 17 #Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 #Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 #Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 #Javascript
Vue组件创建和传值的方法
Aug 17 #Javascript
webpack多入口多出口的实现方法
Aug 17 #Javascript
乐信(1) PL550(1) SHARP(1) GF515(1) 安健(1) RP2100(1) ICF-SW7600(1) 德劲1102(1) 低放电路(1) SRF-M100(1)
You might like
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
PHP 事件机制(2)
2011/03/23 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序，保持索引关系
2011/11/02 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
Laravel框架表单验证详解
2014/09/04 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
php探针不显示内存解决方法
2019/09/17 PHP
javascript 面向对象继承
2009/11/26 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
Python的迭代器和生成器使用实例
2015/01/14 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
Python pickle模块实现对象序列化
2019/11/22 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
英国领先的运动营养品牌：Protein Dynamix
2018/01/02 全球购物
ProForm英国站点：健身房和健身器材网上商店
2019/06/05 全球购物
遗体告别仪式主持词
2014/03/20 职场文书
动漫APP软件排行榜前十名，半次元上榜，第一款由腾讯公司推出
2022/03/18 杂记
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python
MySQL安装失败的原因及解决步骤
2022/06/14 MySQL