Vue全家桶开发笔记
state 中没有属性的情况下,新增属性不会触发mutations修改。
例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | commit( 'change' , { c: 3, d: 4, }); state: { test: { a: 1, b: 2, } }, mutations: { change(state, payload) { state.test.c = payload.c; // 直接新增属性不会触发 state.test = Object.assign(state.test, payload); // 浅拷贝不会触发 } } |
解决方案
1 | state.test = { state.test, ...payload }; |
vue-cli打包后,css里的背景图片无法找到资源
解决方法:
https://github.com/vuejs/vue-cli/issues/179
@margox
在build目录下新建一个cssPathResolver.js,内容如下:
1 2 3 4 5 6 7 | module.exports = function (source) { if (process.env.NODE_ENV === 'production' ) { return source.replace( '__webpack_public_path__ + "static' , '"..' ) } else { return source } } |
webpack.base.conf.js里的img部分改为
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loaders: [ { loader: path.resolve(__dirname, 'cssPathResolver' ) }, { loader: 'url-loader' , query: { limit: 10000, name: utils.assetsPath( 'img/[name].[hash:7].[ext]' ) }, }, ], }, |
build后图片加载是相对路径,无法找到图片
图片大小大于10K。
在build文件夹webpack.base.conf.js修改url-loader的limit。
1 2 3 4 5 6 7 | { loader: 'url-loader', query: { limit: 150000, name: utils.assetsPath('img/[name].[hash:7].[ext]') }, } |
或者可在src文件夹同级的目录建立static
1 | < img src='static/xxxx.jpg'> |
给v-for遍历产生的元素绑定事件,并动态添加style。
例:
1 2 3 4 5 6 7 | < ul v-for='result of results'> < li > < div class='cut'> < img :src='result.src'> </ div > </ li > </ ul > |
当图片加载时,记录当前图片原始宽高,处理后传值给style。
首先需求是,在加载图片时记录当前图片原始宽高,所以img标签需要加上@load绑定onload事件。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | < ul v-for='result of results'> < li > < div class='cut'> < img @load='load' :src='result.src'> </ div > </ li > </ ul > < script > export default { data() { results: [ { src: 'src', style: null }, { src: 'src', style: null }, { src: 'src', style: null }, ], }, methods: { load(e) { const img = e.target; const [naturalWidth, naturalHeight] = getNatural(img); function getNatural(img) { let nWidth; let nHeight; if (img.naturalWidth) { nWidth = img.naturalWidth; nHeight = img.naturalHeight; } //省略兼容html 4 return [nWidth, nHeight]; } }, }, }; </ script > |
问题来了,这时候load方法虽然获取到了图片的原始宽高,但是传值给style则是个问题。如果要传当前元素的宽高,则需要在模板部分修改:
1 | < img @load='load(result)' :src='result.src'> |
这时传的值result会覆盖了event事件。导致load方法出错。
如果需要传event事件需要改成这样:
1 | < img @load='load(result, $event)' :src='result.src'> |
load方法就能同时接受当前遍历对象及触发事件。
ps:methods里面的方法有个默认声明的对象event,里面的属性和$event传过来的一样,但是官方文档没写,不建议使用。
此时在load方法里添加处理style的逻辑:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | methods: { load(item, e) { const img = e.target; const [naturalWidth, naturalHeight] = getNatural(img); //省略函数 if (naturalWidth >= narturalHeight) { margin = ((naturalWidth * 100) / narturalHeight) / 2; item.style = { marginLeft: `-${margin}px`, height: '100px' }; } else { item.style = { marginLeft: 'margin-left: -60px' , height: '100px' }; } }, }, |
这里也要注意style是个对象。同时,属性的值不能有分号,否则不会渲染style。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
· 不到万不得已,千万不要去外包
· C# WebAPI 插件热插拔(持续更新中)
· 会议真的有必要吗?我们产品开发9年了,但从来没开过会
· 如何打造一个高并发系统?
· 《SpringBoot》EasyExcel实现百万数据的导入导出