Vue自定义toast组件的实例代码


Posted in Javascript onAugust 15, 2018

写了两三天,终于把toast组件写出来了。不敢说是最好的设计,希望有更好思路的朋友可以在评论区给我意见!_(:з」∠)_

第一步:写toast.vue,将样式之类的先定下来

<template>
 <div v-show="showToast" class="toast" :class="position">
 <div class="toast_container" v-if="type=='success'">
  <div><i class="iconfont icon-check icon"></i></div>
  <div class="msg_container">{{message}}</div>
 </div>
 <div class="toast_container" v-else-if="type=='wrong'">
  <div><i class="iconfont icon-warning-circle icon"></i></div>
  <div class="msg_container">{{message}}</div>
 </div>
 <div class="toast_container" v-else-if="type=='loading'">
  <div><loading10></loading10></div>
  <div class="msg_container">{{message}}</div>
 </div>
</div>
</template>
<script>
import loading10 from '../loading/spiner'
export default{
 props:{
  message:String,
  type:{
   validator: function (value) {
   // 值必须是这些字符串中的一个
   return ['success', 'wrong', 'loading'].indexOf(value) !== -1
  },
   default:'success'
  },
  duration:{
   type:Number,
   default:3000
  },
   position:{
   type:String,
   default:'middle'
  }
 },
 components:{
  loading10
 },
 data(){
  return{
   showToast:false
  }
 }
}
</script>
<style scoped>
.toast{
 width:100%;
}
.toast_container{
 background: rgba(0, 0, 0, 0.7);
 border-radius: 8px;
 color:#fff;
 margin-left:88px;
 margin-right:88px;
 text-align:center;
 padding-top:15px;
 padding-bottom: 15px; 
}
.top{
 position:absolute;
 top:10%;
}
.middle{
 position:absolute;
 top:40%;
}
.bottom{
 position:absolute;
 top:70%;
}
.msg_container{
 margin-top:8px;
 margin-left:15px;
 margin-right:15px;
 line-height: 22px;
 font-size: 16px;
 word-wrap: break-word;
}
.icon{
 font-size:30px;
}
</style>

Vue自定义toast组件的实例代码Vue自定义toast组件的实例代码Vue自定义toast组件的实例代码

一共三种样式,成功(success),失败(wrong),加载中(loading);

一共三种位置,上(top),中(middle),下(bottom);

所有涉及的图案出自阿里的iconfont 手机淘宝图标库。

加载中动画是自己写的蹩脚的加载组件(emmm,就不放出来污染大家眼睛了,需要的可以评论区知会一声_(:з」∠)_)

第二步:写index.js ,完成toast组件的实例化

import Vue from 'vue'
import Toast from './toast'
let singleToast=true;
let queue=[];
function createInstance(){
 // 返回一个扩展实例构造器
 if(!queue.length||!singleToast){
 const ToastConstructor = Vue.extend(Toast);
 // 构造一个实例
 const toastDom = new ToastConstructor({
 el: document.createElement('div'),
 });
 // 把实例化的 toast.vue 添加到 body 里
 document.body.appendChild(toastDom.$el);
 queue.push(toastDom);
 singleToast=true;
 return toastDom;
 }
};
// 注册为全局组件的函数
function toast(options= {}) {
 const toastDom = createInstance();
 toastDom.message =typeof options === 'string' ? options : options.message;
 toastDom.type = options.type || 'success';
 toastDom.duration = options.duration || 3000;
 toastDom.position = options.position || 'middle';
 if(!toastDom.message){
 toastDom.showToast =singleToast= false;
 }else{
 toastDom.showToast=true;
 setTimeout(() => {toastDom.showToast =singleToast= false} ,toastDom.duration);
 }
}
// 将组件注册到 vue 的 原型链里去,
// 这样就可以在所有 vue 的实例里面使用 this.$toast()
// Vue.prototype.$toast = showToast
Vue.prototype.$toast = toast;
export default toast

设置singleToast和queue的目的在于:确保同一时期界面上只有一个toast,不能同时出现多个toast。

由于toast会初始化,因此为了避免在任何操作之前界面上就出现一个toast,用if语句判断:

如果没有传入的message,则不显示toast(这样可以使得初始化的toast不显示)

否则显示,并且过一定时间消失,只有singleToast为false,说明此刻界面上没有toast,才能再新建一个toast实例(因为此时if判断内queue.length 不为0【初始化的toast组件本身占了一个位置】,而singleToast为false,因此可以创建)

第三步:使用

在main.js 添加如下代码:

import toast from './components/toast/index'
Vue.use(toast)

创建需要调用的Vue文件:

<template>
 <div>
  <input type="button" value="显示弹窗" @click="showToast">
 </div>
</template>
 <script>
 export default {
  methods: {
   showToast () {
    this.$toast({message:'加载中',type:'loading',position:'bottom',
     duration:'2000'});
    // this.$toast('成功提示');
   }
  }
 }
 </script>

Vue自定义toast组件的实例代码

可以看到一共两种方式,可以以对象方式传入参数,也可以只传入字符串,其他采用默认设置。

总结

以上所述是小编给大家介绍的SVue自定义toast组件的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
详解JS面向对象编程
Jan 24 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
通过实例了解JS 连续赋值
Sep 24 Javascript
JavaScript中set与get方法用法示例
Aug 15 #Javascript
基于JavaScript实现瀑布流布局
Aug 15 #Javascript
解决Layui 表单提交数据为空的问题
Aug 15 #Javascript
jQuery轮播图实例详解
Aug 15 #jQuery
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 #Javascript
对layui中表单元素的使用详解
Aug 15 #Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 #jQuery
You might like
PHP 事件机制(2)
2011/03/23 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
限制文本字节数js代码
2007/03/06 Javascript
XML的代替者----JSON
2007/07/21 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
高级编程求职信模板
2014/02/16 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
护理专业自荐书
2014/06/04 职场文书
建设工地安全标语
2014/06/07 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
2014年招生工作总结
2014/11/26 职场文书
离婚协议书范文
2015/01/26 职场文书
劳动仲裁调解书
2015/05/20 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android