首页
所有分类
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中的every()方法
Jun 08 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
js代码实现下拉菜单【推荐】
Dec 15 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 Javascript
Openlayers学习之地图比例尺控件
Sep 28 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
FTP服务器(1) DBLink(1) MVCC(4) 幻读(5) 复读(1) GZIP(2) 事务并发(1) IIS7(1) 磁盘分区(1) .NET Framework(2)
You might like
PHP生成Gif图片验证码
2013/10/27 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
深入理解JavaScript系列（26）：设计模式之构造函数模式详解
2015/03/03 Javascript
javascript学习之json入门
2016/12/22 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
ES6新特性：使用export和import实现模块化详解
2017/07/31 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
简单的三步vuex入门
2018/05/20 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
python元组和字典的内建函数实例详解
2019/10/22 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
解释一下Windows的消息机制
2014/01/30 面试题
《晏子使楚》教学反思
2014/02/08 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
学习之星事迹材料
2014/05/17 职场文书
电子工程求职信
2014/07/17 职场文书
高中教师个人工作总结
2015/02/10 职场文书
工作总结之小学教师体育工作范文（3篇）
2019/10/07 职场文书
anaconda python3.8安装后降级
2021/06/11 Python