如何给网站优化网站网页设计工作内容

通过 JavaScript 监听输入事件，临时将输入框宽度设为 auto 以获取内容真实宽度（scrollWidth），再将该宽度赋值给输入框，从而实现 “内容增减时宽度实时跟随”。

<template><div class="input-adaptive-container"><input ref="inputRef"v-model="inputValue"class="adaptive-input"placeholder="请输入内容"@input="adjustWidth"></div>
</template><script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';const inputRef = ref<HTMLInputElement | null>(null); // 输入框DOM引用
const inputValue = ref('啊啊啊啊啊事实上事实上事'); // 绑定的输入值// 调整输入框宽度的核心方法
const adjustWidth = () => {const input = inputRef.value;if (!input) return;input.style.width = 'auto'; // 临时设为auto，获取真实内容宽度// scrollWidth 是内容实际宽度（含溢出），+2px 是缓冲避免文字贴边input.style.width = `${input.scrollWidth + 2}px`;
};// 组件挂载后，初始化调整宽度（适配初始值）
onMounted(() => {nextTick(() => {adjustWidth();});
});
</script><style scoped>
.input-adaptive-container {text-align: center;padding: 20px;
}.adaptive-input {padding: 6px 8px;border: 1px solid #000;border-radius: 2px;font-size: 16px;outline: none;box-sizing: border-box; /* 确保padding/border不影响宽度计算 */width: auto; /* 基础样式，实际宽度由JS动态控制 */
}
</style>