vue 公用组件开发 确认框confirm

 

文件目录：

 

github地址：https://github.com/xingkongwuyu/vue-spa-experience/tree/master/src/components

最终的效果：

 

 组件的源码解析：

confirm ：  confirm的框架

./index.js

import confirmBox from './src/index';
export default {
    install(Vue) {
      Vue.prototype.$confirm = confirmBox;
    },
  };

 

使用transition来实现动画效果

<template>
<transition name="mei-modal-fade">
    <div v-show="show" class="mei-modal" tabindex="-1" role="dialog" aria-labelledby="bombConfirmLabel" aria-hidden="false">
        <div class="mei-modal-mask"></div>
        <div class="mei-modal-wrap">
            <div class="mei-modal-content">
                <i class="mei-icon-close" @click="onClosed">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1515657730389" class="icon" style="" 
                    viewBox="0 0 1024 1024" version="1.1" p-id="2915" width="40" height="40"><path d="M557.311759 513.248864l265.280473-263.904314c12.54369-12.480043 12.607338-32.704421 0.127295-45.248112-12.512727-12.576374-32.704421-12.607338-45.248112-0.127295L512.127295 467.904421 249.088241 204.063755c-12.447359-12.480043-32.704421-12.54369-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.280796l262.975407 263.775299-265.151458 263.744335c-12.54369 12.480043-12.607338 32.704421-0.127295 45.248112 6.239161 6.271845 14.463432 9.440452 22.687703 9.440452 8.160624 0 16.319527-3.103239 22.560409-9.311437l265.216826-263.807983 265.440452 266.240344c6.239161 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.311759 513.248864z" p-id="2916"/></svg>
                </i>
                   <div class="mei-modal-header">
                    <p>{{title}}</p>
                </div>
                <div class="mei-modal-body">
                    <div class="mei-status-icon-box">
                    </div>
                   <p v-if="!dangerouslyUseHTMLString">{{ text }}</p>
                   <p v-else v-html="text"></p>
                </div>
                <div class="mei-modal-footer">
                    <button type="button" class="mei-btn mei-btn-primary" id="confirmButtons1" @click="button[0].ontap">{{button[0].text}}</button>
                    <button type="button" class="mei-btn mei-btn-text" id="confirmButtons1" @click="button[1].ontap">{{button[1].text}}</button>
                </div>
            </div>
        </div>
    </div>
</transition>
</template>

<script>
    export default {
        data() {
            return {
                show: true,
                title: '1212',
                text: '12121111112',
                button: [],
                dangerouslyUseHTMLString:false
            }
        },
         methods:{
                onClosed(){
                    this.close();
                }
        }

    }
</script>

<style lang="scss" rel="stylesheet">
  @import "./../../../css/component.scss";
  .mei-modal-fade-enter,.mei-modal-fade-leave-to{
       transform: scale(0);
  }
  .mei-modal-fade-enter-active{
       animation: bounce-in 2s;
  }
   .mei-modal-fade-leave-active{
       animation: bounce-in 2s reverse;
  }
@keyframes bounce-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>

 

 ./src/index.jsimport Vue from 'vue';

import confirmVue from './confirm.vue';
//参数配置
const defaults = {
    show:false,
    title:'',
    text:'',
    button:[]

};
let confirmVueLoading;
const confirmVueConstructor = Vue.extend(confirmVue);
//这里关闭的时候返回promise
confirmVueConstructor.prototype.close = function() {
    var vm=this;
    confirmVueLoading=null;
    var promise=new Promise(function(resolve,reject){
            if (vm.$el && vm.$el.parentNode) {
                vm.$el.parentNode.removeChild(vm.$el);
            }
            resolve();
            vm.$destroy();
            vm.show = false;
    })
    return promise
};
const confirmBox = (options = {}) => {
    if (Vue.prototype.$isServer) return;
    console.log(options);
    options = Object.assign({}, defaults, options);
    let parent = document.body ;
   //没有关闭不允许新开
    if(confirmVueLoading){
      return confirmVueLoading
    }
    let instance = new confirmVueConstructor({
      el: document.createElement('div'),
      data: options
    });
  
    parent.appendChild(instance.$el);
    Vue.nextTick(() => {
      instance.show = true;
    });
    confirmVueLoading=instance
    return instance;
  };
  
  export default confirmBox;

 

引入全局 使用：

import VueConfirm from './components/confirm'

Vue.use(VueConfirm)

methods：{
  confirm () {
          var content = ` <div class="title">11111</div>`
          var vm=this
         const confirm = this.$confirm({
          title:'23232',
          text:content,
          dangerouslyUseHTMLString:true,
          button:[{
                text: '确定',
                ontap: function () {
                    confirm.close().then(function(res){
                     console.log(111233233231)
                   });
                }},
                {
                text: '取消',
                ontap: function () {
                  
                   confirm.close().then(function(res){
                       console.log('close')
                   });
                }
            }]
    
        });
     },
}

 

配置项：title ：标题

        text：内容，

      dangerouslyUseHTMLString：内容是否是html；
      button：按钮
             text：按钮名称

             ontap：点击后的函数