如何在Vue.js中复用Bootstrap模态框并解决表单残留问题

嘿，我来帮你搞定这个Bootstrap模态框的问题！针对你提到的三个需求——关闭清空输入、必填校验、把值存到reason变量，我整理了一个完整的Vue.js解决方案，你可以直接参考：

完整代码示例 #

模板部分（Template） #

<template>
  <div>
    <!-- 触发模态框的按钮 -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#confirmModal">
      执行操作
    </button>

    <!-- Bootstrap模态框 -->
    <div class="modal fade" id="confirmModal" ref="modal" @hidden.bs.modal="clearInput" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="confirmModalLabel">操作确认</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <form ref="confirmForm">
            <div class="modal-body">
              <div class="mb-3">
                <label for="reasonInput" class="form-label">请输入原因（必填）</label>
                <input 
                  type="text" 
                  class="form-control" 
                  id="reasonInput" 
                  v-model="reason" 
                  required
                  placeholder="请填写操作原因">
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
              <button type="submit" class="btn btn-primary" @click.prevent="handleConfirm">确认执行</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

脚本部分（Script） #

<script>
export default {
  data() {
    return {
      reason: '' // 存储输入值的变量
    }
  },
  methods: {
    // 关闭模态框时清空输入
    clearInput() {
      this.reason = ''
      // 重置表单状态，清除残留的必填提示样式
      this.$refs.confirmForm.reset()
    },
    // 处理确认操作
    handleConfirm() {
      // 先校验表单是否符合必填要求
      const form = this.$refs.confirmForm
      if (!form.checkValidity()) {
        // 触发原生表单的校验提示
        form.reportValidity()
        return
      }

      // 这里可以添加你的业务逻辑，比如调用接口、执行操作等
      console.log('用户填写的操作原因：', this.reason)
      
      // 执行完逻辑后关闭模态框
      const modalInstance = new bootstrap.Modal(this.$refs.modal)
      modalInstance.hide()
    }
  }
}
</script>

关键要点解释 #

• 绑定输入值到reason变量：通过v-model="reason"实现输入框内容和变量的双向绑定，用户输入时会自动同步到reason里，不用手动取值。
• 必填校验：给输入框加上required属性，结合表单的checkValidity()和reportValidity()方法，实现原生的必填提示，用户没填就点确认的话会弹出提示。
• 关闭模态框清空输入：监听Bootstrap模态框的hidden.bs.modal事件（这个事件会在模态框完全关闭后触发），在clearInput方法里把reason置为空字符串，同时重置表单状态，避免残留的校验样式。
• 确认操作流程：先校验表单有效性，通过后再执行业务逻辑，最后关闭模态框，确保只有填写了必填内容才能执行后续操作。

如果你的项目用的是Vue Bootstrap组件库（比如bootstrap-vue），核心逻辑也是一样的——监听模态框关闭事件清空变量、用v-model绑定值、添加必填校验，只需要调整组件的写法就行。

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