398 lines
9.2 KiB
Vue
398 lines
9.2 KiB
Vue
<template>
|
||
<div class="message-demo">
|
||
<h1>消息提示框示例</h1>
|
||
|
||
<div class="demo-section">
|
||
<h2>组件方式使用</h2>
|
||
<div class="btn-group">
|
||
<button @click="showSimpleMessage">显示简单提示</button>
|
||
<button @click="showConfirmMessage">显示确认提示</button>
|
||
<button @click="showCancelMessage">显示带取消的提示</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-section">
|
||
<h2>函数式调用（推荐）</h2>
|
||
<div class="btn-group">
|
||
<button @click="showFnAlert" class="fn-btn">alert 提示</button>
|
||
<button @click="showFnConfirm" class="fn-btn">confirm 确认</button>
|
||
<button @click="showFnCustom" class="fn-btn">自定义提示</button>
|
||
</div>
|
||
<div class="code-tip">
|
||
<pre>
|
||
// 使用方法
|
||
import MessageBox from '@/utils/messageBox'
|
||
|
||
// 简单提示
|
||
MessageBox.alert('这是一条提示信息', '提示')
|
||
.then(() => {
|
||
console.log('用户点击了确定')
|
||
})
|
||
.catch(() => {})
|
||
|
||
// 确认提示
|
||
MessageBox.confirm('确定要执行该操作吗?', '请确认')
|
||
.then(() => {
|
||
console.log('用户确认了操作')
|
||
})
|
||
.catch(() => {
|
||
console.log('用户取消了操作')
|
||
})
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-section">
|
||
<h2>自定义设置</h2>
|
||
<div class="form-group">
|
||
<label>标题：</label>
|
||
<input v-model="customTitle" placeholder="输入标题（可选）">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>消息内容：</label>
|
||
<input v-model="customMessage" placeholder="输入消息内容">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>确认按钮文字：</label>
|
||
<input v-model="customConfirmText" placeholder="默认：确定">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>取消按钮文字：</label>
|
||
<input v-model="customCancelText" placeholder="默认：取消">
|
||
</div>
|
||
<div class="form-group checkbox">
|
||
<input type="checkbox" id="customCancel" v-model="showCancel">
|
||
<label for="customCancel">显示取消按钮</label>
|
||
</div>
|
||
<div class="form-group checkbox">
|
||
<input type="checkbox" id="customOverlayClose" v-model="closeOnOverlay">
|
||
<label for="customOverlayClose">点击遮罩层关闭</label>
|
||
</div>
|
||
<button @click="showCustomMessage" class="primary-btn">显示自定义提示</button>
|
||
</div>
|
||
|
||
<!-- 消息提示框组件 -->
|
||
<MessageBox
|
||
:visible="messageVisible"
|
||
:title="title"
|
||
:message="message"
|
||
:confirm="confirmBtn"
|
||
:cancel="cancelBtn"
|
||
:confirmText="confirmText"
|
||
:cancelText="cancelText"
|
||
:closeOnClickOverlay="overlayClose"
|
||
@confirm="handleConfirm"
|
||
@cancel="handleCancel"
|
||
/>
|
||
|
||
<!-- 操作结果 -->
|
||
<div class="result-section" v-if="result">
|
||
<div class="result-box">
|
||
<p>操作结果: <span>{{ result }}</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import MessageBox from '@/components/MessageBox.vue'
|
||
import MessageBoxFn from '@/utils/messageBox.js'
|
||
|
||
export default {
|
||
name: 'MessageDemo',
|
||
components: {
|
||
MessageBox
|
||
},
|
||
data() {
|
||
return {
|
||
// 消息框配置
|
||
messageVisible: false,
|
||
title: '',
|
||
message: '',
|
||
confirmBtn: true,
|
||
cancelBtn: false,
|
||
confirmText: '确定',
|
||
cancelText: '取消',
|
||
overlayClose: false,
|
||
|
||
// 用户操作结果
|
||
result: '',
|
||
|
||
// 自定义消息表单
|
||
customTitle: '',
|
||
customMessage: '这是一条自定义消息',
|
||
customConfirmText: '',
|
||
customCancelText: '',
|
||
showCancel: false,
|
||
closeOnOverlay: false
|
||
}
|
||
},
|
||
methods: {
|
||
// 组件方式 - 显示简单消息
|
||
showSimpleMessage() {
|
||
this.title = '提示';
|
||
this.message = '这是一条简单的提示信息';
|
||
this.confirmBtn = true;
|
||
this.cancelBtn = false;
|
||
this.confirmText = '确定';
|
||
this.cancelText = '取消';
|
||
this.overlayClose = false;
|
||
this.messageVisible = true;
|
||
},
|
||
|
||
// 组件方式 - 显示确认消息
|
||
showConfirmMessage() {
|
||
this.title = '确认操作';
|
||
this.message = '您确定要执行此操作吗？';
|
||
this.confirmBtn = true;
|
||
this.cancelBtn = false;
|
||
this.confirmText = '确定';
|
||
this.cancelText = '取消';
|
||
this.overlayClose = false;
|
||
this.messageVisible = true;
|
||
},
|
||
|
||
// 组件方式 - 显示带取消的消息
|
||
showCancelMessage() {
|
||
this.title = '确认操作';
|
||
this.message = '此操作不可撤销，是否继续？';
|
||
this.confirmBtn = true;
|
||
this.cancelBtn = true;
|
||
this.confirmText = '继续';
|
||
this.cancelText = '放弃';
|
||
this.overlayClose = true;
|
||
this.messageVisible = true;
|
||
},
|
||
|
||
// 组件方式 - 显示自定义消息
|
||
showCustomMessage() {
|
||
if (!this.customMessage) {
|
||
alert('请输入消息内容');
|
||
return;
|
||
}
|
||
|
||
this.title = this.customTitle;
|
||
this.message = this.customMessage;
|
||
this.confirmBtn = true;
|
||
this.cancelBtn = this.showCancel;
|
||
this.confirmText = this.customConfirmText || '确定';
|
||
this.cancelText = this.customCancelText || '取消';
|
||
this.overlayClose = this.closeOnOverlay;
|
||
this.messageVisible = true;
|
||
},
|
||
|
||
// 函数方式 - Alert提示
|
||
showFnAlert() {
|
||
MessageBoxFn.alert('这是一条函数调用的提示信息', '提示')
|
||
.then(() => {
|
||
this.result = '用户点击了确定按钮';
|
||
setTimeout(() => this.result = '', 2000);
|
||
})
|
||
.catch(() => {});
|
||
},
|
||
|
||
// 函数方式 - Confirm确认
|
||
showFnConfirm() {
|
||
MessageBoxFn.confirm('此操作将永久删除该数据, 是否继续?', '警告')
|
||
.then(() => {
|
||
this.result = '用户确认了删除操作';
|
||
setTimeout(() => this.result = '', 2000);
|
||
})
|
||
.catch(() => {
|
||
this.result = '用户取消了删除操作';
|
||
setTimeout(() => this.result = '', 2000);
|
||
});
|
||
},
|
||
|
||
// 函数方式 - 自定义选项
|
||
showFnCustom() {
|
||
MessageBoxFn({
|
||
title: '自定义设置',
|
||
message: '这是一个带有自定义设置的提示框',
|
||
confirmText: '我知道了',
|
||
cancelText: '关闭',
|
||
cancel: true,
|
||
closeOnClickOverlay: true
|
||
})
|
||
.then(() => {
|
||
this.result = '用户点击了"我知道了"按钮';
|
||
setTimeout(() => this.result = '', 2000);
|
||
})
|
||
.catch(() => {
|
||
this.result = '用户关闭了提示框';
|
||
setTimeout(() => this.result = '', 2000);
|
||
});
|
||
},
|
||
|
||
// 组件方式 - 处理确认按钮
|
||
handleConfirm() {
|
||
this.result = '用户点击了「' + this.confirmText + '」按钮';
|
||
this.messageVisible = false;
|
||
|
||
// 2秒后清除结果
|
||
setTimeout(() => {
|
||
this.result = '';
|
||
}, 2000);
|
||
},
|
||
|
||
// 组件方式 - 处理取消按钮
|
||
handleCancel() {
|
||
this.result = '用户取消了操作';
|
||
this.messageVisible = false;
|
||
|
||
// 2秒后清除结果
|
||
setTimeout(() => {
|
||
this.result = '';
|
||
}, 2000);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.message-demo {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
h1 {
|
||
text-align: center;
|
||
margin-bottom: 40px;
|
||
color: #333;
|
||
}
|
||
|
||
h2 {
|
||
margin-bottom: 20px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid #eee;
|
||
color: #444;
|
||
}
|
||
|
||
.demo-section {
|
||
margin-bottom: 40px;
|
||
padding: 20px;
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.btn-group {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
button {
|
||
padding: 8px 16px;
|
||
background-color: #f0f0f0;
|
||
border: none;
|
||
border-radius: 4px;
|
||
color: #333;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
button:hover {
|
||
background-color: #e0e0e0;
|
||
}
|
||
|
||
.fn-btn {
|
||
background-color: #65b687;
|
||
color: white;
|
||
}
|
||
|
||
.fn-btn:hover {
|
||
background-color: #549c72;
|
||
}
|
||
|
||
.primary-btn {
|
||
background-color: #3273dc;
|
||
color: white;
|
||
font-weight: 500;
|
||
padding: 10px 20px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.primary-btn:hover {
|
||
background-color: #2366d1;
|
||
}
|
||
|
||
.code-tip {
|
||
margin-top: 20px;
|
||
background-color: #f8f8f8;
|
||
border-radius: 6px;
|
||
padding: 15px;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.code-tip pre {
|
||
margin: 0;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 13px;
|
||
color: #333;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
font-weight: 500;
|
||
color: #555;
|
||
}
|
||
|
||
.form-group input[type="text"],
|
||
.form-group input[type="password"],
|
||
.form-group input:not([type="checkbox"]) {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.form-group.checkbox {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.form-group.checkbox label {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.result-section {
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.result-box {
|
||
padding: 15px;
|
||
background-color: #f9f9f9;
|
||
border-radius: 6px;
|
||
border-left: 4px solid #3273dc;
|
||
}
|
||
|
||
.result-box p {
|
||
margin: 0;
|
||
color: #666;
|
||
}
|
||
|
||
.result-box span {
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.message-demo {
|
||
padding: 20px 15px;
|
||
}
|
||
|
||
.demo-section {
|
||
padding: 15px;
|
||
}
|
||
}
|
||
</style> |