Vue框架加上Bootstrap5 modal ?

在专案开始时遇到一个问题，就是关于Modal该如何关闭，如何开启?
当然可以用data-bs-target,data-bs-dismiss，但是会有相对的副作用，@keyup.enter，modal遮罩转址后依旧会在。

想写这篇文章的原因是因为看了这篇---->

Vue框架搭配Bootstrap modal
https://harry811016.medium.com/vue%E6%A1%86%E6%9E%B6%E6%90%AD%E9%85%8Dbootstrap-modal-df6038628d6e

后来认真看官方文件还有Stackoverflow后，就解决了。

正文开始 Go!

我们都知道Bootstrap5已经不需要依赖JQuery就可以独立作业了
相对地来说，以往boootstrap很多功能都依赖 JQuery。例如Modal的操控。

bootstrap5，捨弃了JQuery，改成使用回原生的JS DOM来操作功能
BS5这样的改动让所需要加载的资源更少，提升了网页读取的速度，让使用者的体验有进一步的提升。

Bootstrap5之前的版本，就拿modal最常用的hide,show来示範，Bootstrap4操控方法是以下这样
Bootstrap4很像手游的一键扫荡，把以下语法丢进去函式就可以动作了...还很方便QQ

 .modal('show') 手动打开动态视窗。 在动态视窗实际显示之前返回给调用者（即在shown.bs.modal 事件发生之前）。 $('#myModal').modal('show')

.modal('hide')手动隐藏动态视窗。 在动态视窗实际隐藏之前返回给调用者（即在 hidden.bs.modal 事件发生之前）。$('#myModal').modal('hide')

但是到了bootstrap 5则是变成原生js 操作DOM来控制，来看看官方文件怎么说

传递选项将你的内容启用为互动视窗，接受一个选择性的 object 选项。var modalToggle = document.getElementById('toggleMyModal') // relatedTargetmyModal.show(modalToggle)var myModal = new bootstrap.Modal(document.getElementById('myModal'), {  keyboard: false})

show手动打开动态视窗。在动态视窗实际显示之前返回给调用者（即在 shown.bs.modal 事件发生之前）。myModal.show()

hide手动隐藏动态视窗。在动态视窗实际隐藏之前返回给调用者（即在 hidden.bs.modal 事件发生之前）。myModal.hide()

用专案中登入注册的modal来示範

这段是modal里面的input，Modal的id为 #login<div class="form-group">             <label for="password" class="fs-6 fw-bolder">Password</label>               <input type="password" v-model="password" class="form-control"                   id="password"placeholder="Password" autocomplete="off"                    @keyup.enter="register"/></div>

我们当然可以像上面说的一样用data-bs-target,data-bs-dismiss,data-bs-toggle来对应modal，但是变相地说你只能手动点击登入按钮。这样使用者体验会很差。而且如果在input输入完密码想直接用@keyup.enter来呼叫登入函式，会造成modal遮罩跳转(跳去会员中心...等等)没有消失，你必须重新整理....

那用5该怎么做到呢?

我们得在data设定modal为空字串，null也可以。import { Modal } from 'bootstrap'export default {  name: "Login",  props: {      },  data() {    return {      name: null,      email: null,      password: null,      modal:''    };  },};

接着我们在

mounted() {      this.modal = new Modal(document.getElementById('login'))      // 监听modal 用id取得你要的modal      把你要取得的modal资料赋予到刚刚设定空值的modal里面

这时候打开vue devtools 可以看到

成功取得你要的modal资料了。

(QAQ 插入成功可是破图 )

再来就是写一个hide modal的函式记得上面的程式码吗?hide手动隐藏动态视窗。在动态视窗实际隐藏之前返回给调用者（即在 hidden.bs.modal 事件发生之前）。myModal.hide()

我们在methods里面建立一个函式叫做 closeModal() {         this.modal.hide()        //  设定modal hide       }

再来我们回到你要呼叫closeModal这个函式的地方。这里我的需求是在login还有register要呼叫login() {      const auth = getAuth();        signInWithEmailAndPassword(auth, this.email, this.password)        .then((userCredential) => {          const user = userCredential.user;          Swal.fire({            position: "center",            icon: "success",            title: "登入成功",            showConfirmButton: false,            timer: 1500,          });          this.closeModal();          // 呼叫关闭login Modal          this.$router.replace("admin");        })        .catch((error) => {          const errorCode = error.code;          const errorMessage = error.message;          if (errorCode === "auth/wrong-password") {            // 密码错误提醒            Swal.fire({              position: "center",              icon: "error",              title: "密码错误",              showConfirmButton: false,              timer: 2000,            });          } else {            // 其他错误提醒            Swal.fire({              position: "center",              icon: "error",              title: "密码错误或信箱尚未注册",              showConfirmButton: false,              timer: 2000,            });          }          console.log(error);        });    },            

我们就在你要的函式内呼叫刚刚所建立的closeModal函式，这样input 输入完密码 @keyup.enter="login"
将要转址到admin分页的时候，刚刚所打开的#login modal就会关闭，并且转址后，转址后的body没有遮罩了。

下次做vue专案时，要用bootstrap-vue了，相容性更好的样子？
以上这个方法也是去翻bootstrap-vue的modal的 Docs得到的灵感。

第二次发文，若有错误敬请见谅，请您留言提出，我会继续精进希望这篇文能够帮到也有遇到这个问题的朋友们