Skip to content

useTextDirection

Category
Export Size
821 B
Last Changed
last year

元素文本的响应式 dir

Demo

This paragraph is in English and correctly goes left to right.


单击以更改方向

用法

ts
import { useTextDirection } from '@vueuse/core'

const dir = useTextDirection() // Ref<'ltr' | 'rtl' | 'auto'>

默认情况下,当将 dir rtl 应用于 html 标签时,它返回 rtl 方向,例如:

html
<!--ltr-->
<html>
  ...
</html>

<!--rtl-->
<html dir="rtl">
  ...
</html>

选项

ts
import { useTextDirection } from '@vueuse/core'

const mode = useTextDirection({
  selector: 'body'
}) // Ref<'ltr' | 'rtl' | 'auto'>

类型声明

typescript
export type UseTextDirectionValue = "ltr" | "rtl" | "auto"
export interface UseTextDirectionOptions extends ConfigurableDocument {
  /**
   * 适用于的目标元素的 CSS 选择器
   *
   * @default 'html'
   */
  selector?: string
  /**
   * 使用 MutationObserver 观察 `document.querySelector(selector)` 的变化
   *
   * @default false
   */
  observe?: boolean
  /**
   * 初始值
   *
   * @default 'ltr'
   */
  initialValue?: UseTextDirectionValue
}
/**
 * 元素文本的响应式方向。
 *
 * @see https://vueuse.org/useTextDirection
 */
export declare function useTextDirection(
  options?: UseTextDirectionOptions,
): WritableComputedRef<UseTextDirectionValue>

Source

SourceDemoDocs

贡献者

Anthony Fu
丶远方
iChengbo
Eyal Peleg
Nestor Vera

变更日志

No recent changes

Released under the MIT License.

Build faster with AI
New Masterclass to help you leverage AI in your Vue workflow.
Get Early Access