微信小程序 / vue 封装全局过滤器

一、微信小程序 封装全局过滤器

参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html

作用：往往后端会返回一个数字，比如1，我们根据数字1对应后端数据枚举中的value值在页面中渲染出desc的值。有人会说，直接if else 判断等于1就显示轮播图片，等于2就显示商品卡片等。这样写死到时候后端ModuleTypeEnum里面的数据变化 ，页面就得改，不好维护。所以过滤器是最好的办法

后端给的枚举数据

 "ModuleTypeEnum": [
	      {
	        "value": 2,
	        "desc": "轮播图片"
	      },
	      {
	        "value": 3,
	        "desc": "商品卡片"
	      },
	      {
	        "value": 4,
	        "desc": "导航"
	      },
	      {
	        "value": 5,
	        "desc": "图片卡片"
	      },
	      {
	        "value": 6,
	        "desc": "文本标语"
	      }
 ]

过滤器的使用：

filter.wxs:

  // 封装过滤器
  /* 注： <1> <wxs> 模块只能在定义模块的 WXML 文件中被访问到 
          <2> <wxs> 模块不支持es6语法
  */ 
 var filterData = function(value,array){
    for(var i = 0;i<array.length;i++){
      if(value = array[i].id){
        return array[i].item
      }
    }
  }
  module.exports = {
    filterData:filterData
  }

所需页面中的.wxml:

<!-- 引入 -->
	<wxs src='../../utils/filter.wxs' module='filter'/>
	
<!-- 使用 -->
	<view>{{filter.filterData(value,array)}}</view>

所需页面中的.js:

Page({
  data:{
    value:1,
    array:[
        {id:1,item:'第一'},
        {id:2,item:'第二'},
        {id:3,item:'第三'},
    ],
  }
 })

二、vue 使用过滤器

①局部过滤器：

 filters: {
    //过滤器
    filterData(value, sourceData) {
      for (let i = 0; i < sourceData.length; i++) {
        let item = sourceData[i]
        if (value == item.value) {
          return item.desc
        }
      }
    },
  },

使用

<div> {{value | filterData(sourceData)}}</div>

注：value是传过去的第一个参数，sourceData是传过去的第二个参数

value：1，
sourceData：[
{
	value:1,
	desc:'第一',
	},
	{
	value:2,
	desc:'第二',
	},
	{
	value:3,
	desc:'第三',
	},
]

②全局过滤器：

filter.js:

import Vue from 'vue'

// 错误语法

// Vue.filter({
//     filters: {
//         filterData(value, statesData) {
//             for (let i = 0; i < statesData.length; i++) {
//                 let item = statesData[i]
//                 console.log('filter', item, value)
//                 if (value == item.value) {
//                     return (item.desc)
//                 }
//             }
//         }
//     }
// })

// 注：filters在new Vue中写 ，  Vue.filter是全局（也就是说局部写过滤器时需要写filters，全局时不需要）

// 正确语法
Vue.filter('filterData', function(value, statesData) {
    for (let i = 0; i < statesData.length; i++) {
        let item = statesData[i]
        if (value == item.value) {
            return (item.desc)
        }
    }
})

在main.js引入过滤器：

import '@/utils/filter.js'

在所需页面使用：

<div> {{value | filterData(sourceData)}}</div>

注：value是传过去的第一个参数，sourceData是传过去的第二个参数

	value：1，
	sourceData：[
	{
		value:1,
		desc:'第一',
		},
		{
		value:2,
		desc:'第二',
		},
		{
		value:3,
		desc:'第三',
		},
	]

注：如果是vue2的项目，可以使用过滤器。如果是vue3的项目，官方建议使用计算属性或者方法代替被剔除的过滤器功能