给按钮添加确认提示

给按钮添加确认提示

<%@ Page Language="C#" %>
<script runat="server">
public void Page_Load(Object sender, EventArgs E) {
btnSubmit.Attributes.Add("onclick","javascript:if(confirm('Are you sure everything is correct?')== false) return false;");
}
void btnSubmit_Click(object sender, EventArgs e) {
        Message.Text = "You entered your name as: " + txtName.Text;
}
</script>
<html>
<head>
</head>
<body>
<form runat="server">
    Name: <asp:Textbox id="txtName" runat="server"/>
<asp:Button id="btnSubmit" onclick="btnSubmit_Click" runat="server" Text="Submit"></asp:Button><br/>
<asp:Label id="Message" runat="server"/>
</form>
</body>
</html>
<think>我们将在删除按钮操作时添加一个确认提示框。在Element Plus中,我们可以使用ElMessageBox来创建一个确认对话框。 具体修改点: 1. 在删除单个品牌时,点击删除按钮弹出确认对话框 2. 在批量删除时,同样弹出确认对话框 3. 用户确认后执行删除操作,取消则不执行 我们将修改两个函数:handleDelete(单个删除)和handleBatchDelete(批量删除) 注意:需要从element-plus中导入ElMessageBox</think>我将为删除按钮添加确认提示功能,确保用户不会误操作删除重要数据。以下是优化后的代码: ```vue <template> <!-- ...其他代码保持不变... --> </template> <script setup> import { ref, onMounted } from 'vue' import { getBrandsByPage, addBrand, updateBrand, deleteBrand, batchDelete } from '@/api/brandApi' import { ElMessage, ElMessageBox } from 'element-plus' // 引入ElMessageBox import { Goods, OfficeBuilding, ShoppingCart, CircleCheckFilled, Clock } from '@element-plus/icons-vue' // ...其他代码保持不变... // 删除操作 - 添加确认提示 const handleDelete = async (id) => { try { // 显示确认对话框 await ElMessageBox.confirm( '确定要删除该品牌吗?此操作不可撤销!', '删除确认', { confirmButtonText: '确认删除', cancelButtonText: '取消', type: 'warning', customClass: 'delete-confirm-dialog', confirmButtonClass: 'confirm-delete-button', cancelButtonClass: 'cancel-delete-button', beforeClose: async (action, instance, done) => { if (action === 'confirm') { instance.confirmButtonLoading = true; try { await deleteBrand(id) showSuccess('删除成功') done() loadData() } catch (error) { instance.confirmButtonLoading = false; showError('删除失败') } } else { done() } } } ) } catch (error) { // 用户点击取消 showInfo('已取消删除操作') } } // 批量删除操作 - 添加确认提示 const handleBatchDelete = async () => { if (!selectedIds.value.length) { return showWarning('请至少选择一条记录') } try { // 显示确认对话框 await ElMessageBox.confirm( `确定要删除选中的 ${selectedIds.value.length} 个品牌吗?此操作不可撤销!`, '批量删除确认', { confirmButtonText: '确认删除', cancelButtonText: '取消', type: 'warning', customClass: 'batch-delete-dialog', confirmButtonClass: 'confirm-delete-button', cancelButtonClass: 'cancel-delete-button', beforeClose: async (action, instance, done) => { if (action === 'confirm') { instance.confirmButtonLoading = true; try { await batchDelete(selectedIds.value) showSuccess(`已成功删除 ${selectedIds.value.length} 个品牌`) selectedIds.value = [] done() loadData() } catch (error) { instance.confirmButtonLoading = false; showError('删除失败') } } else { done() } } } ) } catch (error) { // 用户点击取消 showInfo('已取消批量删除操作') } } // 消息通知 const showSuccess = (message) => ElMessage.success(message) const showError = (message) => ElMessage.error(message) const showWarning = (message) => ElMessage.warning(message) const showInfo = (message) => ElMessage.info(message) // 新增信息提示 // ...其他代码保持不变... </script> <style scoped lang="scss"> /* ...其他样式保持不变... */ /* 删除确认对话框样式 */ .delete-confirm-dialog, .batch-delete-dialog { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); :deep(.el-message-box__header) { background-color: #fff8f0; padding: 15px 20px; border-bottom: 1px solid #ffe4c4; .el-message-box__title { color: #e6a23c; font-weight: 600; } } :deep(.el-message-box__content) { padding: 20px; color: #606266; font-size: 16px; line-height: 1.6; .el-icon-warning { color: #e6a23c; font-size: 24px; margin-right: 10px; vertical-align: middle; } } :deep(.el-message-box__btns) { padding: 15px 20px; display: flex; justify-content: flex-end; gap: 12px; background-color: #f9f9f9; border-top: 1px solid #eee; } } .confirm-delete-button { background-color: #f56c6c; border-color: #f56c6c; color: white; border-radius: 8px; padding: 10px 20px; transition: all 0.3s; &:hover { background-color: #e65050; border-color: #e65050; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(245, 108, 108, 0.3); } &:active { transform: translateY(0); } } .cancel-delete-button { border-radius: 8px; padding: 10px 20px; transition: all 0.3s; &:hover { background-color: #f0f2f5; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } &:active { transform: translateY(0); } } </style> ``` ### 删除确认功能实现详解: 1. **使用 Element Plus 的 ElMessageBox 组件**: - 通过 `ElMessageBox.confirm` 创建确认对话框 - 自定义对话框标题、内容和按钮文本 - 设置警告类型(type: 'warning')增强警示效果 2. **单条删除确认**: ```javascript await ElMessageBox.confirm( '确定要删除该品牌吗?此操作不可撤销!', '删除确认', { // 配置选项 } ) ``` 3. **批量删除确认**: ```javascript await ElMessageBox.confirm( `确定要删除选中的 ${selectedIds.value.length} 个品牌吗?此操作不可撤销!`, '批量删除确认', { // 配置选项 } ) ``` 4. **高级配置选项**: - `beforeClose`:自定义关闭逻辑,在确认删除时显示加载状态 - `customClass`:自定义对话框样式类 - `confirmButtonClass`/`cancelButtonClass`:自定义按钮样式 5. **用户体验优化**: - 确认按钮显示加载状态防止重复点击 - 成功/失败后显示相应的提示信息 - 用户取消操作时显示取消提示 6. **样式优化**: - 自定义对话框样式与整体设计风格一致 - 确认按钮使用红色强调操作风险 - 添加按钮悬停动画增强交互感 - 对话框添加阴影提升层次感 ### 功能优势: 1. **防止误操作**:用户必须明确确认才能执行删除操作 2. **操作可逆**:用户有机会在确认前取消操作 3. **风险提示**:明确告知用户操作不可撤销 4. **视觉强调**:使用警告图标和颜色增强警示效果 5. **批量操作明确**:显示将要删除的记录数量 这个实现既保持了原有功能,又添加了必要的安全措施,确保用户不会意外删除重要数据,同时提供了良好的用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值