Filter 支持

    filter 实现依赖于原生支持，目前只支持 百度小程序 微信小程序 支付宝小程序 快应用（okam-build@0.4.9 开始支持），然后各个小程序平台对于 filter 或者 自定义脚本支持稍有差异，使用时候也需要注意下。

    filter 定义目前只支持本地 filter 定义，暂不支持 全局 filter，filter 定义 同 。

    在构建配置 framework 选项里加上 filter 支持：

    • 脚本里 filters 属性里定义要用到的 filter
    • 模板里使用 Vue filter 管道语法进行 filter 使用
    • 注意： filters 配置不支持 mixin
    1. <template>
    2.     <view class="filter-wrap">
    3.         <view>raw: {{str}}, filter: {{str | toUpperCase}}</view>
    4.         <filter-component :from="str|toUpperCase"></filter-component>
    5.     </view>
    6. </template>
    8. <script>
    9. import FilterComponent from './FilterComponent';
    11. export default {
    12.     config: {
    13.         title: 'Filter 支持'
    14.     },
    16.     components: {
    18.     },
    20.     data: {
    21.         str: 'abc3r23'
    22.     },
    24.     // 通过 filters 属性，声明过滤器，这部分定义最后会提取到自定义脚本文件，因此定义方式
    25.     // 注意参考官方语法
    26.     filters: {
    27.             return str2.toUpperCase();
    28.         }
    29.     },
    31.     methods: {
    32.     }
    33. };
    34. </script>
    36. <style lang="stylus">
    37. .filter-wrap
    38.     height: 100vh
    39.     padding: 10px
    40.     background: #fff
    41. </style>

    • 基于脚本 filters 属性声明要使用的 filter，注意该 filter 定义，经过构建后会被提取到单独的自定义脚本文件里，模板通过自定义脚本的方式引入。

    • 微信小程序 只支持 ES5 语法定义方式，包括导出 filter 方式用的是 commonjs 模块方式，因此需要在构建配置里单独将其转成 ES5 语法

    • 百度小程序 Filter 支持

      1.   <template>
      2.       <view class="native-filter-wrap">
      3.           <filter src="../filter/util.filter.js" module="util"></filter>
      4.           <view>{{str}}: {{util.toUpperCase(str)}}</view>
      5.           <filter module="util2">
      6.               export default {
      7.                   toLowerCase(str) {
      9.                   }
      10.               }
      11.           </filter>
      12.           <view>{{str}}: {{util2.toLowerCase(str)}}</view>
      13.       </view>
      14.   </template>
      15.   export default {
      16.       config: {
      17.           title: '原生 Swan Filter 支持'
      18.       },
      19.       data: {
      20.           str: 'aCs'
      21.       }
      22.   };
      23.   </script>

    • 支付宝自定义脚本支持

      1.   <template>
      2.       <view class="native-filter-wrap">
      3.           <import-sjs from="../filters/util.sjs" name="util"></import-sjs>
      4.           <view>{{str}}: {{util.toUpperCase(str)}}</view>
      5.           <view>{{str}}: {{util.toLowerCase(str)}}</view>
      6.           <view>fitler nested {{str}}: {{util.toUpperCase(util.toLowerCase(str))}}</view>
      7.           <view>{{util.info}}</view>
      8.       </view>
      9.   </template>
      10.   <script>
      11.   export default {
      12.       config: {
      13.           title: '原生 Ant Filter 支持'
      14.       },
      15.       data: {
      16.           str: 'aCs'
      17.       }
      18.   };
      19.   </script>