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=instancereturn instance;};export default confirmBox;

 

引入全局 使用：

import VueConfirm from './components/confirm'

Vue.use(VueConfirm)

methods：{confirm () {var content = ` <div class="title">11111</div>`var vm=thisconst 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：点击后的函数