BootstrapVue环境下点击按钮显示指定div3秒的无jQuery实现方案咨询

实现方案 #

直接基于Vue原生响应式状态+定时器即可实现，无需依赖jQuery，完整实现如下：

模板代码

<div class="row mb-3">
  <div class="col-8 col-md-6 mt-4 ml-1">
    <!-- 补全了原代码中未闭合的b-button标签 -->
    <b-button @click="clickIt()">点击触发</b-button>
  </div>
  <div class="col-2 col-md-5 mt-4" v-show="isShowTip">
    <p>You've clicked it!</p>
  </div>
</div>

组件脚本代码

export default {
  data() {
    return {
      // 控制提示块显隐的状态变量
      isShowTip: false,
      // 存储定时器ID，避免重复点击产生的定时器冲突
      tipTimer: null
    }
  },
  methods: {
    clickIt() {
      // 点击时先清空之前的定时器，保证每次触发都完整显示3秒
      if (this.tipTimer) clearTimeout(this.tipTimer)
      // 显示提示块
      this.isShowTip = true
      // 启动3秒定时器，时间到后自动隐藏
      this.tipTimer = setTimeout(() => {
        this.isShowTip = false
        this.tipTimer = null
      }, 3000)
    }
  },
  // 组件销毁前清理定时器，避免内存泄漏
  beforeDestroy() {
    if (this.tipTimer) clearTimeout(this.tipTimer)
  }
}

补充说明

• 如果提示块触发频率高，使用v-show性能更好，仅修改元素display属性；如果触发频率极低，可替换为v-if，隐藏时会直接从DOM树中移除元素。
• 若需要添加显隐过渡效果，可直接套入BootstrapVue自带的<b-transition>组件实现。

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