使用vue组件，将bootstrap模态框组件化并函数化展示的解决方案
引入
在写这篇文章前，我先说明我是一位高中生，对标题相关名词的使用及文章的粗陋，请见谅。写下这篇文章是为了记录我的喜悦，并分享一些个人经验。（好久没写文章了…）
这篇文章我要做以下的事：相信大家都用过经典样式库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=falsereturn false}
...
实操：优雅的html
<body id="vue"><modal ref='modal'>modal>
body>
实操：vue组件
var BootModal = {data: function () {return {title: '',content:'',}},template:`{{title}}
{{content}}
按下ESC 来快捷解散该窗口。
`,methods : {show:function(title,content){this.title = titlethis.content = content$('#submitModal').modal('show')}}
}
vue父组件
var bulk = new Vue({el: '#vue',components: {'modal' : BootModal},mounted:function(){this.modal = this.$refs.modalthis.modal.show('我是标题','我是内容')//优雅调用，优雅展示
})
写在最后
正如前文所说，本人是实实在在的高中生，如果有任何纰漏，请务必联系我修正，多多谅解，谢谢！如果有更好方案，欢迎交流！
本文完全为个人原创，转载请注原处！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！