useChangeCase

Demo

camelCasecapitalCaseconstantCasedotCaseheaderCasenoCaseparamCasepascalCasepathCasesentenceCasesnakeCase

"helloWorld"

Available in the @vueuse/integrations add-on.

安装

bash

npm i change-case@^4

用法

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 { 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>