脚本宝典收集整理的这篇文章主要介绍了vue项目实践2——封装弹框模块,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
本文承接前一篇文章vue项目实践1——构建项目,在构建项目的基础上进行弹框组件的封装。弹框组件强调js动态调用、异步处理用户交互事件。
另外,关于弹框模块实现上基础的网上有很多讲解,进阶的封装借鉴了C#的语法和Qt的弹窗,封装后使用方便,但封装的思想和实现不太好讲清楚。有兴趣的可以去看我的github:https://github.com/sunhuili/v...。
基于当前构建的项目,我们需要再进行一些配置,以便更便捷舒适的开发体验。当前项目目录结构如下:
如下图所示:
在webpack的配置文件webpack.base.conf.js中加入scss、assets、static三个文件的路径别名即可(重启项目后生效)。
1、scss文件的引用
<style lang="scss" scoped="">
@import '~scss/_variable.scss';
</style>
2、图片的引用
<img src="~static/images/loading.gif">
3、动态图片引用
data() {
return {
loadingSrc: require('static/images/loading.gif'),
}
},
综上:根据webpack的特性,总的来说就是static放不会变动的第三方文件,assets放可能会变动的文件。
../
向上查找相对路径。如图所示,定义好基色调、常用样式(这里多用flex布局)。
如图所示目录,弹框组件放在‘src/plugin/dialog’目录下。
alert文件夹下包含两个文件:alert.vue、index.js
github上vue项目持续更新https://github.com/sunhuili/v... ,主要是项目中积累的公用模块和实用配置,欢迎大家一起交流技术。
以上是脚本宝典为你收集整理的vue项目实践2——封装弹框模块全部内容,希望文章能够帮你解决vue项目实践2——封装弹框模块所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。