В Vue.js как написать пользовательские фильтры в отдельном файле и использовать их в различных компонентах, объявив в main.Яш?

Я пробовал это, но это не работает. 

// filter.js

export default {
    converTimestamp: function (seconds) {
      var date = new Date(seconds * 1000);
      return date.toDateString();
    }
};

// main.js

import customFilters from './store/filters';
9
vue.js

2 ответов

вот пример:

// MyFilter.js
import Vue from 'vue';

Vue.filter('myFilter', value => {
  return value.toUpperCase();
});

// main.js
import './MyFilter.js';

если вы не хотите регистрировать фильтры глобально, вы можете сделать это следующим образом:

// MyFilter.js
export default function (value) {
  return value.toUpperCase();
}

// MyComponent.vue
import MyFilter from './MyFilter.js';

export default {
  filters: {
    MyFilter,
  },
};
24

Если у вас не так много фильтров, вы также можете определить их в одном файле:

// filters.js
export default {
    filterA: () => {},
    filterB: () => {},
}

и импортировать их в глобальном масштабе:

// main.js
import filters from './filters';
for(let name in filters) {
    Vue.filter(name, filters[name]);
}
1