Как добавить кучу глобальных фильтров в Vue.js?

Question

Как добавить кучу глобальных фильтров в Vue.js?

Я хочу использовать несколько глобальных фильтров в Vue.JS app. Я знаю, что мне нужно определить их перед моим главным экземпляром Vue, но вставляю их все в " main.файл js не кажется мне правильным с точки зрения организации кода. Как я могу иметь определения в отдельном файле, импортированном в ' main.Джей Си? Никак не могу взять в толк, что такое импорт/экспорт.

655 3

vue.js

3 ответов:

Comments

Ничего не найдено.

Bert · Accepted Answer · 2018-09-04 18:09:56

Создайте фильтры.файл js.
import Vue from "vue"

Vue.filter("first4Chars", str => str.substring(0, 4))
Vue.filter("last4Chars", str => str.substring(str.length - 4))
Импортируйте его в свой main.JS.
import Vue from 'vue'
import App from './App'
import "./filters"

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
})
Вот рабочий пример.

Lucas Katayama · Accepted Answer · 2017-10-30 00:02:32

Я думаю, что лучший способ-это использовать функцию pluginиз VueJS
Создайте папку filters и поместите туда все фильтры ...
- filters
  | - filter1.js
  | - index.js
В файле filter экспортируйте нужную вам функцию, в этом примере я буду использовать фильтр верхнего регистра:
export default function uppercase (input) {
    return input.toUpperCase();
}
В index.js импортируем и создаем плагин:
import uppercase from './filter1';


export default {
     install(Vue) {
         Vue.filter('uppercase', uppercase);
     }
}
В тебе главное.JS файл use it
import filters from './filters';
import Vue from 'vue';

Vue.use(filters);

Matthew Kirkley · Accepted Answer · 2018-06-20 20:16:25

Что мне нравится делать, так это

Есть фильтр на файл (модуль es6)

Зарегистрируйте фильтр глобально с помощью vue в модуле

Также экспортируйте функцию фильтра как экспорт по умолчанию

Например, для простого фильтра, который помещает разделители запятых в числа, я создаю NumberFilter.js и NumberFilter.тест.js

NumberFilter.js
import Vue from 'vue';
import numeral from 'numeral';

const NumberFilter = number => numeral(value).format('0,0');

Vue.filter('number', numberFilter);

export default numberFilter;
NumberFilter.тест.js
import NumberFilter from './NumberFilter';

describe('NumberFitler', () => {
   it('exists', () => {
      expect(NumberFilter).toBeDefined();
   });

   it('does its thing', () => {
       expect(NumberFilter(1234)).toEquals('1,234');   
   });
});
Это стратегия позволяет мне использовать этот фильтр в коде в качестве стандартного модуля es6, а также в моих шаблонах Vue.

В реальном мире я бы, вероятно, высмеял цифру в своем тесте и просто убедился в результате .формат был вызван с правильным числовым форматом.