Vue 组件封装之 Toast 弹框

一、Toast 弹框

组件说明：
实现弹框功能。

效果展示：

有图片

没有图片

实现的功能：

1. 根据某个判断条件或者点击某个按钮，弹出弹框；
2. 可配置项有：图片，标题，详情，关闭及查看文字描述，关闭及查看事件。点击【关闭】关闭弹框，可拓展关闭事件，点击【查看】可拓展查看事件。

二、使用案例

使用div：

<template>
     <div @click.stop="submit">提交</div>
</template>
<script>
import goldDetail from '../assets/goldDetail.png';
import Toast from '../../../share/toast/index';
export default {
  methods: {
    submit(){
       Toast({
              img:goldDetail,
              title: '温馨提示',
              message: '您好，你的钉钉账户未绑定门禁卡号，无法查询明细。请点击查看按钮了解如何绑定。',
              onClose:()=>{

              },
              onLook:()=>{
                this.showImg = true;
              }
            });
      }
  }
}
</script>	

三、API 使用指南

属性	说明	类型	默认值
img	配置图片	String	无
btnLeftText	左边按钮文字	String	关闭
btnLeftText	右边按钮文字	String	查看
title	标题	String	温馨提示
onClose	点击关闭回调事件	Function	–
onLook	点击查看回调事件	Function	–

四、源代码

main.vue
文件路径：share/src/main.vue

<template>
  <div class="toast-container">
    <div class="toast-content">
      <img :src="img" v-if="img" alt="" height="160" class="toast-img-radius">
      <div class="cm-flex-column cm-p-16-20">
        <div class="toast-title">{{title||"温馨提示"}}</div>
        <div class="toast-detail cm-mt-10">{{message}}</div>
      </div>
      <div class="cm-flex cm-border-top cm-w-full cm-jc-sa">
        <div class="toast-close cm-p-10 cm-w-half" @click.stop="close">{{btnLeftText||"关闭"}}</div>
        <div class="toast-look cm-p-10 cm-w-half" @click.stop="look">{{btnRightText||"查看"}}</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        message:"",
      }
    },
    created(){
        console.log(this)
    },
    watch: {
    },
    methods:{
      close() {
        this.$el.parentNode.removeChild(this.$el);
        if (typeof this.onClose === 'function') {
          this.onClose();
        }
      },
      look(){
        if (typeof this.onLook === 'function') {
            //先关闭弹框
          this.onClose();
          this.onLook();
        }
      }
    }
  }
</script>
<style>
  .toast-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
  }
  .toast-content{
    width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 3px;
  }
  .toast-title{
    text-align: center;
    font-size: 17px;
    font-weight:bold;
    color: #333;
  }
  .toast-detail{
    text-align: center;
    font-size: 13px;
    color: #999;
  }
  .toast-close{
    font-size:17px;
    color:rgba(50,150,250,1);
    text-align: center;
  }
  .toast-look{
    font-size:17px;
    border-left:1px solid #ddd;
    font-weight:bold;
    color:rgba(50,150,250,1);
    text-align: center;
  }
  .toast-img-radius{
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
</style>

main.js
文件路径：share/src/main.vue

import Vue from 'vue';
import Main from './main.vue';
const ToastConstructor = Vue.extend(Main);
let instance;
const Toast = function(options) {
  if (Vue.prototype.$isServer) return;
  instance = new ToastConstructor({
    data: options
  });
  instance.$mount();
  document.body.appendChild(instance.$el);
  return instance;
};
export default Toast;

index.js
文件路径：share/index.js

import Toast from './src/main.js';
export default Toast;

注：里面用到一些公共样式，公共样式内容比较多，就不贴出来了。有需要的留言。