vue一直自动换行的问题及解决
更新时间：2024年03月08日 14:12:27 作者：唐僧爱吃唐僧肉
这篇文章主要介绍了vue一直自动换行的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue一直自动换行的问题
html换行主要是由于< div >标签引起的，而vue的一些前端组件本身就会自带< div >
比如el-input的标签拆分出来之后就形成了如下的内容
因此之前我采用
<el-form-item prop="code" v-if="captchaOnOff">
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%">
</el-input>
<div class="login-code">
<img :src="codeUrl" class="login-code-img"/>
</div>
</el-form-item>
这种采用比分比定义的方式会造成网页自动换行的问题出现
这里我采用elementui官网上提供的几种布局进行定义
我的定义
如下：
<el-form-item>
<el-col :span="11">
<el-input class="code-item" v-model="loginForm.code" type="text" placeholder="验证码"></el-input>
</el-col>
<el-col :span="11">
<el-image style="width:100px height:100px" :src="codeUrl" :fit="fit"></el-image>
</el-col>
</el-form-item>
然后再定义内层文本框的大小
.code-item :last-child{
height: 20px;
width: 157.5px;
font-size: 15px;
}
//因为el-text本质上是div拼上普通的text标签，所以这里需要使用last-child取到最里面的标签
.code-item{
padding: 25px 25px 5px 5px;
}
最终能够成功地进行换行了~
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue-cli webpack 快速搭建项目的教程详解，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
这篇文章主要介绍了vue.js中使用微信扫一扫解决invalid signature问题(推荐),本文通过实例代码给出解决方法，代码简单易懂非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
这篇文章主要介绍了关于Vue项目跨平台运行问题的解决方法，特别记录一下踩的坑，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-09-09
从接触Vue我们就知道 v-model是实现数据双向绑定的那他能实现绑定的原理到底是啥？最常见的语法糖 v-model，今天通过案例给大家详细介绍下，需要的朋友参考下吧2021-09-09
计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值,而watch则是一个更为通用的监听器,它可以在数据变化时执行异步操作或开销较大的操作2025-01-01
文章介绍了Vue3路由的query参数,包括其定义、使用方法以及如何在组件中接收和展示query参数,通过一个简单的实例,展示了如何在路由配置中添加query参数,并在子组件中通过计算属性获取和显示这些参数,感兴趣的朋友跟随小编一起看看吧2025-12-12
这篇文章主要介绍了vue-cli-service build 环境设置方式，具有很好的参考价值，希望对大家有所帮助。2023-01-01
这篇文章主要为大家详细介绍了Vue导入Echarts实现折线散点图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了vue.js+boostrap项目实践(案例详解)的相关资料,本文图文并茂介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
这篇文章主要介绍了vue3如何使用vant-picker封装省市二级联动，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论