nutUI的toast提示框组件源码，教你一步一步，封装公共组件
话不多说，这个篇博客只为了，将toast组件原滋原味的放到自己的项目，看源码，理解大致意思，后续会去封装属于自己的组件
首先：在components文件夹中创建如下文件：
下面我将按照逻辑顺序将各个文件的源码贴出来：
index.js: (可以看到，给toast对象添加了自定义方法install，用来在vue实例上挂载组件)
import Toast from './_toast'; import './toast.scss'; Toast.install = function (Vue) { Vue.prototype['$toast'] = Toast; } export default Toast;
_toast.js：
这个js文件主要用Vue的extend方法来把自己写的vue文件传进去，创建一个构造器，然后再渲染，最后挂载在body上；主要代码在红色的代码上；最后抛出了一个toast对象。
import Vue from "vue"; import settings from "./toast.vue"; let ToastConstructor = Vue.extend(settings); let instance;//实例 let instanceArr = [];//实例列表 let defaultOptionsMap = {};//默认配置参数地图 const defaultOptions = {//默认配置参数 msg: "",//提示语 visible: false,//是否显示 duration: 2000, //显示时间(毫秒) timer: null,//计时器 center: true,//位置 type: "",//类型 customClass: "",//自定义类名 bottom: 300,//距离底部多少距离 size: "base",//大小 icon: null,//icon textAlignCenter: true, loadingRotate: true, bgColor: "rgba(36, 36, 36, 0.8)",//北京颜色 onClose: null, textTimer: null, cover: false, //透明遮罩层 coverColor: "rgba(0, 0, 0, 0)", timeStamp: null,//时间戳 closeOnClickOverlay: false, }; let currentOptions = { ...defaultOptions }; function _showToast() { instance.vm = instance.$mount(); document.body.appendChild(instance.$el); Vue.nextTick(() => { instance.visible = true; }); } function _getInstance(obj) { //获取实例 let opt = { id: new Date().getTime(), ...currentOptions,//默认配置 ...defaultOptionsMap[obj.type], ...obj,//传入的配置 }; //有相同id者共用一个实例，否则新增实例 if (opt["id"] && instanceArr[opt["id"]]) { instance = instanceArr[opt["id"]]; instance.hide(true); instance = Object.assign(instance, opt); } else { instance = new ToastConstructor({ //混入 data: Object.assign(opt, obj) }); opt["id"] && (instanceArr[opt["id"]] = instance); } _showToast(); return instance; } function errorMsg(msg) { if (!msg) { console.warn("[NutUI Toast]: msg不能为空"); return; } } let Toast = { text(msg, obj = {}) { errorMsg(msg); return _getInstance({ ...obj, msg, type: "text" }); }, success(msg, obj = {}) { errorMsg(msg); return _getInstance({ ...obj, msg, type: "success" }); }, fail(msg, obj = {}) { errorMsg(msg); return _getInstance({ ...obj, msg, type: "fail" }); }, warn(msg, obj = {}) { errorMsg(msg); return _getInstance({ ...obj, msg, type: "warn" }); }, loading(msg, obj = {}) { obj = { ...obj, id: obj.id || "loading", msg, type: "loading" }; obj.cover = typeof obj.cover !== "undefined" ? obj.cover : true; //loading类型默认打开遮罩层 obj.duration = obj.duration || 0; //loading类型默认不自动关闭 return _getInstance(obj); }, setDefaultOptions(type, options) { if (typeof type === "string") { defaultOptionsMap[type] = options; } else { Object.assign(currentOptions, type); } }, resetDefaultOptions(type) { if (typeof type === "string") { defaultOptionsMap[type] = null; } else { currentOptions = { ...defaultOptions }; defaultOptionsMap = {}; } } }; export default Toast;
再来看一下toast.vue文件：这是模板文件
<template> <transition name="toastfade"> <div :id="id" :class="toastClass" v-if="visible" :style="{ bottom: center ? 'auto' : bottom + 'px', 'background-color': coverColor }" @click="clickCover" > <div class="nut-toast-inner" :style="{ 'text-align': textAlignCenter ? 'center' : 'left', 'background-color': bgColor }" > <span v-if="hasIcon" class="nut-toast-icon-wrapper"> <i :class="[ 'nut-toast-icon', type, { 'nut-toast-icon-rotate': type === 'loading' && loadingRotate } ]" :style="{ 'background-image': cusIcon }" ></i> </span> <span class="nut-toast-text" v-html="msg"></span> </div> </div> </transition> </template> <script> export default { name: "nut-toast", props: {}, data() { return { id: "", msg: "", visible: false, duration: 2000, //显示时间(毫秒) timer: null, center: true, type: "", customClass: "", bottom: 30, size: "base", icon: null, textAlignCenter: true, loadingRotate: true, bgColor: "rgba(46, 46, 46, 0.7)", onClose: null, textTimer: null, cover: false, coverColor: "rgba(0, 0, 0, 0)", timeStamp: null, closeOnClickOverlay: false }; }, watch: { visible(val) { if (val) { this.show(); } } }, computed: { cusIcon() { return this.icon ? `url("${this.icon}")` : ""; }, toastClass() { return [ "nut-toast", { "nut-toast-center": this.center }, { "nut-toast-has-icon": this.hasIcon }, { "nut-toast-cover": this.cover }, { "nut-loading": this.type == "loading" }, this.customClass, "nut-toast-" + this.size ]; }, hasIcon() { if (this.type !== "text") { return true; } else { return this.cusIcon; } } }, methods: { show(force) { this.clearTimer(); clearTimeout(this.textTimer); if (this.duration) { this.timer = setTimeout(() => { this.hide(force); }, this.duration); } }, hide(force) { this.clearTimer(); this.visible = false; if (force) { clearTimeout(this.textTimer); } else { this.textTimer = setTimeout(() => { clearTimeout(this.textTimer); this.msg = ""; }, 300); } typeof this.onClose === "function" && this.onClose(); }, clearTimer() { if (this.timer) { clearTimeout(this.timer); this.timer = null; } }, clickCover() { if (this.closeOnClickOverlay) { this.hide(); } } }, destroyed() { this.textTimer = null; this.timer = null; } }; </script>
以上是主要的js文件，下面把两个样式文件也贴上，这个组件样式和逻辑代码使用的都很巧妙，不能说哪个重要哪个不重要：
toast.scss
@import "./animation/rotate"; .nut-toast { position: fixed; left: 0; bottom: 150px; width: 100%; text-align: center; pointer-events: none; z-index: 9999; font-family: $font-family; &.nut-toast-small { .nut-toast-inner { font-size: $font-size-small; } } &.nut-toast-large { .nut-toast-inner { font-size: $font-size-large; } } &.nut-toast-cover { display: flex; align-items: center; justify-content: center; pointer-events: auto; height: 100%; } .nut-toast-inner { position: relative; display: inline-block; font-size: $font-size-base; max-width: 65%; text-align: center; line-height: 1.5; padding: 10px 30px; word-break: break-all; background: rgba(46, 46, 46, .8); border-radius: 7px; color: #fff; } &.nut-toast-has-icon { .nut-toast-inner { padding: 70px 50px 30px; } .nut-toast-icon-wrapper { position: absolute; left: 0; top: 20px; width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; } .nut-toast-icon { display: inline-block; width: 30px; height: 30px; background-repeat: no-repeat; background-size: 100%; &.success { background-image: url("data:image/svg+xml,%3Csvg width='48' height='46' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd' %3E%3Cpath d='M8 0h18c11.046 0 20 8.954 20 20v18a8 8 0 0 1-8 8H20C8.954 46 0 37.046 0 26V8a8 8 0 0 1 8-8z' fill='rgb(255,255,255)'/%3E%3Cpath d='M43.562 3L22.01 23.803l-4.855-4.557a2.934 2.934 0 0 0-4.147.132l-1.324 1.41a1 1 0 0 0 .045 1.414l9.047 8.49a2 2 0 0 0 2.763-.025L47.741 7.12 43.562 3z' fill='rgb(44,42,53)'/%3E%3C/g%3E%3C/svg%3E"); } &.fail { background-image: url("data:image/svg+xml,%3Csvg width='46' height='46' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M8 0h18c11.046 0 20 8.954 20 20v18a8 8 0 0 1-8 8H20C8.954 46 0 37.046 0 26V8a8 8 0 0 1 8-8z' fill='rgb(255,255,255)'/%3E%3Cg fill='rgb(44,42,53)'%3E%3Cpath d='M13.6 15.722l1.415-1.414a2 2 0 0 1 2.828 0L33.4 29.864a1 1 0 0 1 0 1.414l-1.414 1.414a2 2 0 0 1-2.828 0L13.6 17.136a1 1 0 0 1 0-1.414z'/%3E%3Cpath d='M33.4 15.722l-1.415-1.414a2 2 0 0 0-2.828 0L13.6 29.864a1 1 0 0 0 0 1.414l1.414 1.414a2 2 0 0 0 2.828 0L33.4 17.136a1 1 0 0 0 0-1.414z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } &.warn { background-image: url("data:image/svg+xml,%3Csvg width='46' height='46' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M8 0h18c11.046 0 20 8.954 20 20v18a8 8 0 0 1-8 8H20C8.954 46 0 37.046 0 26V8a8 8 0 0 1 8-8z' fill='rgb(255,255,255)'/%3E%3Cpath d='M23 23V12' stroke='rgb(44,42,53)' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M21 30h3a2 2 0 0 1 2 2v3a1 1 0 0 1-1 1h-3a2 2 0 0 1-2-2v-3a1 1 0 0 1 1-1z' fill='rgb(44,42,53)'/%3E%3C/g%3E%3C/svg%3E"); } &.loading { background: url("data:image/svg+xml, %3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgb(230,230,230)' d='M874.667 533.333h-192c-12.8 0-21.334-8.533-21.334-21.333 0-12.8 8.534-21.333 21.334-21.333h192c12.8 0 21.333 8.533 21.333 21.333 0 12.8-8.533 21.333-21.333 21.333zM648.533 407.467C640 416 627.2 416 618.667 407.467c-8.534-8.534-8.534-21.334 0-29.867L755.2 241.067c8.533-8.534 21.333-8.534 29.867 0 8.533 8.533 8.533 21.333 0 29.866L648.533 407.467zM512 896c-12.8 0-21.333-8.533-21.333-21.333v-192c0-12.8 8.533-21.334 21.333-21.334s21.333 8.534 21.333 21.334v192c0 12.8-8.533 21.333-21.333 21.333zm0-533.333c-12.8 0-21.333-8.534-21.333-21.334v-192c0-12.8 8.533-21.333 21.333-21.333s21.333 8.533 21.333 21.333v192c0 12.8-8.533 21.334-21.333 21.334zM270.933 782.933c-8.533 8.534-21.333 8.534-29.866 0s-8.534-21.333 0-29.866L377.6 616.533c8.533-8.533 21.333-8.533 29.867 0 8.533 8.534 8.533 21.334 0 29.867L270.933 782.933zm104.534-375.466L238.933 270.933c-8.533-8.533-8.533-21.333 0-29.866s21.334-8.534 29.867 0L405.333 377.6c8.534 8.533 8.534 21.333 0 29.867-6.4 6.4-21.333 6.4-29.866 0zM362.667 512c0 12.8-8.534 21.333-21.334 21.333h-192C136.533 533.333 128 524.8 128 512c0-12.8 8.533-21.333 21.333-21.333h192c12.8 0 21.334 8.533 21.334 21.333zm285.866 104.533l136.534 136.534c8.533 8.533 8.533 21.333 0 29.866-8.534 8.534-21.334 8.534-29.867 0L618.667 646.4c-8.534-8.533-8.534-21.333 0-29.867 6.4-6.4 21.333-6.4 29.866 0z'/%3E%3C/svg%3E") no-repeat; background-size: cover; } } } &.nut-toast-center { top: 50%; transform: translateY(-50%); } &.nut-loading { .nut-toast-inner { padding: 25px; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; } .nut-toast-icon-wrapper { position: static; height: 30px; } .nut-toast-text:not(:empty) { margin-top: 10px; margin-bottom: -10px; } .nut-toast-icon { width: 40px; height: 40px; &.nut-toast-icon-rotate { animation: rotation 2s linear infinite; } } } } .toastfade-enter-active { transition: opacity 0.1s; } .toastfade-leave-active { transition: opacity 0.3s; } .toastfade-enter, .toastfade-leave-active { opacity: 0; }
animation/rotate.scss
@keyframes rotation { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @include make-animation(nutRotate);
将toast文件放到项目中后如何使用呢？？？
首先，在main.js中：注册一下
import toast from '@/components/toast';
toast.install(Vue);
在项目中使用：
this.$toast.success("123")
以上就是nutUI的toast组件的源码，主要是熟悉一下组件的封装，后续就可以封装属于自己的全局组件了！
。
