useCssVar

分类

浏览器

导出大小

796 B

上次更改

8 个月前

操作 CSS 变量

演示

源代码演练场 (beta)

示例文本

示例文本，--color

用法

import { useCssVar
 } from '@vueuse/core'
import { useTemplateRef
 } from 'vue'

const el
 = useTemplateRef
('el')
const color1
 = useCssVar
('--color', el
)

const elv
 = useTemplateRef
('elv')
const key
 = ref
('--color')
const colorVal
 = useCssVar
(key
, elv
)

const someEl
 = useTemplateRef
('someEl')
const color2
 = useCssVar
('--color', someEl
, { initialValue
: '#eee' })

类型声明

export interface UseCssVarOptions extends ConfigurableWindow {
  initialValue
?: string
  /**
   * Use MutationObserver to monitor variable changes
   * @default false
   */
  observe
?: boolean
}
/**
 * Manipulate CSS variables.
 *
 * @see https://vueuse.org.cn/useCssVar
 * @param prop
 * @param target
 * @param options
 */
export declare function useCssVar
(
  prop
: MaybeRefOrGetter
<string | null | undefined>,
  target
?: MaybeElementRef
,
  options
?: UseCssVarOptions,
): ShallowRef
<string | undefined, string | undefined>