vue中關(guān)于confirm確認框的用法

更新時間：2023年08月21日 10:47:15 作者：王佑輝

這篇文章主要介紹了vue中關(guān)于confirm確認框的用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue中confirm確認框用法

示例圖片

示例圖1

示例代碼

this.$confirm("是否確認該操作","提示",{
    iconClass: "el-icon-question",//自定義圖標樣式
    confirmButtonText: "確認",//確認按鈕文字更換
    cancelButtonText: "取消",//取消按鈕文字更換
    showClose: true,//是否顯示右上角關(guān)閉按鈕
    type: "warning",//提示類型  success/info/warning/error
}).then(()=>{
    //確認操作
}).then((data) => {
    //取消操作
}).catch((err) => {
  	//捕獲異常
  	console.log(err);
});

vue自定義$confirm彈窗確認組件

1.Vue.extend()

使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個“子類”。參數(shù)是一個包含組件選項的對象

.vue單文件經(jīng)過webpack打包之后是一個組件示例對象，因此可以傳到Vue.extend中生成一個包含此組件的類

2.new VueComponent().$mount()

new VueComponent() 創(chuàng)建實例，調(diào)用$mount()可以手動編譯

如果.$mount(’#app’)有參數(shù)，表示手動編譯并且掛載到該元素上。

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')
});