useChangeCase

类别

@Integrations

导出体积

386 B

依赖包

@vueuse/integrations

上次更改

2 months ago

对 change-case 的响应式封装。

替代 useCamelCase、usePascalCase、useSnakeCase、useSentenceCase、useCapitalize 等。

示例

源码 playground (beta)

camelCasecapitalCaseconstantCasedotCasekebabCasenoCasepascalCasepascalSnakeCasepathCasesentenceCasesnakeCasetrainCase

helloWorld

Available in the @vueuse/integrations add-on.

安装

bash

npm i change-case@^5

用法

import { useChangeCase
 } from '@vueuse/integrations/useChangeCase'

// `changeCase` 将是一个 computed
const changeCase
 = useChangeCase
('hello world', 'camelCase')
changeCase
.value
 // helloWorld
changeCase
.value
 = 'vue use'
changeCase
.value
 // vueUse
// 支持的方法
// export {
//   camelCase,
//   capitalCase,
//   constantCase,
//   dotCase,
//   headerCase,
//   noCase,
//   paramCase,
//   pascalCase,
//   pathCase,
//   sentenceCase,
//   snakeCase,
// } from 'change-case'

或者将一个 ref 传递给它，返回的 computed 将随着源 ref 的变化而变化。

可以将其传递给 options 进行定制化

import { useChangeCase
 } from '@vueuse/integrations/useChangeCase'
import { shallowRef
 } from 'vue'

const input
 = shallowRef
('helloWorld')
const changeCase
 = useChangeCase
(input
, 'camelCase', {
  delimiter
: '-',
})
changeCase
.value
 // hello-World
input
.value
 = 'vue use'
changeCase
.value
 // vue-Use

类型声明

type EndsWithCase
<T
> = T
 extends `${infer _
}Case` ? T
 : never
type FilterKeys
<T
> = {
  [K
 in keyof T
 as K
 extends string ? K
 : never]: EndsWithCase
<K
>
}
type ChangeCaseKeys
 = FilterKeys
<typeof changeCase>
export type ChangeCaseType
 = ChangeCaseKeys
[keyof ChangeCaseKeys
]
export declare function useChangeCase
(
  input
: MaybeRef
<string>,
  type
: MaybeRefOrGetter
<ChangeCaseType
>,
  options
?: MaybeRefOrGetter
<Options
> | undefined,
): WritableComputedRef
<string>
export declare function useChangeCase
(
  input
: MaybeRefOrGetter
<string>,
  type
: MaybeRefOrGetter
<ChangeCaseType
>,
  options
?: MaybeRefOrGetter
<Options
> | undefined,
): ComputedRef
<string>