小程序开发中实现 filter 全局使用的方法探讨

why 287 2024-09-03 09:44:27

这次给大家带来filter怎样全局使用,filter全局使用的注意事项有哪些,下面就是实战案例,一起来看一下。

官方给出

1

2

3

Vue.filters(id , [definition])

//id {string}

//definition {function}

详情查看

在项目中我们如果有多个filters,那么我怎么一次注册,全局可用,我们在项目里新建一个filters文件夹,如下,index.js是出口文件,readMore是一个对字符串做处理的过滤器

image.png

文件目录

下面贴上代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

//index.js

// 引入所有的过滤函数

import readMore from './readMore';

// 导出在一个对象上

export default {

  readMore

};

//readMore.js

//查看更多文字显示'...'

let readMore = (text,length,suffix) => {

 if(text) {

  if(text.length <p style="text-align: left;">然后在main.js里面做如下处理:</p><p style="text-align: left;"><img src="https://img.php.cn/upload/article/000/061/021/291b9a26604affe749aca9aa2b99c650-1.png" alt=""></p><p   style="max-width:90%"><strong>main.js做全局注册</strong></p><pre class="brush:php;toolbar:false">//全局注册自定义的过滤器

import filters from './filters';

for(let key in filters){

 Vue.filter(key, (val,value1,value2) =&gt; {

 return filters[key](val,value1,value2);

 });

}

就可以在全局使用了

1

2

3

//在test.vue里面使用

  <p>全文`)"&gt;</p>

<span>#<span>{{'文字文字' | readMore(15,'...')}}</span>#</span>

相信看了本文案例你已经掌握了方法。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:小程序开发方案: 构建你的在线商店
下一篇:小程序开发中 filter 使用案例总结及分析
相关文章