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)文章
這篇文章主要介紹了vue3實現(xiàn)動態(tài)添加路由方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
本文主要介紹了vue全局接入百度地圖的實現(xiàn)示例，文中根據(jù)實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)計步器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章給大家主要介紹了Vue.js中數(shù)組變動的檢測，文中給出了詳細的示例代碼和過程介紹，相信會對大家的理解和學習很有幫助，有需要的朋友們下面來一起看看吧。2016-10-10
詳解在vue-cli中使用graphql即vue-apollo的用法
這篇文章主要介紹了詳解在vue-cli中使用graphql即vue-apollo的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
下面小編就為大家分享一篇Vue.js 點擊按鈕顯示/隱藏內(nèi)容的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue中v-bind:style效果的自定義指令，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了vuex5中的Pinia插件機制，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue項目watch內(nèi)的函數(shù)重復觸發(fā)問題的解決
這篇文章主要介紹了vue項目watch內(nèi)的函數(shù)重復觸發(fā)問題的兩種解決方案，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下2021-04-04
vue2+element?ui?中的el-table?選中當前行當前行變色的實現(xiàn)代碼
這篇文章主要介紹了vue2+element?ui?中的el-table?選中當前行當前行變色的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07