el-dialog里的el-input绝对定位后无法输入

最新推荐文章于 2024-09-13 15:20:13 发布

小小小小小惠

最新推荐文章于 2024-09-13 15:20:13 发布

阅读量300

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/lornall/article/details/129883538

版权

文章讨论了一个组件searchContent中的问题，当searchTOP类使用绝对定位后，el-input输入框功能失效。为实现el-input和button的吸顶效果，作者给它们所在的row设定了固定高度，并设置了下部内容的div为高度100%且超出隐藏。文章主要关注CSS布局和组件交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

searchContent是个组件

组件里代码:

searchTOP这个类写成绝对定位el-input就不能输入了。

我要实现的效果是要把el-input 和button吸顶

所以我给他们所在的row一个高度

下边内容的div height:100%;内容超过高度用overflow-y:hidden

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小小小小小惠

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【ElementPlus】修改Element Plus中部分组件的原有样式，包含：el-input、el-select、el-dialog、el-drawer等组件样式

✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过优快云记录学习心得和笔记内容。

12-14

774

el-input、el-select、el-dialog等组件中，边框的样式都是带有圆角的，对我来说，我不太喜欢圆角的样式，更喜欢正常的边框，正方形看起来更舒服，所以就需要修改组件的原有样式，可以使用下面代码修改原有样式。这种方式其实是直接获取到header标签，然后直接修改header标签的样式。

vue el-dialog

Yueqin0512的博客

09-22

730

<el-dialog title="Change Passward" :visible.sync="editDialogFormVisible" width="30%" :append-to-body="true" :close-on-click-modal="false"> <el-form ref="changePassward" :model="changePass...

参与评论您还未登录，请先登录后发表或查看评论

二次打开el-dialog，el-input赋值后不能输入的问题

weixin_45741044的博客

03-04

793

（2）改为 this.$set(target,key,value) 赋值即可，注意key是字符串，要加单引号。点击“新增”按钮打开对话框，此时el-input有一个默认值60，可编辑输入或点击箭头增、减1。点击“取消”或“保存”后，再次点击“新增”按钮，此时el-input默认值为60，不能改变了。（1）原本的新增按钮click事件里是用 = 直接赋值的。

el-input无法进行输入以及el-radio触发了两次点击事件

weixin_44082271的博客

11-17

2669

记录使用elementUI的时候遇到的问题。例如：el_input无法进行输入、el-radio触发单次点击事件等。

el-input输入框无法输入问题

Giraffe0615的博客

08-24

1万+

el-input输入框无法输入问题

element ui 输入框不能输入内容

yuguang的博客

07-06

6480

原先代码 addUserForm只是一个空对象  <el-form :model="addUserForm" :rules="addUserFormRules" ref="addUserFormRef" label-width="70px" label-position="left" > <el-form-item label="用户名" prop=

如何点击按钮把光标定位到想要的el-input中

guapilixianghe的博客

12-23

1026

3.回车键触发的方法。

解决elementUI中el-form、el-dialog、数据回显同时用时，有bug

阿超的博客

10-29

4650

第一次打开网页，先点击修改，再点击新增，发现输入框竟然有值，点击修改后，关闭对话框的时候，置空失效了

el-table 里面嵌套el-input 数据改变了但是页面没有同步更新（全网最全）

weixin_44875212的博客

03-21

1915

el-table 里面嵌套el-input 数据改变了但是页面没有同步更新（全网最全）

vue使用Element-ui el-dialog弹出层

aaaaaaddddsssss的博客

02-21

1211

点击添加歌手弹出 <template> <div class="table"> <div class="container">  <div class="handle-box"> <el-button type="primary" size="mini" @click="centerDialogVisable=true">添加歌手</el-.

移动端使用页尾文字使用绝对定位遇到input框会飘起来的处理方案

weixin_30408309的博客

02-27

250

如下版权信息的样式在遇到input框的时候会跟随输入框其后优雅的解决方式：（定位遇上键盘飘窗解决） mounted里面写上：var originalHeight=document.documentElement.clientHeight || document.body.clientHeight; //console.info("原始窗口的高度"+ori...

解决element-ui输入框无法输入的问题

weixin_45932733的博客

02-07

3575

1.在data中定义的变量必须要有初始值，且不能为Null（作者本人就是这个问题导致编辑时，输入框无法输入） 2.在网上也出现很多这种回答，就是给他添加一个@input事件@input事件可以拿到输入的值，然后使用this.$forceUpdate() 方法更新视图即可 ...

在el-dialog中改变el-input背景颜色以及el-form的el-input样式控制

qq_40221737的博客

09-13

482

3.在vue中的css设置【一般是下，增加/deep/ 以及浏览器中提取的控件块】问题：在el-dialog中，/deep/ el-input__inner 失效了。关键部分: cell-style = "cekkStyleRef"1.浏览器中按F12，利用动态选中，查看是哪个容器相关。2.发现原来是【Form】表单的问题。

el-dialog嵌套的影响、原因及解决方法

卡卡的博客

06-21

1万+

用Dialog嵌套Dialog所踩过的坑

开发（bug）总结5-el-input无法输入的问题和表单验证失败问题(亲测有效)

Mr_LiuP的博客

10-20

3732

原因（可能）：网上查了很多都没有给出明确的解释，有的说可能是因为组件嵌套太深导致的，也有可能是组件本身有潜在bug。真实原因也没搞懂，有知道的同学可以告诉下。// this.$forceupdate() // 强制数据刷新之后, 验证失效, 改用 $set ,亲测有效。点击添加，表单内可输入用户名和用户姓名，但有时会偶发出现无法这两个input框里面无法输入内容。大部分无法输入的问题：基本都是没有进行v-model双向数据绑定，这个很好解决。

el-input无法输入的问题和表单验证失败问题

weixin_53716093的博客

01-20

1万+

我们在做后台管理系统使用elementUI框架的时候会遇到一些问题，例如el-input无法输入问题，或者是使用了$forceUpdate后出现表单验证失败问题

vue项目，el-input和下拉框等会出现输入不了内容的问题

Chivnk的博客

04-28

1189

el-input输入不了内容

vue3 el-dialog中的input无法更新的问题

JeallyBean的博客

10-24

2380

vue3开发中的el-dialog中的input输入失效，无法更新

el-dialog(对话框)入门学习

最新发布

03-29

<think>好的，我现在需要帮助用户解决在Vue3和Element-Plus中使用el-dialog时，第一次点击el-input时自适应高度（autosize）不生效的问题。根据用户提供的引用内容，我需要先理解问题的原因，然后找出解决方案。首先，用户提到引用[2]和[3]指出el-dialog的内容可能有缓存，导致组件不刷新。这可能意味着当第一次打开对话框时，el-input的autosize属性没有正确应用，因为组件没有完全初始化或重新渲染。而后续打开时可能因为缓存已经存在，所以表现正常。接下来，我需要考虑可能的解决方法。根据引用[3]，刷新父组件数据可以促使el-dialog内的组件刷新。但用户的问题可能更具体于首次加载时的初始化问题。可能需要在对话框打开时手动触发el-input的autosize功能，或者确保组件正确挂载。可能的解决步骤包括： 1. 使用v-if强制重新渲染对话框，确保每次打开时都是新的实例。 2. 在对话框打开的事件（如@open）中调用el-input的resize方法，例如通过ref获取输入框实例并触发autosize。 3. 检查autosize的配置是否正确，比如是否需要设置minRows或maxRows。 4. 确保el-input的绑定值正确，数据更新可能触发重新渲染。还需要考虑Element-Plus中el-input的autosize是否依赖某些特定的生命周期钩子，可能在对话框首次渲染时未正确触发。例如，在对话框完全展开后，autosize可能需要重新计算高度，这时候可能需要手动调用调整方法。另外，用户提到的closeDialog方法中重置了数据，但第一次打开时可能数据还未准备好，或者el-input的DOM元素尚未渲染完成，导致autosize无法正确计算高度。可能需要使用nextTick来等待DOM更新后再触发autosize。综合以上思考，解决方案可能涉及强制重新渲染对话框组件，并在适当的时机手动触发autosize的调整。同时，确保数据正确绑定，并在对话框打开时处理相关逻辑。</think>### 问题分析在 Element-Plus 的 `el-dialog` 中首次点击时，`el-input` 的 `autosize` 高度自适应失效，通常是由于 **组件缓存未完全初始化** 或 **DOM 渲染时机问题** 导致。根据引用内容，`el-dialog` 默认会缓存内部组件状态[^2][^3]，首次加载可能未正确触发 `autosize` 的计算逻辑。 --- ### 分步解决方案 #### 方法 1：强制销毁并重新渲染 `el-dialog` 通过 `v-if` 强制销毁重建对话框，确保每次打开时组件状态全新： ```vue <el-dialog v-model="examWinVisible" v-if="examWinVisible"  @open="handleDialogOpen" @closed="handleDialogClosed" > <el-input v-model="inputText" type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" ref="autoSizeInput" /> </el-dialog> ``` #### 方法 2：手动触发 `autosize` 计算在对话框打开事件中，手动调用 `autosize` 的底层方法： ```javascript // Vue3 组合式 API 示例 import { nextTick, ref } from 'vue'; const autoSizeInput = ref(null); const handleDialogOpen = async () => { await nextTick(); // 等待 DOM 更新 if (autoSizeInput.value) { autoSizeInput.value.resizeTextarea(); // 触发高度计算 } }; ``` #### 方法 3：动态绑定 `key` 强制刷新通过改变 `key` 值强制重新渲染 `el-input`： ```vue <el-input :key="inputKey"  v-model="inputText" type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" /> // Script const inputKey = ref(0); const handleDialogOpen = () => { inputKey.value++; // 每次打开对话框时更新 key }; ``` --- ### 关键点总结 - **缓存问题**：`el-dialog` 默认缓存内容，需通过 `v-if` 或 `key` 强制刷新[^2] - **渲染时机**：使用 `nextTick` 确保 DOM 更新后操作[^1] - **API 调用**：直接调用 `resizeTextarea` 方法触发自适应计算（Element-Plus 内部方法） ---