github地址：https://github.com/501351981/vue_yii_cms

在后台弹窗确认也是一个常用的组件，比如在删除时，弹窗提醒用户确认，由于这部分经常使用，而且代码量也很小，所以也考虑做成插件的形式

confirm组件比较简单，可能的数据属性有标题、内容、确定文字内容，确定后的回调函数、取消的文字内容、取消的回调、是否显示取消按钮

我们还是采取插件的形式开发

在src/components/plugins下创建confirm文件夹，然后创建两个文件，Confirm.vue 和index.js

confirm.vue

比较简单，看源码

<template>
  <transition name="fade">
   <div class="confirm" v-show="isShow">
     <div class="confirm-content">
       <div class="title">{{confirm.title}}</div>
       <div class="content">{{confirm.content}}</div>
       <div class="btn-area">
         <div class="btn btn-primary" @click="onOk">{{confirm.confirmText}}</div>
         <div class="btn btn-default" v-if="confirm.showCancel" @click="onCancle">{{confirm.cancelText}}</div>
       </div>
     </div>

   </div>
  </transition>

</template>
<script>
 export default {
    name:'Confirm',
 data:function () {
      return {
        confirm:{
          title:'提醒',
 content:'',
 confirmText:'确定',
 cancelText:'取消',
 showCancel:true,
 success:'',
 fail:''
 },
 isShow:false

 }
    },
 methods:{
      onOk:function () {
        if(typeof(this.confirm.success)=='function'){
          this.confirm.success()
        }
        this.isShow=false
 },
 onCancle:function () {
        if(typeof(this.confirm.fail)=='function'){
          this.confirm.fail()
        }
        this.isShow=false
 },
 show:function (opt) {
        this.confirm=opt
        this.isShow=true
 }
    }
  }

</script>

<style scoped lang="less">
 .confirm{
    position: fixed;
 width: 100%;
 height: 100%;
 left: 0;
 top:0;
 z-index: 9999;
 background-color: rgba(0,0,0,0.4);

 .confirm-content{
      width: 280px;
 box-sizing: border-box;
 background: white;
 position: absolute;
 left: 50%;
 top:50%;
 margin-left: -140px;
 margin-top: -80px;
 border-radius: 10px;
 text-align: center;
 }
    .title{
      font-size: 18px;
 color: black;
 padding-top: 25px;
 }
    .content{
      font-size: 15px;
 line-height: 18px;
 /*color: #999999;*/
 padding: 30px 20px;
 }
    .btn-area{
      width: 100%;
 height: 50px;
 line-height: 50px;
 border-top: 1px solid #eeeeee;
 display: flex;
 justify-content: center;
 align-items: center;
 .btn{
        margin-left: 10px;
 margin-right: 10px;
 border-radius: 0;
 }

    }
  }
</style>

index.js 

import vue from 'vue'
import confirmComponent from './Confirm.vue'

var Confirm={}

Confirm.install=function (vue) {
  let ConfirmConstructor = vue.extend(confirmComponent)
  let ConfirmDom=new ConfirmConstructor()
  let tpl=ConfirmDom.$mount().$el

  document.body.appendChild(tpl)

  vue.prototype.$confirm=function (options) {
    let opt={
      title:'提醒',
      content:'',
      confirmText:'确定',
      cancelText:'取消',
      showCancel:true,
      success:'',
      fail:''
    }

    Object.assign(opt,options)

    ConfirmDom.show(opt)

  }

}

export default Confirm

main.js

import confirmRegistry from './components/plugins/confirm/index'
Vue.use(confirmRegistry)

项目中使用

this.$confirm({
  content:"删除操作不能恢复，您确定要删除吗",

  success:function () {
    ... //点击确定按钮进行的处理
  },
  fail:function(){
    ... //点击取消按钮之后的处理 
  }
})