vue一直自動(dòng)換行的問(wèn)題及解決
更新時(shí)間：2024年03月08日 14:12:27 作者：唐僧愛(ài)吃唐僧肉
這篇文章主要介紹了vue一直自動(dòng)換行的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue一直自動(dòng)換行的問(wèn)題
html換行主要是由于< div >標(biāo)簽引起的，而vue的一些前端組件本身就會(huì)自帶< div >
比如el-input的標(biāo)簽拆分出來(lái)之后就形成了如下的內(nèi)容
因此之前我采用
<el-form-item prop="code" v-if="captchaOnOff">
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="驗(yàn)證碼"
style="width: 63%">
</el-input>
<div class="login-code">
<img :src="codeUrl" class="login-code-img"/>
</div>
</el-form-item>
這種采用比分比定義的方式會(huì)造成網(wǎng)頁(yè)自動(dòng)換行的問(wèn)題出現(xiàn)
這里我采用elementui官網(wǎng)上提供的幾種布局進(jìn)行定義
我的定義
如下：
<el-form-item>
<el-col :span="11">
<el-input class="code-item" v-model="loginForm.code" type="text" placeholder="驗(yàn)證碼"></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>
然后再定義內(nèi)層文本框的大小
.code-item :last-child{
height: 20px;
width: 157.5px;
font-size: 15px;
}
//因?yàn)閑l-text本質(zhì)上是div拼上普通的text標(biāo)簽，所以這里需要使用last-child取到最里面的標(biāo)簽
.code-item{
padding: 25px 25px 5px 5px;
}
最終能夠成功地進(jìn)行換行了~
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用vue-cli webpack 快速搭建項(xiàng)目的代碼
這篇文章主要介紹了vue-cli webpack 快速搭建項(xiàng)目的教程詳解，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
vue.js中使用微信掃一掃解決invalid signature問(wèn)題(完美解決)
這篇文章主要介紹了vue.js中使用微信掃一掃解決invalid signature問(wèn)題(推薦),本文通過(guò)實(shí)例代碼給出解決方法，代碼簡(jiǎn)單易懂非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
關(guān)于Vue項(xiàng)目跨平臺(tái)運(yùn)行問(wèn)題的解決方法
這篇文章主要介紹了關(guān)于Vue項(xiàng)目跨平臺(tái)運(yùn)行問(wèn)題的解決方法，特別記錄一下踩的坑，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
從接觸Vue我們就知道 v-model是實(shí)現(xiàn)數(shù)據(jù)雙向綁定的那他能實(shí)現(xiàn)綁定的原理到底是啥？最常見(jiàn)的語(yǔ)法糖 v-model，今天通過(guò)案例給大家詳細(xì)介紹下，需要的朋友參考下吧2021-09-09
解讀計(jì)算屬性和watch監(jiān)聽(tīng)的區(qū)別及說(shuō)明
計(jì)算屬性是基于它們的依賴(lài)進(jìn)行緩存的,只有在它的相關(guān)依賴(lài)發(fā)生改變時(shí)才會(huì)重新求值,而watch則是一個(gè)更為通用的監(jiān)聽(tīng)器,它可以在數(shù)據(jù)變化時(shí)執(zhí)行異步操作或開(kāi)銷(xiāo)較大的操作2025-01-01
文章介紹了Vue3路由的query參數(shù),包括其定義、使用方法以及如何在組件中接收和展示query參數(shù),通過(guò)一個(gè)簡(jiǎn)單的實(shí)例,展示了如何在路由配置中添加query參數(shù),并在子組件中通過(guò)計(jì)算屬性獲取和顯示這些參數(shù),感興趣的朋友跟隨小編一起看看吧2025-12-12
vue-cli-service build 環(huán)境設(shè)置方式
這篇文章主要介紹了vue-cli-service build 環(huán)境設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-01-01
Vue導(dǎo)入Echarts實(shí)現(xiàn)折線散點(diǎn)圖
這篇文章主要為大家詳細(xì)介紹了Vue導(dǎo)入Echarts實(shí)現(xiàn)折線散點(diǎn)圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue.js+boostrap項(xiàng)目實(shí)踐(案例詳解)
這篇文章主要介紹了vue.js+boostrap項(xiàng)目實(shí)踐(案例詳解)的相關(guān)資料,本文圖文并茂介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
vue3如何使用vant-picker封裝省市二級(jí)聯(lián)動(dòng)
這篇文章主要介紹了vue3如何使用vant-picker封裝省市二級(jí)聯(lián)動(dòng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10