站长资源网络编程
vue封装可复用组件confirm,并绑定在vue原型上的示例
简介如下所示：首先我们需要创建 confirm.vue ， confirm.js这两个文件，一个实现dom结构，一个实现相关逻辑confirm.vue
如下所示：
首先我们需要创建 confirm.vue ， confirm.js这两个文件，一个实现dom结构，一个实现相关逻辑
confirm.vue
<template>
<div class="confirm" v-if="isShow">
<div class="con_box" >
<div class="context">
<h6>{{text.type}}</h6>
<p>{{text.msg}}</p>
<div class="btn">
<span @click="close()" v-if="text.btn.no">{{text.btn.no}}</span>
<span @click="ok()" v-if="text.btn.ok">{{text.btn.ok}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
isShow:true,
text:{
type:'提示',
msg:'确定删除此条信息？',
btn:{
ok:'确定',
no:'取消'
},
}
}
},
methods:{
close(){
console.log('关闭');
},
ok(){
console.log('确定')
}
}
}
</script>
<style scoped>
.confirm{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);}
</style>
confirm.js
import Vue from 'vue';
import confirm from './confirm.vue';
let confirmConstructor = Vue.extend(confirm);
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(confirmDom.$el); //new一个对象，然后插入body里面
confirmDom.text = text; //为了使confirm的扩展性更强，这个采用对象的方式传入，所有的字段都可以根据需求自定义
confirmDom.ok = function () {
res()
confirmDom.isShow = false
}
confirmDom.close = function () {
rej()
confirmDom.isShow = false
}
})
}
export default theConfirm;
//暴露出去，别忘记挂载到vue的原型上
// => 在main.js里面先引入 import theConfirm from './components/confirm/confirm.js'
// => 再挂载 Vue.prototype.$confirm = theConfirm;
//在需要的地方直接用以下方法调用即可：
// 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/confirm.js'
Vue.prototype.$confirm = theConfirm;
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
helloworld.vue
<template>
<div class="hello">
<span @click="handMe()">点击一下</span>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
}
},
methods:{
handMe(){
this.$confirm({
type:'提示',
msg:'是否删除这条信息？',
btn:{
ok:'yes',
no:'no'
}
}).then(() => {
console.log('ok')
})
.catch(() => {
console.log('no')
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
span{font-size: 24px;}
</style>
以上这篇vue封装可复用组件confirm,并绑定在vue原型上的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。