引入
在写这篇文章前，我先说明我是一位高中生，对标题相关名词的使用及文章的粗陋，请见谅。写下这篇文章是为了记录我的喜悦，并分享一些个人经验。（好久没写文章了…）
这篇文章我要做以下的事：相信大家都用过经典样式库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('我是标题','我是内容')
//优雅调用，优雅展示
})
写在最后
正如前文所说，本人是实实在在的高中生，如果有任何纰漏，请务必联系我修正，多多谅解，谢谢！如果有更好方案，欢迎交流！
本文完全为个人原创，转载请注原处！
