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

Collez le code ci-dessous :

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

Ensuite, effectuez le traitement suivant dans main.js :

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);
 });
}

et il peut être utilisé mondialement

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

Je crois que vous l'avez maîtrisé après En lisant le cas dans cet article Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

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!