useTextDirection

分类

浏览器

导出大小

796 B

上次更改

3 个月前

元素文本的响应式 dir。

演示

源代码演练场 (beta)

此段落是英文的，并且从左到右正确显示。

点击以改变方向

用法

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>

选项

import { useTextDirection
 } from '@vueuse/core'

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

类型声明

export type UseTextDirectionValue
 = "ltr" | "rtl" | "auto"
export interface UseTextDirectionOptions extends ConfigurableDocument {
  /**
   * CSS Selector for the target element applying to
   *
   * @default 'html'
   */
  selector
?: string
  /**
   * Observe `document.querySelector(selector)` changes using MutationObserve
   *
   * @default false
   */
  observe
?: boolean
  /**
   * Initial value
   *
   * @default 'ltr'
   */
  initialValue
?: UseTextDirectionValue

}
/**
 * Reactive dir of the element's text.
 *
 * @see https://vueuse.org.cn/useTextDirection
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function useTextDirection
(
  options
?: UseTextDirectionOptions,
): WritableComputedRef
<UseTextDirectionValue
, UseTextDirectionValue
>