Я хочу использовать несколько глобальных фильтров в приложении Vue.js. Я знаю, что мне нужно определить их перед моим основным экземпляром Vue, но привязать их все в файле "main.js" не представляется мне правильным с точки зрения организации кода. Как я могу определить определения в отдельном файле, импортированном в 'main.js'? Не могу получить голову вокруг импорта/экспорта для этого.
Как добавить кучу глобальных фильтров в Vue.js?
Ответ 1
Создайте файл filters.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 },
})
Вот рабочий пример.
Ответ 2
Я думаю, что лучший способ - использовать функцию plugin
из VueJS
-
Создайте папку
filters
и поместите все ваши фильтры там...- filters | - filter1.js | - index.js
-
В файле фильтра экспортируйте нужную вам функцию, в этом примере я использую фильтр в верхнем регистре:
export default function uppercase (input) { return input.toUpperCase(); }
-
В
index.js
импортировать и создать плагин:import uppercase from './filter1'; export default { install(Vue) { Vue.filter('uppercase', uppercase); } }
-
В файле main.js используйте его
import filters from './filters'; import Vue from 'vue'; Vue.use(filters);
Ответ 3
Что мне нравится делать, так это
Есть фильтр для файла (модуль es6)
Зарегистрируйте фильтр глобально с помощью vue в модуле
Также экспортируйте функцию фильтра как экспорт по умолчанию
Например, для простого фильтра, который помещает разделители запятых в числа, я создаю NumberFilter.js и NumberFilter.test.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.test.js
import NumberFilter from './NumberFilter';
describe('NumberFitler', () => {
it('exists', () => {
expect(NumberFilter).toBeDefined();
});
it('does its thing', () => {
expect(NumberFilter(1234)).toEquals('1,234');
});
});
Эта стратегия позволяет мне использовать этот фильтр в коде как стандартный модуль es6, а также в моих шаблонах Vue.
В реальном мире я, вероятно, высмеиваю цифру в своем тесте и просто проверяю, что результат .format вызывается в правильном числовом формате.
Ответ 4
Vue mixins можно использовать для добавления глобальных фильтров, фильтры можно настроить в файле, а затем импортировать файл фильтров в файл main.js.
filters.js
export default{
firstWordCapitalize (value) => {
if (!value)
return ''
value = value.toString()
return value.charAt(0).toUpperCase();
},
anotherFilter(value) =>{
return value+"-test";
}
}
main.js
import Vue from 'vue';
import Filters from './filters';
Vue.mixin({
filters: Filters
});
И вы можете использовать фильтры в любом шаблоне.