第27车厢-关於讯息视窗:bootstrap5Model应用篇

本篇介绍Bootstrap5 UI的Modal(弹出互动视窗)呼叫方式

起手式

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

先介绍一般官网写法

官网写法

HTML

在要触发Modal的目标上绑定data-bs-toggle="modal"与data-bs-target这两个属性
data-bs-target对应Modal本身id

  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    Open modal
  </button>
  
<!-- The Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

这样就完成啦！

▲附上w3schools范例程序码

那其实我看了一下也可以这样写

JS写法

HTML

无事先绑定data-bs-toggle="modal"与data-bs-target这两个属性
靠的是JS，并使用官网中.show()方法叫出视窗

 <button id="myModal" class="btn btn-primary" type="button">点我打开视窗1</button>
 
<!-- Model模板 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

JS

 let myModal = document.getElementById("myModal");
 let exampleModal = new bootstrap.Modal(document.getElementById('exampleModal'));

myModal.addEventListener("click", function(e){
  exampleModal.show();
});

这样也可以！

那我们加一点难度，使用Vue3 + 将Model写成元试看看

Vue3

HTML

<main id="app">
    <button class="btn btn-primary" type="button" @click="showModal">点开视窗1</button>

    <modal ref="exampleModal" :parent-title="h1Title" parent-txt="我是讯息视窗内容" v-on:emit-hide="hideModal"></model>
</main>

观念

为什麽我们要刚要先介绍 new bootstrap.Modal的写法呢?因为我们在vue会用到
vue范例有用到的观念有
1.想要去取得某个 Dom 的资讯，可以使用 ref 这个 Attr，父层元件则可以透过 this.$refs来取得子元件
2.Props 父传子
3.$emit 子传父

VUE

const app = Vue.createApp({
  
  data(){
    return {
      h1Title:"快搭上姐姐的`微`前端便车",
      isActive:true,
      modal: null
    }
  },
   mounted() {
    this.modal = new bootstrap.Modal(this.$refs.exampleModal.$el)
  },
   methods: {
  	showModal(){ 
      this.modal.show();
    },
     hideModal(){
       this.modal.hide();
     }
  }
  
});

app.component("modal",{
 props:["parentTitle","parentTxt"], 
  methods:{
    hidemodelInner(){
      console.log("内层事件被触发");
      this.$emit("emit-hide");
    }
  },
  template:` 
  <div class="modal fade" id="exampleModal" ref="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"> {{ parentTitle }}</h5>
        <button type="button" class="btn-close" @click="hidemodelInner()" aria-label="Close"></button>
      </div>
      <div class="modal-body">
       {{ parentTxt }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" @click="hidemodelInner()">关闭</button>
      </div>
    </div>
  </div>
</div>`
  
})
app.mount("#app")

这样就完成啦！