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