How to use filter globally

This time I will show you how to use filter globally, what are the precautions for global use of filter, the following is a practical case, let's take a look.

Officially given

Vue.filters(id , [definition])
//id {string}
//definition {function}

View details

If we have multiple filters in the project, how can I register them at once and make them available globally? We create a new filter in the project Folder, as follows, index.js is the export file, readMore is a filter

that processes

string

File directory

Paste the code below:

//index.js
// 引入所有的过滤函数
import readMore from './readMore';
// 导出在一个对象上
export default {
  readMore
};
//readMore.js
//查看更多文字显示'...'
let readMore = (text,length,suffix) => {
 if(text) {
  if(text.length <= length) return text;
  return text.substring(0,length) + suffix;
 }
 return text;
 };
export default readMore;

Then do the following processing in main.js:

main.js does global registration

//全局注册自定义的过滤器
import filters from './filters';
for(let key in filters){
 Vue.filter(key, (val,value1,value2) => {
 return filters[key](val,value1,value2);
 });
}

and you can use it globally

//在test.vue里面使用
  <p html="readMore(&#39;文字文字&#39; ,60,`...<font style=&#39;color:rgba(25,123,207,1);&#39;>全文</font>`)"></p>
<span>#<span class="add">{{'文字文字' | readMore(15,'...')}}</span>#</span>

I believe you have mastered the method after reading the case in this article. Please pay attention to php for more exciting things. Other related articles on the Chinese website!

Recommended reading:

What to do if the actual project is not in the root directory after compilation

How to get the value of the class in the dom

The above is the detailed content of How to use filter globally. For more information, please follow other related articles on the PHP Chinese website!