手写Vue弹窗Modal的实现代码

}
}, content)
}
},
render(h) {
return this.createBox(h)
}
}
</script>

<style scoped>
#__confirm {
position: fixed;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
}
#__confirm .bg {
position: fixed;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
}
#__confirm .box-container {
position: absolute;
width: 500px;
padding: 20px;
padding-top: 30px;
border-radius: 3px;
background: #fff;
z-index: 1;
box-shadow: 2px 2px 10px rgba(0,0,0,0.4);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#__confirm .content-box {
font-size: 14px;
line-height: 20px;
margin-bottom: 10px;
}
#__confirm .btn-box {
margin-top: 20px;
text-align: right;
}
#__confirm .close-btn {
position: absolute;
top: 15px;
right: 20px;
font-size: 16px;
color: #666666;
}
#__confirm .close-btn:hover {
color: #1593FF;
}
#__confirm .bg {
position: fixed;
}
</style>

然后创建confirm.js

'use strict'
import Confirm from './Confirm.vue'
const confirmConstructor = Vue.extend(Confirm)
const ConfirmViewStyle = config => {
  const confirmInstance = new confirmConstructor({
    data() {
      return {
        config
      }
    }
  })
  confirmInstance.vm = confirmInstance.$mount()
  confirmInstance.dom = confirmInstance.vm.$el
  document.body.appendChild(confirmInstance.dom)
}
const close = () => {
  let dom = document.querySelector('body .modelServe-container')
  dom && dom.remove()
  Vue.prototype.$receive = null
}
const closeConfirm = () => {
  let dom = document.getElementById('__confirm')
  dom && dom.remove()
  Vue.prototype.$confirm = null
}
function install(Vue) {
  Vue.prototype.modelServe = {
    confirm: (obj) => {
      return new Promise(resolve => {
        Vue.prototype.$confirm = (data) => {
          resolve(data)
          closeConfirm()
        }
        ConfirmViewStyle(obj)
      })
    }
  }
  Vue.prototype.$dismiss = close
  Vue.prototype.$cancel = closeConfirm
}
Vue.use(install)
export default install

思路很简单，在我们创建的时候同时返回一个promise，同时将resolve通行证暴露给vue的一个全局方法也就是将控制权暴露给外部，这样我们就可以向这样，我上面的confiram.vue是直接把取消绑定成了$cancel,把确定绑定成了$confirm,所以点击确定会进入full，也就是.then中，当然你也可以传参数