Vue 实现一个命令式弹窗组件功能

</script>

<style scoped>
.wrap{
  position: fixed;
  top: 0;
  bottom:0;
  left:0;
  right:0;
  display:flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,.3);
}
.main{
  width: 30%;
  padding: 10px;
  background: #fff;
  box-shadow: 0 0 10px 1px #ddd;
  border-radius: 5px;
}
.content{
  color:#424242;
  font-size: 20px;
}
.btn-grounp{
  margin-top: 15px;
  display:flex;
  justify-content: flex-end;
}
.btn{
  margin-left: 15px;
  padding: 5px 20px;
  border-radius: 5px;
  font-size: 16px;
  color:#fff;
}
.confirm{
  background: lightblue;
}
.cancel{
  background: lightcoral;
}
</style>

index.js

import Vue from 'vue'
import comfirm from './index.vue'
let newInstance = null
//将vue组件变为构造函数
let ConfirmConstructor = Vue.extend(comfirm)
let init = (options)=>{
  //实例化组件
  newInstance = new ConfirmConstructor()
  //合并配置选项
  Object.assign(newInstance,options)
  //加载dom
  document.body.appendChild(newInstance.$el)
}
let caller = (options)=>{
  //options 为调用组件方法时传入的配置选项
  if(!newInstance){
    init(options)
  }
  return newInstance.show(vm =>{newInstance = null})
}
export default {
  install(vue){
    vue.prototype.$Confirm = caller
  }
}

main.js

上面我对外暴露的对象中含有install方法，这里可以使用Vue.use注册组件（使用Vue.use后，会查找install方法进行调用），将组件调用方法挂载到Vue原型上。

import Confirm from './components/confirm'
Vue.use(Confirm)

写在最后

这个弹窗组件比较简陋，还有很多地方可以完善，等有时间再搞了~

总结

以上所述是小编给大家介绍的Vue 实现一个命令式弹窗组件功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！