容器元素的滚动条回到顶部

关闭再打开后，容器元素的滚动条回到顶部

解决方法：

1、通过打开开发者工具（F12），找到滚动条所属元素为 el-textarea__inner，其父类 class="el-textarea content"

2、代码，通过元素的方法 scrollTo(0, 0) 让滚动条回到顶部

<script setup lang="ts" name="BaseShowContentDialog">
/*** 显示内容模态框组件*/
defineOptions({ name: "BaseShowContentDialog" });
import { nextTick, ref } from "vue";interface Props {/** 标题 */title?: string;/** 内容 */content?: string;
}
const props = withDefaults(defineProps<Props>(), { title: "", content: "" });
// 对话框显示标识
const dialogVisible = ref(false);// 显示对话框
const showDialog = async () => {dialogVisible.value = true;// 滚动条回到顶部，通过开发者工具追查到滚动条对应的组件元素是 el-input，以应的原始元素是 textarea，其子类 class="el-textarea__inner"// 等待 DOM 渲染完毕await nextTick();// 指定元素（.content .el-textarea__inner，其中 .content 是指定的父类类名，.el-textarea__inner 是子类类名）的滚动条滚动到顶部(document.querySelector(".content .el-textarea__inner") as HTMLElement)?.scrollTo(0, 0);
};// 关闭对话框
const closeDialog = () => {dialogVisible.value = false;
};defineExpose({ showDialog });
</script><template><div><el-dialog:title="props.title"width="800px"top="0vh"style="border-radius: 10px"centerv-model="dialogVisible":close-on-press-escape="true":close-on-click-modal="false":show-close="false"draggable@closed="closeDialog"><template #><el-input class="content" type="textarea" v-model="props.content" rows="26" readonly /></template><template #footer><div><el-button type="primary" @click="closeDialog">关闭</el-button></div></template></el-dialog></div>
</template><style scoped lang="scss">
.content {// white-space: pre-wrap的作用是保留空格，并且除了碰到源码中的换行和会换行外，还会自适应容器的边界进行换行。white-space: pre-wrap;
}
</style>