vue中分割线的实现方式
作者:dearqz
这篇文章主要介绍了vue中分割线的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue实现分割线
项目中,需要实现分割线的效果
如图:
奈何 element
中的分割线用起来报错,无奈只好自己写,很简单,
先说下原理:
给一个高为1像素的盒子,盒子宽度根据要求设定,再设置盒子颜色,排列方式为相对定位,盒子里设置文字给左右padding,并进行绝对定位到中间即可实现
看代码:
<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>内容1</span> <el-divider></el-divider> <span>内容2</span> </div>
样式展示
2.分割线带文字带位置带颜色
<div> <span>内容</span> <el-divider content-position="left">左侧</el-divider> <span>内容</span> <el-divider> 中央 </el-divider> <span>内容</span> <el-divider content-position="right">右侧</el-divider> <span>内容</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>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。