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;
}
最终能够成功地进行换行了~
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了VeeValidate 的使用场景以及配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
Vue3 获取地址栏参数有两个方式：查询参数和路径参数。Vue3获取地址栏参数是从路由router中获取，查询参数和路径参数获取方式不一样。感兴趣的同学可以参考阅读2023-04-04
这篇文章主要介绍了vue中js判断长时间不操作界面自动退出登录,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-01
这篇文章主要给大家介绍了关于利用jsx写vue组件的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起看看吧。2017-07-07
这篇文章主要为大家介绍了分布式医疗挂号系统之搭建后台管理系统页面，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
Vite 构建环境分为开发环境和生产环境,不同环境会有不同的构建策略,本文就来介绍下Vite 配置文件,具有一定的参考价值,感兴趣的可以了解一下2024-08-08
这篇文章主要为大家介绍了Vue中使用provide和inject实例对比分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
本篇文章主要介绍了详解Vue-Cli 异步加载数据的一些注意点，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要介绍了Vue 无限滚动加载指令的实现代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-05-05
使用Vue的脚手架搭建的前端项目，通常都使用Axios封装的接口请求，项目中引入的方式不做多介绍，本文主要介绍接口调用与不同形式的传参方法。对Vue + Axios 请求接口方法与传参问题感兴趣的朋友一起看看吧2021-12-12
最新评论