vue中分割線的實現(xiàn)方式
更新時間：2023年12月02日 15:30:51 作者：dearqz
這篇文章主要介紹了vue中分割線的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue實現(xiàn)分割線
項目中，需要實現(xiàn)分割線的效果
如圖：
奈何 element 中的分割線用起來報錯，無奈只好自己寫，很簡單，
先說下原理：
給一個高為1像素的盒子，盒子寬度根據(jù)要求設(shè)定，再設(shè)置盒子顏色，排列方式為相對定位，盒子里設(shè)置文字給左右padding，并進行絕對定位到中間即可實現(xiàn)
看代碼：
<div class="tableTitle"><span class="midText">費用說明</span></div>
.tableTitle {
position: relative;
margin: 0 auto;
width: 600px;
height: 1px;
background-color: #d4d4d4;
text-align: center;
font-size: 16px;
color: rgba(101, 101, 101, 1);
}
.midText {
position: absolute;
left: 50%;
background-color: #ffffff;
padding: 0 15px;
transform: translateX(-50%) translateY(-50%);
}
vue/element分割線Divider的使用
1.單獨的分割線
<div>
<span>內(nèi)容1</span>
<el-divider></el-divider>
<span>內(nèi)容2</span>
</div>
樣式展示
2.分割線帶文字帶位置帶顏色
<div>
<span>內(nèi)容</span>
<el-divider content-position="left">左側(cè)</el-divider>
<span>內(nèi)容</span>
<el-divider>
中央
</el-divider>
<span>內(nèi)容</span>
<el-divider content-position="right">右側(cè)</el-divider>
<span>內(nèi)容</span>
<el-divider content-position="right"><span style="color: #409EFF">藍色</span></el-divider>
</div>
3.垂直分割
<div>
<span>1</span>
<el-divider direction="vertical"></el-divider>
<span>2</span>
<el-divider direction="vertical"></el-divider>
<span>3</span>
</div>
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue基于websocket實現(xiàn)智能聊天及吸附動畫效果
這篇文章主要介紹了vue基于websocket實現(xiàn)智能聊天及吸附動畫效果,主要功能是基于websocket實現(xiàn)聊天功能，封裝了一個socket.js文件，使用Jwchat插件實現(xiàn)類似QQ、微信電腦端的功能，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-07-07
VsCode工具開發(fā)vue項目必裝插件清單(推薦!)
對于很多使用vscode編寫vue項目的新手同學(xué)來說,可能不知道使用什么插件,下面這篇文章主要給大家介紹了關(guān)于VsCode工具開發(fā)vue項目必裝插件的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-09-09
Element中el-input密碼輸入框瀏覽器自動填充賬號密碼問題的解決方法
自己寫了一個管理系統(tǒng),登錄成功之后,瀏覽器提示我保存賬號密碼,每次登錄時就會自動回填記住的賬號密碼,方便用戶快速登錄,下面這篇文章主要給大家介紹了關(guān)于Element中el-input密碼輸入框瀏覽器自動填充賬號密碼問題的解決方法,需要的朋友可以參考下2022-09-09
vue插件vue-resource的使用筆記（小結(jié)）
本篇文章主要介紹了vue插件vue-resource的使用筆記（小結(jié)），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細介紹了Vue實現(xiàn)百度下拉提示搜索功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了如何通過點擊按鈕切換顯示不同echarts圖表，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解Vue學(xué)習(xí)筆記入門篇之組件的內(nèi)容分發(fā)(slot)
這篇文章主要介紹了詳解Vue學(xué)習(xí)筆記入門篇之組件的內(nèi)容分發(fā)(slot)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了vue全局混入之狀態(tài)判斷是否執(zhí)行點擊方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue移動端UI框架實現(xiàn)QQ側(cè)邊菜單組件
這篇文章主要介紹了vue移動端UI框架實現(xiàn)仿qq側(cè)邊菜單組件,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-03-03
讓 babel webpack vue 配置文件支持智能提示的方法
這篇文章主要介紹了讓 babel webpack vue 配置文件支持智能提示的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06