useChangeCase

分类

@Integrations

导出大小

386 B

包

@vueuse/integrations

上次更改

3 个月前

change-case 的响应式封装。

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

演示

源代码在线演练 (测试版)

驼峰式命名首字母大写式命名常量式命名点分隔式命名烤串式命名无格式命名帕斯卡式命名帕斯卡蛇形命名路径式命名句子式命名蛇形命名列车式命名

helloWorld

可在 @vueuse/integrations 插件中使用。

安装

bash

npm i change-case@^5

用法

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 将随源 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>