vue3原生DOM渲染问题

Question

我使用的原生DOM，想叫resultDiv被CSS渲染到，如何实现呢，请指点
上代码：

<script setup lang="ts">
let resultDiv !: HTMLDivElement//显示结果的元素
const showResult = function (str : string) {
  if(document.getElementById("prizeDiv")){//如果存在该元素
    document.body.removeChild(resultDiv);//移除元素
    console.log('removeChild')
  }
  resultDiv = document.createElement("div")//创建div元素
  resultDiv.id="prizeDiv"//设置元素id
  resultDiv.className = "prizeDiv"//为div设置class属性值
  if(  str !== "a"){
    resultDiv.innerHTML = "恭喜您获得"+str //显示的内容
  }else{
    resultDiv.innerHTML =str//显示的内容
  }
  document.body.appendChild(resultDiv)
}
</script>
<template>
  <div>
    <div class="header">
      <div class="play">
        <div class="box"></div>
        <p class="btn_arr">
          <input id="btn1" type="button" @click="showResult('a')" class="play_btn" value="添加">
        </p>
      </div>
    </div>
  </div>
</template>
<style scoped>
.prizeDiv{
  width:376px;/*设置宽度*/
  height:100px;/*设置高度*/
  line-height:100px;/*设置行高*/
  text-align:center;/*设置文本水平居中显示*/
  font-size:18px;/*设置文字大小*/
  font-weight:bolder;/*设置文字粗细*/
  color:#FFFFFF;/*设置文字颜色*/
  background-color:#666666;/*设置背景颜色*/
  opacity:0.9;/*设置不透明度*/
  position:absolute;/*设置绝对定位*/
  top:44%;/*设置元素到父元素顶端距离*/
  left:50%;/*设置元素到父元素左端距离*/
  z-index:10;/*设置元素堆叠顺序*/
  transform: translate(-50%, -50%);/*设置元素平移*/
}
</style>

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

Vue3原生DOM渲染问题

你想使用 Vue3 的 script setup 语法来访问原生 DOM 元素，并将其渲染到页面上。为了实现这个目标，你可以使用 ref 函数来获取 DOM 元素，然后使用 innerHTML 属性来设置元素的内容。

以下是一个简单的示例代码：

<script setup lang="ts">
  let resultDiv = ref<HTMLDivElement>()

  onMounted(() => {
    resultDiv.value.innerHTML = 'Hello, World!'
  })
</script>

<div ref="resultDiv"></div>

在上面的代码中，我们使用 ref 函数来创建一个名为 resultDiv 的引用，并将其类型设置为 HTMLDivElement。然后，在 onMounted 生命周期钩子函数中，我们使用 innerHTML 属性来设置 resultDiv 元素的内容。

请注意，在 Vue3 中，script setup 语法只能在组件的根元素中使用，不能在子组件中使用。如果你想在子组件中使用 ref 函数，可以使用 setup 函数来实现。

如果你想在 CSS 中渲染 resultDiv 元素，可以使用 :deep() 伪类选择器来访问子元素。例如：

.result-div {
  /* your styles here */
}

:deep(.result-div) {
  /* your styles here */
}

在上面的代码中，我们使用 :deep() 伪类选择器来访问 resultDiv 元素的子元素，然后可以使用 CSS 选择器来设置样式。