Reka UI 徽标Reka
backdrop
示例
实用工具

useFilter

区域敏感的字符串过滤

useFilter 提供了使用 Intl.Collator 进行区域敏感字符串过滤的实用函数。它确保了正确的 Unicode 处理，并允许通过 Intl.CollatorOptions 进行自定义。

选项

您可以使用 Intl.CollatorOptions 自定义行为。有关更多详细信息，请参阅 MDN 文档。

ts
const { startsWith } = useFilter({ sensitivity: 'base' })
console.log(startsWith('Résumé', 'resume')) // true (case-insensitive)

用法

使用示例

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(['Apple', 'Banana', 'Cherry', 'Date'])

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

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