Comment utiliser le filtre à l'échelle mondiale

Cette fois, je vais vous montrer comment utiliser le filtre de manière globale, et quelles sont les précautions pour utiliser le filtre de manière globale. Voici un cas pratique, jetons un coup d'œil.

Officiellement donné

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

Afficher les détails

Si nous avons plusieurs filtres dans le projet, comment puis-je les enregistrer en même temps et les rendre disponibles dans le monde entier ? nouveau dans le projet Un dossier de filtres, comme suit, index.js est le fichier d'exportation, readMore est un filtre

chaîne

Répertoire de fichiers

//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;

Main.js est enregistré mondialement

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

//在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>

Que faire si le projet réel n'est pas dans le répertoire racine après la compilation

Comment obtenir la valeur de la classe dans le dom

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!