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中分割线的实现相关推荐

echarts中x轴 y轴配置(字体颜色，线的颜色，分割线，y周单位颜色)。vue中直接使用echarts以及vue中使用vue-echarts如何配置横向渐变与纵向渐变（后者适用于前者）
vue中直接使用echarts //var myChart = this.$echarts.init(document.getElementById("echart-twoline" ...
vue中rules校验是验证首字符_小白也能秒懂Vue源码中那些精细设计（选项处理）...
我"崩"不住了,在彭凡同志锲而不舍的催促下这篇文章终于"蛋"生了. 说正经的这篇文章不好写,不好写的原因是我不太擅长写这些类比文,但它还是写出来了. 相信大部分 ...
vue中微信分享的踩坑之旅
最近基于vue做一个h5的项目,里面涉及到微信分享,当时心里想着,这微信分享不是分分钟的事嘛,而且自己年初还做个一个项目,也实现了微信自定义分享,代码都是现成的,妥妥的放心. 上周二上午花了1个小时, ...
Vue中使用Echarts构建3D地球层+模拟时钟
文章目录前言一.Echarts示例二.使用步骤 1.引入库 2.完整代码总结前言 Echarts官网上的例子大多是原生js,那么我们在vue项目中该如何使用?本文举两个例子. 一.Ech ...
vue中，右键菜单组件v-contextmenu的使用
vue中,右键菜单组件v-contextmenu的使用 1.效果右键菜单之禁用和子菜单 2.流程第一步:安包 npm install v-contextmenu --save-dev npm in ...
vue中使用图像编辑器tui-image-editor(二)——应用示例
vue中使用图像编辑器tui-image-editor(二)--应用示例效果代码 mark.vue <template><div class="drawing-cont ...
vue中使用echarts绘制仪表盘
效果图目录一.安装echarts 1.控制台使用命令进行安装 2.在package.json中配置echarts 3.在main.js中引用二.vue中使用echarts 1.首先设置一个放置图 ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
props写法_简单理解vue中Props属性
本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下使用 Props 传递数据组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 pr ...
vue ts 设置tslint提示_Typescript 在 Vue 中的实践(包含2.x、3.x)
1 使用 typescript 的优势聊到 ts 时有一个不能规避的问题:为什么要使用 ts ,相比 js 有什么优势吗?下面我从两个方面试着回答一下这个问题: 1.1 项目开发时的便利避免低级 ...

vue中分割线的实现

vue中分割线的实现相关推荐

最新文章

热门文章