vue中分割线的实现方式
更新时间：2023年12月02日 15:30:51 作者：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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue-CLI 3.X 部署项目至生产服务器的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
这篇文章主要介绍了解决ElementUI中tooltip出现无法显示的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要给大家分享的是vue项目实现页面跳转的方法，vue-router是前端开发中用来实现路由页面跳转的一个模块。下面小编将带来如何在已经创建好的vue-router项目基础下实现页面跳转,需要的朋友可以参考一下2021-11-11
这篇文章主要介绍了vue中同时监听多个参数的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
图表在我们的项目中可以帮我们很明确的看到我们想要看到的数据，本文将主要介绍Echart图表在项目中前后端使用的详细教程，感兴趣的同学可以学习一下2021-11-11
Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,这篇文章主要给大家介绍了关于vue3中vuex与pinia踩坑的相关资料,需要的朋友可以参考下2021-12-12
vue3的ref,computed,reactive和toRefs你都了解吗
这篇文章主要为大家详细介绍了vue3的ref,computed,reactive和toRefs，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
vue项目ElementUI组件中el-upload组件与图片裁剪功能组件结合使用详解
这篇文章主要介绍了vue项目ElementUI组件中el-upload组件与图片裁剪功能组件结合使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
Vue是一套用于构建前后端分离的框架。刚开始是由国内优秀选手尤雨溪开发出来的，目前是全球“最”流行的前端框架。使用vue开发网页很简单，并且技术生态环境完善，社区活跃，是前后端找工作必备技能！下面来看看其得安装及使用方法吧2021-10-10
这篇文章主要介绍了Vue组件中的data必须是一个function的原因浅析，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
最新评论