vue彈出是否繼續(xù)操作的方法實例
更新時間：2025年11月11日 10:44:28 作者：悟能不能悟
在Vue中彈出確認框,通常我們會借助UI組件庫來實現(xiàn),因為這樣可以很方便地集成到Vue項目中,并且這些庫已經(jīng)為我們處理好了樣式和交互,這篇文章主要介紹了vue彈出是否繼續(xù)操作的相關(guān)資料,需要的朋友可以參考下
Vue確認操作彈窗設(shè)計
我將設(shè)計一個優(yōu)雅的Vue確認操作彈窗，讓用戶在執(zhí)行重要操作前進行確認。
設(shè)計思路
創(chuàng)建一個可復用的確認彈窗組件
支持自定義標題、內(nèi)容和按鈕文本
使用Promise處理異步確認/取消操作
添加動畫效果提升用戶體驗
響應(yīng)式設(shè)計確保在各種設(shè)備上正常顯示
實現(xiàn)方案
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue確認操作彈窗</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f7fa;
padding: 20px;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 30px;
}
header {
text-align: center;
margin-bottom: 40px;
}
h1 {
color: #2c3e50;
margin-bottom: 10px;
font-size: 2.5rem;
}
.subtitle {
color: #7f8c8d;
font-size: 1.2rem;
}
.demo-section {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
margin-bottom: 30px;
}
h2 {
color: #2c3e50;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.button-group {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin: 20px 0;
}
button {
padding: 12px 24px;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
font-size: 16px;
}
.btn-primary {
background-color: #3498db;
color: white;
}
.btn-primary:hover {
background-color: #2980b9;
transform: translateY(-2px);
}
.btn-danger {
background-color: #e74c3c;
color: white;
}
.btn-danger:hover {
background-color: #c0392b;
transform: translateY(-2px);
}
.btn-warning {
background-color: #f39c12;
color: white;
}
.btn-warning:hover {
background-color: #d35400;
transform: translateY(-2px);
}
.btn-success {
background-color: #2ecc71;
color: white;
}
.btn-success:hover {
background-color: #27ae60;
transform: translateY(-2px);
}
.result {
margin-top: 20px;
padding: 15px;
background-color: #f8f9fa;
border-radius: 6px;
border-left: 4px solid #3498db;
}
/* 彈窗樣式 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
animation: fadeIn 0.3s forwards;
}
.modal-content {
background: white;
border-radius: 10px;
width: 90%;
max-width: 500px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transform: translateY(-20px);
animation: slideUp 0.3s forwards;
overflow: hidden;
}
.modal-header {
padding: 20px 25px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-title {
font-size: 1.4rem;
font-weight: 600;
color: #2c3e50;
}
.modal-close {
background: none;
border: none;
font-size: 1.5rem;
color: #7f8c8d;
cursor: pointer;
padding: 5px;
}
.modal-body {
padding: 25px;
}
.modal-message {
font-size: 1.1rem;
color: #555;
line-height: 1.6;
}
.modal-footer {
padding: 20px 25px;
background-color: #f8f9fa;
display: flex;
justify-content: flex-end;
gap: 15px;
}
.btn-cancel {
background-color: #95a5a6;
color: white;
}
.btn-cancel:hover {
background-color: #7f8c8d;
}
.btn-confirm {
background-color: #e74c3c;
color: white;
}
.btn-confirm:hover {
background-color: #c0392b;
}
/* 動畫 */
@keyframes fadeIn {
to {
opacity: 1;
}
}
@keyframes slideUp {
to {
transform: translateY(0);
}
}
.fade-out {
animation: fadeOut 0.2s forwards;
}
@keyframes fadeOut {
to {
opacity: 0;
}
}
/* 響應(yīng)式設(shè)計 */
@media (max-width: 768px) {
.container {
padding: 15px;
}
.demo-section {
padding: 20px;
}
.button-group {
flex-direction: column;
}
button {
width: 100%;
}
}
.code-block {
background-color: #2d2d2d;
color: #f8f8f2;
padding: 20px;
border-radius: 6px;
overflow-x: auto;
margin: 20px 0;
font-family: 'Courier New', monospace;
font-size: 14px;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<header>
<h1>Vue確認操作彈窗</h1>
<p class="subtitle">優(yōu)雅的用戶確認交互設(shè)計</p>
</header>
<section class="demo-section">
<h2>演示示例</h2>
<p>點擊下面的按鈕體驗不同類型的確認彈窗：</p>
<div class="button-group">
<button class="btn-primary" @click="showDefaultConfirm">默認確認彈窗</button>
<button class="btn-danger" @click="showDeleteConfirm">刪除確認</button>
<button class="btn-warning" @click="showWarningConfirm">警告確認</button>
<button class="btn-success" @click="showCustomConfirm">自定義彈窗</button>
</div>
<div class="result" v-if="lastAction">
<strong>操作結(jié)果：</strong> {{ lastAction }}
</div>
</section>
<section class="demo-section">
<h2>實現(xiàn)代碼</h2>
<p>以下是如何在Vue中實現(xiàn)確認彈窗的核心代碼：</p>
<div class="code-block">
<!-- 確認彈窗組件 -->
<div class="modal-overlay" v-if="showModal" @click.self="closeModal">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">{{ modalTitle }}</h3>
<button class="modal-close" @click="closeModal">×</button>
</div>
<div class="modal-body">
<p class="modal-message">{{ modalMessage }}</p>
</div>
<div class="modal-footer">
<button class="btn-cancel" @click="cancel">{{ cancelText }}</button>
<button class="btn-confirm" @click="confirm">{{ confirmText }}</button>
</div>
</div>
</div>
</div>
<div class="code-block">
// 使用方法
this.$confirm({
title: '確認操作',
message: '您確定要執(zhí)行此操作嗎？',
confirmText: '確定',
cancelText: '取消'
}).then(() => {
// 用戶點擊確定
console.log('操作已確認');
}).catch(() => {
// 用戶點擊取消
console.log('操作已取消');
});
</div>
</section>
</div>
<!-- 確認彈窗組件 -->
<div class="modal-overlay" v-if="showModal" @click.self="closeModal">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">{{ modalTitle }}</h3>
<button class="modal-close" @click="closeModal">×</button>
</div>
<div class="modal-body">
<p class="modal-message">{{ modalMessage }}</p>
</div>
<div class="modal-footer">
<button class="btn-cancel" @click="cancel">{{ cancelText }}</button>
<button class="btn-confirm" @click="confirm">{{ confirmText }}</button>
</div>
</div>
</div>
</div>
<script>
// 確認彈窗插件
const ConfirmPlugin = {
install(Vue) {
Vue.prototype.$confirm = function(options) {
return new Promise((resolve, reject) => {
const vm = this;
vm.$set(vm, 'showModal', true);
vm.$set(vm, 'modalTitle', options.title || '確認操作');
vm.$set(vm, 'modalMessage', options.message || '您確定要執(zhí)行此操作嗎？');
vm.$set(vm, 'confirmText', options.confirmText || '確定');
vm.$set(vm, 'cancelText', options.cancelText || '取消');
// 存儲resolve和reject以便在按鈕點擊時調(diào)用
vm.$set(vm, 'confirmResolve', resolve);
vm.$set(vm, 'confirmReject', reject);
});
};
}
};
Vue.use(ConfirmPlugin);
new Vue({
el: '#app',
data: {
showModal: false,
modalTitle: '確認操作',
modalMessage: '您確定要執(zhí)行此操作嗎？',
confirmText: '確定',
cancelText: '取消',
lastAction: '',
confirmResolve: null,
confirmReject: null
},
methods: {
showDefaultConfirm() {
this.$confirm({
title: '確認操作',
message: '這是一個默認的確認彈窗示例。',
confirmText: '繼續(xù)',
cancelText: '取消'
}).then(() => {
this.lastAction = '用戶確認了默認操作';
}).catch(() => {
this.lastAction = '用戶取消了默認操作';
});
},
showDeleteConfirm() {
this.$confirm({
title: '刪除確認',
message: '此操作將永久刪除該項，且無法恢復。您確定要繼續(xù)嗎？',
confirmText: '刪除',
cancelText: '取消'
}).then(() => {
this.lastAction = '用戶確認刪除操作';
}).catch(() => {
this.lastAction = '用戶取消了刪除操作';
});
},
showWarningConfirm() {
this.$confirm({
title: '警告',
message: '此操作可能會導致系統(tǒng)異常，建議在非工作時間執(zhí)行。您確定要繼續(xù)嗎？',
confirmText: '繼續(xù)',
cancelText: '取消'
}).then(() => {
this.lastAction = '用戶確認了警告操作';
}).catch(() => {
this.lastAction = '用戶取消了警告操作';
});
},
showCustomConfirm() {
this.$confirm({
title: '自定義確認',
message: '這是一個完全自定義的確認彈窗，您可以修改標題、內(nèi)容和按鈕文字。',
confirmText: '我確定',
cancelText: '再想想'
}).then(() => {
this.lastAction = '用戶確認了自定義操作';
}).catch(() => {
this.lastAction = '用戶取消了自定義操作';
});
},
closeModal() {
this.showModal = false;
if (this.confirmReject) {
this.confirmReject();
}
},
cancel() {
this.showModal = false;
if (this.confirmReject) {
this.confirmReject();
}
},
confirm() {
this.showModal = false;
if (this.confirmResolve) {
this.confirmResolve();
}
}
}
});
</script>
</body>
</html>功能說明
這個Vue確認彈窗具有以下特點：
可復用組件：通過Vue插件方式實現(xiàn)，可在任何組件中調(diào)用
自定義選項：支持自定義標題、消息內(nèi)容和按鈕文字
Promise支持：使用Promise處理確認和取消操作
動畫效果：彈窗出現(xiàn)和消失有平滑的動畫效果
響應(yīng)式設(shè)計：在移動設(shè)備和桌面設(shè)備上都能良好顯示
多種示例：提供了四種不同類型的確認彈窗示例
使用方法
在Vue組件中，可以通過以下方式調(diào)用確認彈窗：
this.$confirm({
title: '確認操作',
message: '您確定要執(zhí)行此操作嗎？',
confirmText: '確定',
cancelText: '取消'
}).then(() => {
// 用戶點擊確定
console.log('操作已確認');
}).catch(() => {
// 用戶點擊取消
console.log('操作已取消');
});這個實現(xiàn)既美觀又實用，可以滿足大多數(shù)確認操作的需求。
總結(jié)
到此這篇關(guān)于vue彈出是否繼續(xù)操作的文章就介紹到這了,更多相關(guān)vue彈出是否繼續(xù)操作內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+element-ui JYAdmin后臺管理系統(tǒng)模板解析
這篇文章主要介紹了vue+element-ui JYAdmin后臺管理系統(tǒng)模板解析，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
Vue如何實現(xiàn)數(shù)據(jù)的上移和下移
這篇文章主要介紹了Vue如何實現(xiàn)數(shù)據(jù)的上移和下移問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要給大家分享Vue3中reactive響應(yīng)式失效的問題的解決方法,文中有詳細的解決方案供大家參考,如果又遇到一樣問題的同學,可以借鑒閱讀本文2023-08-08
這篇文章主要為大家分享了關(guān)于Vue.js一些問題和思考的學習筆記,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
在計算機技術(shù)中,指令是由指令集架構(gòu)定義的單個的CPU操作,在更廣泛的意義上,“指令”可以是任何可執(zhí)行程序的元素的表述,例如字節(jié)碼,下面這篇文章主要給大家介紹了關(guān)于Vue3指令是如何實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2022-01-01
這篇文章主要介紹了vue的url請求圖片的問題及請求失敗解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
這篇文章主要為大家介紹了Element-ui?Dialog對話框基本使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
Vue中實現(xiàn)表單地區(qū)選擇與級聯(lián)聯(lián)動示例詳解
這篇文章主要為大家介紹了Vue中實現(xiàn)表單地區(qū)選擇與級聯(lián)聯(lián)動示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
el-radio-group中的area-hidden報錯的問題解決
本文主要介紹了el-radio-group中的area-hidden報錯的問題解決,下面就來介紹幾種解決方法,具有一定的參考價值,感興趣的可以了解一下2025-04-04
Vue中圖片上傳組件封裝-antd的a-upload二次封裝的實例
這篇文章主要介紹了Vue中圖片上傳組件封裝-antd的a-upload二次封裝的實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09