useCssVar

Category

瀏覽器

導出大小

802 B

Last Changed

5 days ago

Manipulate CSS variables

Demo

source

Sample text,

Sample text, --color

Usage

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

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' })

Type Declarations

export interface UseCssVarOptions extends ConfigurableWindow {
  initialValue?: string
  /**
   * Use MutationObserver to monitor variable changes
   * @default false
   */
  observe?: boolean
}
/**
 * Manipulate CSS variables.
 *
 * @see https://vueuse.dev.org.tw/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>

Source

原始碼 • Demo • 文件

貢獻者

Anthony Fu

IlyaL

Anthony Fu

Robin

丶远方

Antério Vieira

babu-ch

Fernando Fernández

Waleed Khaled

木荣

JD Solanki

btea

Alex Kozack

更新日誌

v12.8.0 於 2025/3/5

7432f - feat(types): 棄用 MaybeRef 和 MaybeRefOrGetter，改用 Vue 原生方法 (#4636)

d680f - fix: 初始化時更新 variable (#4641)

v12.6.0 於 2025/2/14

d5dd8 - fix: 新行為模式 (#4500)

v12.3.0 於 2025/1/2

59f75 - feat(toValue): 棄用 @vueuse/shared 中的 toValue，改用 Vue 原生方法

v12.0.0-beta.1 於 2024/11/21

0a9ed - feat!: 移除 Vue 2 支援，最佳化 bundle 並清理程式碼 (#4349)

v11.0.2 於 2024/8/24

d0523 - fix: 使用直接樣式屬性存取取代 getComputedStyle (#4166)

v11.0.0-beta.2 於 2024/7/17

fe19c - feat(useCssVars): 在 null/undefined 時移除屬性 (#3821)

v10.2.0 於 2023/6/16

9d34a - fix: 根據元素 class list 觀察變更 (#3131)

v10.0.2 於 2023/4/14

7d001 - fix: 模組參考，關閉 #2972

v10.0.0-beta.4 於 2023/4/13

4d757 - feat(types)!: 將 MaybeComputedRef 重新命名為 MaybeRefOrGetter

0a72b - feat(toValue): 將 resolveUnref 重新命名為 toValue

v10.0.0-beta.0 於 2023/3/14

ae6e1 - feat: 引入 observe 選項 (#2800)