對(duì)于confirm組件谊惭，我總共試過以下三種方式去實(shí)現(xiàn)汽馋，最后還是選擇了用直接通過this調(diào)用promise方法的形式。
一圈盔、使用的地方引用豹芯，傳入屬性和方法
在需要的地方引入組件，然后傳入對(duì)應(yīng)的屬性和方法
組件
<template>
<div :class="{'pop-up':true,'show':isShow}">
<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="alertClick">
<span class="btn btn-block yes-btn">{{alertBtnText}}</span>
</div>
<div class="btn-wrapper" v-if="type == 'confirm'">
<span @touchstart="noClick" class="btn">{{noBtnText}}</span>
<span @touchstart="yesClick" class="btn yes-btn">{{yesBtnText}}</span>
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
export default {
props: {
isShow: {
type: Boolean,
default: false
},
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
}
},
methods: {
noClick() {
this.$emit('noClick');
},
yesClick() {
this.$emit('yesClick');
},
alertClick() {
this.$emit('alertClick');
}
}
}
</script>
<style lang='less'>
@import "../../../static/less/components/tip/index.less";
</style>
使用
<template>
<div>
<message
type="confirm"
:title="confirmTitle"
:msg="confrimMsg"
:isShow="isConfirmShow"
yesBtnText="覆蓋"
@noClick="cancelDel"
@yesClick="doDel">
</message>
</div>
</template>
<script>
import Message from '../components/message/message.vue'
export default {
components: {
Message
},
data() {
return {
isConfirmShow: false,
confirmTitle: '計(jì)劃沖突',
confrimMsg: ''
}
},
methods:{
//取消
cancelDel() {
this.isConfirmShow = false;
},
//確定
doDel() {
this.isConfirmShow = false;
}
}
}
</script>
這種方式的問題在于在每個(gè)使用的地方都需要引用,如果組件使用頻率比較多就不適合這樣寫驱敲，因?yàn)轫?xiàng)目一般是會(huì)使用懶加載的铁蹈，如果使用過多可以寫到公共文件里邊，不需要每次使用到的地方都去加載一次众眨。
另外 如果在遇到以下情景握牧，使用起來也會(huì)特別的不方便。在離開路由前需要彈出一個(gè)確定框娩梨，點(diǎn)擊確定執(zhí)行next(),點(diǎn)擊取消執(zhí)行next(false)沿腰，如果按照這種方式的話需要提前定義好cancelDel和doDel方法，這個(gè)時(shí)候不好把next傳遞給這兩個(gè)方法狈定，只能通過一個(gè)變量或熟悉把next存起來颂龙，這樣使用起來也不方便，并且閱讀起來也會(huì)比較困難掸冤。
beforeRouteLeave(to, from, next) {
this.$confirm({
title: '',
msg: '模式未保存厘托，確定離開？',
yesBtnText: "離開"
}).then(() => {
next();
}).catch(() => {
next(false);
});
},
二稿湿、全局引入組件铅匹，使用vuex控制組件的顯示
組件代碼
<template>
<div :class="{'pop-up':true,'show':isShow}">
<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 @click.prevent="noClick" class="btn">{{noBtnText}}</span>
<span @click.prevent="yesClick" class="btn yes-btn">{{yesBtnText}}</span>
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
computed: mapState({
title: state => state.confirm.title,
isShow: state => state.confirm.isShow,
msg: state => state.confirm.msg,
type: state => state.confirm.type,
hasMark: state => state.confirm.hasMark,
alertBtnText: state => state.confirm.alertBtnText,
noBtnText: state => state.confirm.noBtnText,
yesBtnText: state => state.confirm.yesBtnText,
}),
methods: {
alertClick() {
this.$store.commit('alertClick')
},
noClick() {
this.$store.commit('noClick')
},
yesClick() {
this.$store.commit('yesClick')
}
}
}
</script>
<style lang='less' type="text/less" scoped>
@import "../../../static/less/components/tip/index.less";
</style>
vuex部分代碼
let yesCallBack = () => {};
let noCallBack = () => {};
let alertCallBack = () => {};
export default {
state: {
title: '',
isShow: false,
msg: '',
type: 'confirm',
hasMark: true,
alertBtnText: '',
noBtnText: '取消',
yesBtnText: '確定',
},
mutations: {
confirm(state, data) {
Object.assign(state, {
title: data.title,
isShow: true,
msg: data.msg,
type: 'confirm',
hasMark: data.hasMark === 'undefined' ? true : data.hasMark,
alertBtnText: data.alertBtnText,
noBtnText: data.noBtnText || '取消',
yesBtnText: data.yesBtnText || '確定',
});
let yesCb = data.yesClick;
let noCb = data.noClick;
if (yesCb) {
yesCallBack = yesCb;
} else {
yesCallBack = () => {
};
}
if (noCb) {
noCallBack = noCb;
} else {
noCallBack = () => {
};
}
},
alert(state, data) {
Object.assign(state, {
title: data.title,
isShow: true,
msg: data.msg,
type: 'alert',
hasMark: data.hasMark === 'undefined' ? true : data.hasMark,
alertBtnText: data.alertBtnText,
noBtnText: data.noBtnText || '取消',
yesBtnText: data.yesBtnText || '確定',
});
let alertCb = data.alertClick;
if (alertCb) {
alertCallBack = alertCb;
} else {
alertCallBack = () => {
};
}
},
noClick(state) {
noCallBack();
state.isShow = false;
},
yesClick(state) {
yesCallBack();
state.isShow = false;
},
alertClick(state) {
alertCallBack();
state.isShow = false;
}
}
}
使用
全局主文件寫入confirm
<template>
<div>
<router-view></router-view>
<confirm></confirm>
</div>
</template>
<script>
import confirm from './components/confirm/index.vue'
export default {
components: {
confirm
}
}
</script>
<style lang="less">
@import "../static/less/base.less";
</style>
在使用的地方寫入這樣調(diào)用即可
this.$store.commit('confirm', {
title: 'title',
msg: '是否確認(rèn)刪除',
yesClick: () => {
console.log('yes');
},
noClick: () => {
console.log('no');
}
});
這種方式的好處是不需要每個(gè)使用的地方都引入組件，只需要在主文件引入即可饺藤。但是這個(gè)方法寫的時(shí)候需要注意包斑，在每次調(diào)用賦值的時(shí)候需要將以前所有值清空流礁，避免屬性受上次調(diào)用影響。
這種方式相對(duì)來說比較麻煩罗丰，除了維護(hù)組件以外神帅，還要維護(hù)vuex的狀態(tài)，還需要提前把模板寫入頁面萌抵，相對(duì)來說比較麻煩找御。
三、直接通過this調(diào)用promise方法的形式
這種方式實(shí)用簡單绍填，閱讀起來也符合語義霎桅。
并且在未調(diào)用之前
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;
全局注冊(cè)
import confirm from './views/components/message/confirm'
Vue.prototype.$confirm = confirm;
使用
this.$confirm({
title: '',
msg: '模式未保存，確定離開讨永？',
yesBtnText: "離開"
}).then(() => {
console.log('yes')
})
.catch(() => {
console.log('cancel')
});
這種方式和第二中方式寫的時(shí)候都要注意滔驶，每次調(diào)用有些值需要重置，因?yàn)槎际侨值那淠郑灿猛粋€(gè)組件揭糕，避免不同地方調(diào)用相互影響。
第三種方式涉及的知識(shí)點(diǎn)
1.Vue.extend()
使用基礎(chǔ) Vue 構(gòu)造器锻霎，創(chuàng)建一個(gè)“子類”著角。參數(shù)是一個(gè)包含組件選項(xiàng)的對(duì)象
.vue單文件經(jīng)過webpack打包之后是一個(gè)組件示例對(duì)象，因此可以傳到Vue.extend中生成一個(gè)包含此組件的類
2.new VueComponent().$mount()
new VueComponent() 創(chuàng)建實(shí)例量窘，調(diào)用$mount()可以手動(dòng)編譯
如果.$mount('#app')有參數(shù)雇寇，表示手動(dòng)編譯并且掛載到該元素上。
3.$el屬性 類型：string | HTMLElement
手動(dòng)編譯后的示例對(duì)象中存在一個(gè)$el對(duì)象（dom元素）蚌铜，可以作為模板被插入到頁面中。
