Question

我尝试过这样做，但它不起作用。

@include foundation-everything($flex: false);

Answer 1

以下是一个例子：

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

Answer 2

如果没有那么多过滤器，也可以在一个文件中定义它们：

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

并将它们全局导入：

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

Answer 3

我们可以为此创建一个插件

// filters.js
import Vue from 'vue'

export function truncate( text, length, suffix = '...' ) {
    if (text.length > length) {
        return text.substring(0, length) + suffix;
    } else {
        return text;
    }
}

export function json( value ) {
    return JSON.stringify(value);
}

const filters = { truncate, json }

Object.keys( filters ).forEach( key => {
    Vue.filter( key, filters[ key ] )
})

然后在配置中添加这个新插件

export default {
  plugins: ['~/plugins/filters.js']
}

在Vue.js中如何在单独的文件中编写自定义过滤器，并通过在main.js中声明在各种组件中使用它们？

3 个答案: