如何使用JavaScript实现点击时条件不满足才触发Toast提示

核心逻辑 #

点击触发时先校验指定条件：

• 条件不成立：显示Toast提示，终止后续流程
• 条件成立：跳过Toast，执行正常业务代码

原生JavaScript实现（无框架依赖） #

<!-- 页面结构 -->
<button id="operateBtn">执行操作</button>
<!-- 自定义Toast容器 -->
<div class="custom-toast" id="conditionToast">条件不满足，无法执行操作</div>

<style>
/* Toast基础样式，默认隐藏 */
.custom-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(30, 30, 30, 0.8);
  color: #fff;
  padding: 12px 24px;
  border-radius: 6px;
  display: none;
  z-index: 999;
}
</style>

<script>
// 获取DOM元素
const operateBtn = document.getElementById('operateBtn');
const conditionToast = document.getElementById('conditionToast');

// 定义你的校验条件（替换成实际业务逻辑）
function validateCondition() {
  // 示例：判断用户是否完成实名认证
  return localStorage.getItem('isCertified') === 'true';
}

// 显示Toast的工具函数
function showToast(msg = '条件不满足') {
  conditionToast.textContent = msg;
  conditionToast.style.display = 'block';
  // 3秒后自动隐藏
  setTimeout(() => {
    conditionToast.style.display = 'none';
  }, 3000);
}

// 绑定点击事件
operateBtn.addEventListener('click', () => {
  // 先校验条件
  if (!validateCondition()) {
    showToast();
    return; // 直接返回，不执行后续逻辑
  }

  // 条件成立时执行的正常业务代码
  console.log('执行正常操作：比如提交表单、发起请求等');
  // 这里写你的业务逻辑...
});
</script>

Vue 3 实现示例（基于UI库） #

如果用Vue配合UI库（比如Element Plus），代码会更简洁：

<template>
  <el-button @click="handleOperate">执行操作</el-button>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { useUserStore } from '@/stores/user'; // 假设用Pinia存储用户状态

const userStore = useUserStore();

// 校验条件函数
const checkPermission = () => {
  // 示例：判断用户是否拥有操作权限
  return userStore.currentUser.permissions.includes('edit');
};

const handleOperate = () => {
  if (!checkPermission()) {
    // 调用UI库的Toast组件
    ElMessage.warning('您无此操作权限，请联系管理员');
    return;
  }

  // 条件通过，执行正常逻辑
  console.log('执行编辑操作');
  // 业务代码...
};
</script>

关键注意点 #

• 条件判断后必须加return，避免正常逻辑被错误执行
• 校验函数独立封装，便于后续修改和复用
• Toast可以用原生自定义，也可以直接用项目中的UI库组件，核心是触发时机的控制

内容的提问来源于stack exchange，提问作者Vedant Tyagi