useChangeCase

类别

@集成

导出大小

290 B

包

@vueuse/integrations

最近修改

2 days ago

针对 change-case 的响应式封装。

🌐 Reactive wrapper for change-case.

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

🌐 Subsitutes useCamelCase, usePascalCase, useSnakeCase, useSentenceCase, useCapitalize, etc.

示例

源代码在线运行

camelCasecapitalCaseconstantCasedotCasekebabCasenoCasepascalCasepascalSnakeCasepathCasesentenceCasesnakeCasetrainCase

helloWorld

Available in the @vueuse/integrations add-on.

安装

🌐 Install

npm i change-case@^5

用法

🌐 Usage

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

// `changeCase` will be a computed
const changeCase = useChangeCase('hello world', 'camelCase')
changeCase.value // helloWorld
changeCase.value = 'vue use'
changeCase.value // vueUse
// Supported methods
// export {
//   camelCase,
//   capitalCase,
//   constantCase,
//   dotCase,
//   headerCase,
//   noCase,
//   paramCase,
//   pascalCase,
//   pathCase,
//   sentenceCase,
//   snakeCase,
// } from 'change-case'

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

🌐 or passing a ref to it, the returned computed will change along with the source ref's changes.

可以传入 options 进行自定义

🌐 Can be passed into options for customization

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