reactiveStyle

reactiveStyle 是一个辅助函数，用于创建一个与 HTML style 属性兼容的响应式对象。

参数

props

用于创建响应式对象的默认 StyleProperties 对象。

暴露

state

用于操作的响应式 StyleProperties 对象。

style

一个与 style 属性 兼容的响应式字符串。

示例

<template>
  <div
    :style="elementStyle" @click="toggleColor"
  />
</template>

<script setup>
const { state, style: elementStyle } = reactiveStyle({
  opacity: 0,
  backgroundColor: 'blue',
})

const toggleColor = () => {
  if (state.backgroundColor === 'blue')
    state.backgroundColor === 'red'
  else
    state.backgroundColor === 'blue'
}
</script>
目录