Vue 组件封装之 Toast 弹框

忘是亡心i 2023-02-09 10:25 44阅读 0赞

### Vue 组件封装之 Toast 弹框 ###

*  一、Toast 弹框
 *  二、使用案例
 *  三、API 使用指南
 *  四、源代码

# 一、Toast 弹框 #

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

**效果展示：**

有图片  
![在这里插入图片描述][20200518153022731.png]  
没有图片  
![在这里插入图片描述][20200518165229724.png]

**实现的功能：**

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 使用指南 #

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="right">说明</th> 
   <th align="center">类型</th> 
   <th align="center">默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>img</td> 
   <td align="right">配置图片</td> 
   <td align="center">String</td> 
   <td align="center">无</td> 
  </tr> 
  <tr> 
   <td>btnLeftText</td> 
   <td align="right">左边按钮文字</td> 
   <td align="center">String</td> 
   <td align="center">关闭</td> 
  </tr> 
  <tr> 
   <td>btnLeftText</td> 
   <td align="right">右边按钮文字</td> 
   <td align="center">String</td> 
   <td align="center">查看</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td align="right">标题</td> 
   <td align="center">String</td> 
   <td align="center">温馨提示</td> 
  </tr> 
  <tr> 
   <td>onClose</td> 
   <td align="right">点击关闭回调事件</td> 
   <td align="center">Function</td> 
   <td align="center">–</td> 
  </tr> 
  <tr> 
   <td>onLook</td> 
   <td align="right">点击查看回调事件</td> 
   <td align="center">Function</td> 
   <td align="center">–</td> 
  </tr> 
 </tbody> 
</table>

# 四、源代码 #

main.vue  
文件路径：share/toast/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/toast/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/toast/index.js

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

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

[20200518153022731.png]: https://img-blog.csdnimg.cn/20200518153022731.png
[20200518165229724.png]: https://img-blog.csdnimg.cn/20200518165229724.png