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;

注：裏面用到一些公共樣式，公共樣式內容比較多，就不貼出來了。有需要的留言。