欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中分割線的實(shí)現(xiàn)方式

 更新時(shí)間：2023年12月02日 15:30:51   作者：dearqz  
這篇文章主要介紹了vue中分割線的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue實(shí)現(xiàn)分割線

項(xiàng)目中，需要實(shí)現(xiàn)分割線的效果

如圖：

奈何 element 中的分割線用起來報(bào)錯(cuò)，無奈只好自己寫，很簡單，

先說下原理：

給一個(gè)高為1像素的盒子，盒子寬度根據(jù)要求設(shè)定，再設(shè)置盒子顏色，排列方式為相對定位，盒子里設(shè)置文字給左右padding，并進(jìn)行絕對定位到中間即可實(shí)現(xiàn)

看代碼：

<div class="tableTitle"><span class="midText">費(fèi)用說明</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.單獨(dú)的分割線

<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">藍(lán)色</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é)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論