排版记录,点耽误时间,我就简单的来,下面是一个vue过滤器的写法,演示演示,限制一个字符串的长度。
vue过滤器的官网介绍https://cn.vuejs.org/v2/guide/filters.html
下面就具体拿自己的一个例子介绍:
某个filter.js
//限制汉字的个数
出口const limitWordLength=Vue。过滤器(“limitWordLength”(str,长度,后缀)=比;{/* eslint-disable */让r=/[^ \ x00 - \ xff]/g//双字节正则
让米
如果(str.replace (r,‘* *’)。长度比;长度){
m=数学。地板(长度/2)
(让我=m, l=str.length;我& lt;l;我+ +){
如果(str.substr (0, 1) .replace (r,‘* *’)。长度在=长度){
返回str.substr(0, 1) +后缀
}
}
}
返回str
})
然后在某一个组件中引用
从“. ./filter.js”进口{limitWordLength}
使用:
& lt; p class=" news-cont”在{{新闻。摘要| limitWordLength(26日'…')}}& lt;/p>
过滤器,limitWordLength传递三个参数,第一个默认是,新闻。总结,第二个是26日第三个是“……”,如果这个过滤器方法要处理的东西,只要一个,新闻。摘要参数就可以的话,后面的参数也可以不传,直接这样
& lt; p class=" news-cont”在{{新闻。摘要| limitWordLength}} & lt;/p>
效果是这样的:
限制是26个字符,对应的汉子就是13个,如果超出就用…替换。
当然,在实际的应用中,想这种限制汉字的个数,达到前端展示的话,可以用下面的css,替换,目前在主流的设备上是可以兼容的,如果不是非常兼容低版本的,可直接用css代替过滤器:
.news-cont {
字体大小:12 px;
颜色:# 747474;
溢出:隐藏;
文本溢出:省略;
显示:-webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient:垂直;
}
以上所述是小编给大家介绍的vue的过滤器滤波器实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
