Vue实现输入内容/字号实时变更时动态更新Div样式的咨询

完全可以实现实时重算，核心是替换@change事件为实时触发的机制，以下是两种可行方案：

方案一：使用@input事件绑定 #

@input会在输入框内容每一次变化（输入/删除字符、调整数字）时立即触发，直接绑定重算函数即可替代@change的失焦触发逻辑。

<template>
  <div>
    <!-- 带红色边框的文本容器 -->
    <div class="text-box" :style="{ border: `${borderSize}px solid red`, fontSize: `${fontSize}px` }">
      {{ textContent }}
    </div>

    <!-- 控制区域 -->
    <div class="controls">
      <div>
        <label>文本内容：</label>
        <input v-model="textContent" @input="updateBorderSize" placeholder="输入内容" />
      </div>
      <div>
        <label>字号（px）：</label>
        <input type="number" v-model.number="fontSize" @input="updateBorderSize" min="12" />
      </div>
      <div>
        <label>边框宽度（px）：</label>
        <input type="number" v-model.number="borderSize" min="1" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textContent: '测试文本',
      fontSize: 16,
      borderSize: 2,
      boxWidth: 'auto',
      boxHeight: 'auto'
    }
  },
  mounted() {
    // 初始化时计算一次尺寸
    this.updateBorderSize()
  },
  methods: {
    updateBorderSize() {
      const textBox = document.querySelector('.text-box')
      if (textBox) {
        // 获取容器实际占用的宽高（含内边距、边框）
        const rect = textBox.getBoundingClientRect()
        // 这里可根据需求调整尺寸逻辑，比如固定容器宽高
        this.boxWidth = `${rect.width}px`
        this.boxHeight = `${rect.height}px`
        // 如果不需要固定尺寸，仅需适配文本的话，保持auto即可
      }
    }
  }
}
</script>

<style scoped>
.text-box {
  display: inline-block; /* 让容器贴合文本宽度 */
  padding: 8px;
  margin: 20px 0;
}
.controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 350px;
}
input {
  padding: 6px;
  margin-left: 8px;
}
</style>

方案二：使用watch监听数据变化 #

通过监听textContent和fontSize的变化，只要这两个值更新就自动触发重算，无需在每个输入框绑定事件，适合多数据联动的场景。

<template>
  <div>
    <div class="text-box" :style="{ border: `${borderSize}px solid red`, fontSize: `${fontSize}px` }">
      {{ textContent }}
    </div>

    <div class="controls">
      <div>
        <label>文本内容：</label>
        <input v-model="textContent" placeholder="输入内容" />
      </div>
      <div>
        <label>字号（px）：</label>
        <input type="number" v-model.number="fontSize" min="12" />
      </div>
      <div>
        <label>边框宽度（px）：</label>
        <input type="number" v-model.number="borderSize" min="1" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textContent: '测试文本',
      fontSize: 16,
      borderSize: 2
    }
  },
  mounted() {
    this.updateBorderSize()
  },
  watch: {
    // 监听文本内容变化
    textContent() {
      this.updateBorderSize()
    },
    // 监听字号变化
    fontSize() {
      this.updateBorderSize()
    }
  },
  methods: {
    updateBorderSize() {
      const textBox = document.querySelector('.text-box')
      if (textBox) {
        const rect = textBox.getBoundingClientRect()
        // 这里可根据业务需求处理尺寸，比如输出到控制台或绑定到样式
        console.log('当前容器尺寸：', rect.width, rect.height)
      }
    }
  }
}
</script>

<style scoped>
.text-box {
  display: inline-block;
  padding: 8px;
  margin: 20px 0;
}
.controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 350px;
}
input {
  padding: 6px;
  margin-left: 8px;
}
</style>

关键说明 #

• 用display: inline-block让文本容器贴合文本实际宽度，确保getBoundingClientRect()能获取到准确的尺寸。
• 边框宽度的修改不影响文本尺寸，因此不需要触发重算，直接绑定v-model即可实时生效。
• 两种方案可根据实际场景选择：@input适合单个输入框的实时响应，watch适合多数据联动的自动触发。

内容的提问来源于stack exchange，提问作者Ruslan54