Vue在methods中使用过滤器 2022年4月23日 1174 代码厨子 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)) }) ``` 完美解决!
