如何在Vue 3脚本设置中设置DOM元素高度(Composition API)？

zf2sa74q 于 2022-12-19 发布在 Vue.js

关注(0)|答案(1)|浏览(452)

我正在尝试将script setup中的DOM元素height设置为200px：

<script setup>

const element = ref(null)

onMounted(() => {
    element.value.innerHeight = 200
    element.value.height = 200
    element.value.outerHeight = 200
})

</script>

<template>
  <div ref="element" class="w-6/12 p-4 mx-auto rounded border border-slate-400 bg-slate-50 shadow cursor-pointer hover:border-slate-600 hover:shadow-md transition mb-4 overflow-hidden transition-all duration-500">

    // ...

  </div>
</template>

尽管element ref对象的innerHeight/height/outerHeight已更改，但div元素仍使用height: auto呈现。
如何通过javascript控制composition api中的DOM element styles？

vue.js

来源：https://stackoverflow.com/questions/74808213/how-to-set-dom-element-height-in-vue-3-script-setup-composition-api

1条答案

按热度按时间

f4t66c6m1#

不能通过设置元素的height/innerHeight/outerHeight来更改元素的高度。您应该更新其样式属性。
有2种方法可供选择：

**方法一：**直接用js设置样式

<script setup>

const element = ref(null)

onMounted(() => {
    element.value.style.height = '200px'
})

</script>

**方法2：**让Vue通过React变量为您更新样式

<script setup>

const elementStyle = reactive({
  height: '100px'
})

onMounted(() => {
    elementStyle.height = '200px'
})

</script>

<template>
  <div :style="{ height: elementStyle.height }">

    // ...

  </div>
</template>

赞(0）回复(0）举报 2022-12-19

我来回答

如何在Vue 3脚本设置中设置DOM元素高度(Composition API)？

1条答案

相关问题

热门标签

最新问答