Reka UI logoReka UI 中文文档
backdrop
Examples
工具

useFilter

支持区域设置感知的字符串过滤

useFilter 提供使用 Intl.Collator 进行区域设置感知字符串过滤的工具函数。它能确保正确的 Unicode 处理，并允许通过 Intl.CollatorOptions 进行自定义配置。

选项

可通过 Intl.CollatorOptions 自定义行为。详见 MDN 文档。

ts
const { startsWith } = useFilter({ sensitivity: 'base' })
console.log(startsWith('Résumé', 'resume')) // true (不区分大小写)

使用方法

使用示例

ts
import { useFilter } from 'reka-ui'

const { startsWith, endsWith, contains } = useFilter()

console.log(startsWith('hello', 'he')) // true
console.log(endsWith('hello', 'lo')) // true
console.log(contains('hello', 'ell')) // true

在 Vue 组件中使用 useFilter

vue
<script setup>
import { ref } from 'vue'
import { useFilter } from '@/composables/useFilter'

const { contains } = useFilter()
const searchQuery = ref('')
const items = ref(['苹果', '香蕉', '樱桃', '椰枣'])

const filteredItems = computed(() =>
  items.value.filter(item => contains(item, searchQuery.value))
)
</script>

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索...">
    <ul>
      <li v-for="item in filteredItems" :key="item">
        {{ item }}
      </li>
    </ul>
  </div>
</template>