vue3+typescript实现全局过滤器

由于vue3取消了vue2中的过滤器，如何再实现自己的全局过滤器呢？利用的组合式api和vue的全局属性定义来实现

定义自己过滤器

import { getCurrentInstance, App } from 'vue'

type DefaultImgProps = (url: string) => string

interface FilterProps {
  defaultImge: DefaultImgProps
}

// 需要声明模块定义了哪些自定义属性
declare module '@vue/runtime-core'{
  interface ComponentCustomProperties {
    $filter: FilterProps
  }
}

// 自己的过滤器
const filter: FilterProps = {
  defaultImge: (url: string) => url || require('@/assets/column.jpg')
}

export const useFilter = (app: App<Element>) => {
  app.config.globalProperties.$filter = filter
}

export const getFilter = (): FilterProps => {
  const currentInstace = getCurrentInstance()
  const defaultImge = currentInstace?.proxy?.$filter.defaultImge as DefaultImgProps
  
  return {
    defaultImge
  }
}

vue全局定义

import { createApp } from 'vue'
import App from './App.vue'

import { useFilter } from './hooks/useFilter'

const app = createApp(App)

useFilter(app)

app.mount('#app')

组件使用

<script lang="ts">
import { defineComponent } from 'vue'
import { getFilter } from '../hooks/useFilter'

export default defineComponent({
  setup() {
    const defaultImgeFilter = getFilter().defaultImge

    return {
      defaultImgeFilter
    }
  }
})
</script>