Vue在methods中使用过滤器 2022年4月23日 1488 代码厨子 Vue的过滤器非常方便,在模板中可以任意使用,可是问题来了,我想在methods里的函数也使用过滤器,找了半天,亲测一个简单方法就可以了。 我一般会使用全局的过滤器,在main.js里进行注入,例如,我常用的一个使用阿里云的oss自带的缩略图功能以使用图片缩略图的过滤器,源码如下: ```javascript Vue.filter('resize', function(url, method = 0, w = 1, h = 1, c = 'ffffff', noCache = false) { /************************ 阿里云OSS图片缩略图过滤器 @url 图片在OSS上绝对路径 @method 缩放类型 @w 目标图片宽(单位px) @h 模板图片高(单位px) ************************/ if (!url) { return 'https://cdn.yongdaoyun.com/empty/empty.png' } let urls = [ url, url + '?x-oss-process=image/resize,m_fill,w_' + String(w) + ',h_' + String(h) + ',limit_0/auto-orient,1/quality,q_90', url + '?x-oss-process=image/auto-orient,1/resize,m_fill,w_' + String(w) + ',h_' + String(h) + ',limit_0/auto-orient,1/quality,q_90', url + '?x-oss-process=image/auto-orient,1/resize,m_pad,w_' + String(w) + ',h_' + String(h) + ',color_' + String(c) + '/quality,q_90' ] let key = MD5(urls[method]) let cache = uni.getStorageSync(key) let res = urls[method] if (noCache) { return res } if (cache) { uni.getSavedFileInfo({ filePath: cache, fail: () => { uni.removeStorageSync(key) } }) return cache } else { uni.downloadFile({ url: res, success: (file) => { let fs = uni.getFileSystemManager() fs.saveFile({ tempFilePath: file.tempFilePath, success: (f) => { uni.setStorageSync(key, f.savedFilePath) } }) } }) return res } }) ``` 这个过滤器在模板中的使用方法是这样的: ```html {{ url|resize(1,200,200) }} ``` 这样就获得了一个200X200的正方形缩略图,并且进行了本地缓存,第二次访问的时候,只要URL不变,就自动会返回缓存数据,以增强体验。 现在,问题来了。 我在使用uView的swipe组件时候,组件是需要传入一个图片URL数组,那么,我就必须先把数组准备好,然后传给组件,这样一来,我如何使用过滤器呢?否则就都是原图了,难道说需要我把过滤器再写一遍不成?找了半天,终于找到了解决方案。 研究Vue的机制发现,全局过滤器会被Vue挂载到$options的filter下,于是,就可以这样使用: ```javascript this.$options.filters[过滤器名称](...args) ``` 目标是组织一个图片url的array,改造前后源码如下: 改造前: ```javascript this.data.atlas.forEach(ele=>{ this.list.push(ele.file) }) ``` 改造后: ```javascript this.data.atlas.forEach(ele=>{ this.list.push(this.$options.filters["resize"](ele.file,2,750,440)) }) ``` 完美解决!