useChangeCase
对 change-case
的响应式封装。
替代 useCamelCase
、usePascalCase
、useSnakeCase
、useSentenceCase
、useCapitalize
等。
Demo
"helloWorld"
安装
bash
npm i change-case@^4
用法
ts
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
进行定制化
ts
import { ref } from 'vue'
import { useChangeCase } from '@vueuse/integrations/useChangeCase'
const input = ref('helloWorld')
const changeCase = useChangeCase(input, 'camelCase', {
delimiter: '-',
})
changeCase.value // hello-World
ref.value = 'vue use'
changeCase.value // vue-Use
类型声明
typescript
export type ChangeCaseType = keyof typeof changeCase
export declare function useChangeCase(
input: MaybeRef<string>,
type: ChangeCaseType,
options?: Options | undefined,
): WritableComputedRef<string>
export declare function useChangeCase(
input: MaybeRefOrGetter<string>,
type: ChangeCaseType,
options?: Options | undefined,
): ComputedRef<string>
Source
贡献者
变更日志
v10.0.0-beta.5
on 4/13/2023cb644
- refactor!: remove isFunction
and isString
utilsv10.0.0-beta.4
on 4/13/20234d757
- feat(types)!: rename MaybeComputedRef
to MaybeRefOrGetter
0a72b
- feat(toValue): rename resolveUnref
to toValue