引入
在寫這篇文章前，我先說明我是一位高中生，對標題相關名詞的使用及文章的粗陋，請見諒。寫下這篇文章是爲了記錄我的喜悅，並分享一些個人經驗。（好久沒寫文章了…）
這篇文章我要做以下的事：相信大家都用過經典樣式庫bootstrap，裏的modal組件。必須承認，bootstrap好看，簡單，能用，但是每次需要用到modal組件，都必須要在html裏寫冗長的代碼，而且在需要複用組件時，都需要修改標題，內容，最後然後調用jquery的show函數展示模態框，這在高度組件化，高度複用的場景中是不優雅的。
當然我知道有很多vue的組件庫可以給我用，可是，項目已經成形，我並不想爲了爲了一個modal大改前端的樣式。
於是，我想將bootstrap的modal模態框，與vue的組件，高度集成起來，使html書寫優雅，並可以一條代碼觸發展示。做成this.modal.show(title,content)的效果。
或實現網絡開發技術的跨時代銜接？
大幅的簡化，完全原版的效果
submit:function(){
if (this.canISubmit == false){
this.modal.show('基礎信息檢驗出錯',`請檢查各要素是否已經按要求填寫準確！`)
this.isLoading=false
return false
}
...
實操：優雅的html
<body id="vue">
<modal ref='modal'></modal>
<!-- 是的真的就一行 -->
</body>
實操：vue組件
var BootModal = {
data: function () {
return {
title: '',
content:'',
}
},
template:`<div class="modal fade" id="submitModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{{title}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<p><b> {{content}} </b></p>
<hr>
<p>按下<a href="#" role="button" class="btn btn-dark btn-sm">ESC</a> 來快捷解散該窗口。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">我已知曉</button>
</div>
</div>
</div>
</div>`,
methods : {
show:function(title,content){
this.title = title
this.content = content
$('#submitModal').modal('show')
}
}
}
vue父組件
var bulk = new Vue({
el: '#vue',
components: {
'modal' : BootModal
},
mounted:function(){
this.modal = this.$refs.modal
this.modal.show('我是標題','我是內容')
//優雅調用，優雅展示
})
寫在最後
正如前文所說，本人是實實在在的高中生，如果有任何紕漏，請務必聯繫我修正，多多諒解，謝謝！如果有更好方案，歡迎交流！
本文完全爲個人原創，轉載請注原處！
