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 相关文章推荐
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
利用json获取字符出现次数的代码
Mar 22 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
js实现简单的计算器功能
Jan 16 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
详解Vue.js 响应接口
Jul 04 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 park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
php中随机显示图片的函数代码
2011/06/23 PHP
php设计模式 Strategy(策略模式)
2011/06/26 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
YII实现分页的方法
2014/07/09 PHP
JS 面向对象的5钟写法
2009/07/31 Javascript
js闭包实例汇总
2014/11/09 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
python中函数传参详解
2016/07/03 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Python实现TCP通信的示例代码
2019/09/09 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
幼师自荐信
2013/10/26 职场文书
秋季运动会表扬稿
2014/01/16 职场文书
大学毕业生推荐信
2014/07/09 职场文书
品牌转让协议书
2014/08/20 职场文书
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
Python if else条件语句形式详解
2022/03/24 Python