vue自定义$confirm弹窗确认组件
前言1.Vue.extend()使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象.vue单文件经过webpack打包之后是一个组件示例对象,因此可以传到Vue.extend中生成一个包含此组件的类2.new VueComponent().$mount()new VueComponent() 创建实例,调用$mount()可以手动编译如果.$mount(’#app’)有参数,
·
前言
1.Vue.extend()
使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象
.vue单文件经过webpack打包之后是一个组件示例对象,因此可以传到Vue.extend中生成一个包含此组件的类
2.new VueComponent().$mount()
new VueComponent() 创建实例,调用$mount()可以手动编译
如果.$mount(’#app’)有参数,表示手动编译并且挂载到该元素上。
3.$el属性 类型:string | HTMLElement
手动编译后的示例对象中存在一个$el对象(dom元素),可以作为模板被插入到页面中。
4.Vue.prototype 添加 Vue 实例方法
源码
vue文件
<template>
<div :class="{'pop-up':true,'show':show}">
<div class="popup-mask" v-if="hasMark"></div>
<transition name="bottom">
<div class="popup-note bottom">
<div class="pop-content">
<div class="pop-tit">
{{title}}
</div>
<p class="pop-note hasTitle">
<span class="msg" v-html="msg"></span>
</p>
<div class="btn-wrapper" v-if="type == 'alert'" @click.stop="alertClick">
<span class="btn btn-block yes-btn">{{alertBtnText}}</span>
</div>
<div class="btn-wrapper" v-if="type == 'confirm'">
<span @touchstart.prevent="noClick" class="btn">{{noBtnText}}</span>
<span @touchstart.prevent="yesClick" class="btn yes-btn">{{yesBtnText}}
</span>
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: '提示'
},
msg: {
type: String,
default: ''
},
type: {
type: String,
default: 'alert'
},
alertBtnText: {
type: String,
default: '我知道了'
},
yesBtnText: {
type: String,
default: '确定'
},
noBtnText: {
type: String,
default: '取消'
},
hasMark: {
type: Boolean,
default: true
}
},
data() {
return {
promiseStatus: null,
show: false
}
},
methods: {
confirm() {
let _this = this;
this.show = true;
return new Promise(function (resolve, reject) {
_this.promiseStatus = {resolve, reject};
});
},
noClick() {
this.show = false;
this.promiseStatus && this.promiseStatus.reject();
},
yesClick() {
this.show = false;
this.promiseStatus && this.promiseStatus.resolve();
},
alertClick() {
this.show = false;
this.promiseStatus && this.promiseStatus.resolve();
}
}
}
</script>
<style lang='less'>
@import "../../../static/less/components/tip/index.less";
</style>
confirm.js
import Vue from 'vue'
import message from './message.vue'
const VueComponent = Vue.extend(message);
const vm = new VueComponent().$mount();
let init = false;
let defaultOptions = {
yesBtnText: '确定',
noBtnText: '取消'
};
const confirm = function (options) {
Object.assign(vm,defaultOptions , options,{
type:'confirm'
});
if (!init) {
document.body.appendChild(vm.$el);
init = true;
}
return vm.confirm();
};
export default confirm;
全局注册
import confirm from './views/components/message/confirm'
Vue.prototype.$confirm = confirm;
使用
this.$confirm({
title: '',
msg: '模式未保存,确定离开?',
yesBtnText: "离开"
}).then(() => {
console.log('yes')
})
.catch(() => {
console.log('cancel')
});
更多推荐
已为社区贡献19条内容
所有评论(0)