vue封装可复用组件confirm,并绑定在vue原型上的示例

如下所示：

首先我们需要创建 /confirm/i.vue ， /confirm/i.js这两个文件，一个实现dom结构，一个实现相关逻辑

/confirm/i.vue

./confirm/i{background-color:rgba(0, 0, 0, 0.6);width: 100%;height: 100%; position: fixed;top: 0;}
.con_box{width: 75%;height: 22%;background-color: white;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;border-radius: 5px;}
.context{padding: 10px;}
.context h6{font-size: 24px;padding: 15px;}
.context p{font-size: 20px;padding: 35px 15px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.btn{padding: 15px;text-align: right;}
.btn span{padding: 10px 35px; color: white;border-radius: 5px;}
.btn span:nth-child(1){background-color: #f1f1f1;color: rgb(106, 223, 223);}
.btn span:nth-child(2){background-color: rgb(106, 223, 223);}

/confirm/i.js

import Vue from 'vue';
import confirm from './/confirm/i.vue';

let confirmConstructor = Vue.extend(/confirm/i);

let theConfirm = function (text) {
 return new Promise((res, rej) => { //promise封装，ok执行resolve，no执行rejectlet
  let confirmDom = new confirmConstructor({ 
  el: document.createElement('div')
  })
  document.body.appendChild(/confirm/iDom.$el); //new一个对象，然后插入body里面

  /confirm/iDom.text = text; //为了使/confirm/i的扩展性更强，这个采用对象的方式传入，所有的字段都可以根据需求自定义
  /confirm/iDom.ok = function () {
  res()
  /confirm/iDom.isShow = false
  }
  /confirm/iDom.close = function () {
  rej()
  /confirm/iDom.isShow = false
  }

 })
 }

 export default the/confirm/i; 
 
 //暴露出去，别忘记挂载到vue的原型上 
 // => 在main.js里面先引入 import theConfirm from './components//confirm/i//confirm/i.js'
 // => 再挂载 Vue.prototype.$confirm = the/confirm/i;
 //在需要的地方直接用以下方法调用即可：
 // this.$confirm({
 //  type:'提示',
 //  msg:'是否删除这条信息？',
 //  btn:{
 //   ok:'yes',
 //   no:'no'
 //  }
 // }).then(() => {
 //  console.log('ok')
 // })
 // .catch(() => {
 //  console.log('no')
 // })

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

//这里就是对组件的绑定
import theConfirm from './components//confirm/i//confirm/i.js'
Vue.prototype.$confirm = the/confirm/i;

Vue.config.productionTip = false

new Vue({
 el: '#app',
 router,
 components: { App },
 template: ''
})

helloworld.vue

span{font-size: 24px;}

以上这篇vue封装可复用组件/confirm/i,并绑定在vue原型上的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持趣学号。