vue自定义步骤行程条

<template><div><div class=" steps"><div class=" stepsRightBox"><!-- 跟随的样式 --><div class="stepsLine"><!-- 圆点,可以改为图片 --><i></i><!-- 虚线,可以改为实线 --><div></div></div><!-- 右边,用于写内容 --><div class="stepsRight">哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或</div></div></div></div>
</template><script>
export default {};
</script><style lang="less">
.steps {padding: 0 20px;margin-top: 42px;// 实现思路,大盒子嵌套竖线与文字内容放入// 竖线百分百,利用文字内容撑开的高度,为了超出内容高度// 所以在内容高度价格外边距延长.stepsRightBox {display: flex;.stepsRight {width: 100%;margin-bottom: 20px;//这个用于样式线条延长padding: 16px 20px;font-size: 24px;font-weight: 400;color: #666666;border-radius: 8px;background: #eef7fe;}.stepsLine {margin-right: 10px;display: flex;flex-direction: column;align-items: center;// 圆点i {width: 14px;height: 14px;background: #3f87e3;border-radius: 50%;display: block;}div {// 竖线margin-top: 10px;height: 100%;border-left: 2px dotted #3f87e3;//可以改为实线或者其他颜色}}}
}
</style>

效果

vue自定义步骤行程条相关推荐

VUE中自定义步骤条
VUE中自定义步骤条下列自定义步骤条是根据elementUI中的el-step的样式改编而得.记录下自己改编过程!!! <template><div class='steps el ...
Vue学习笔记：Vue中封装自定义步骤条实现上下一步
Vue中封装自定义步骤条实现上下一步效果图: 如上图:在VUE中实现效果,VUE+Element,ant都有封装好的UI,直接引用就好了: 这里,觉得样式不符合UI设计,所以自定义封装了一个步骤条 ...
vue、Steps 步骤条、Steps 属性、vue Steps 所有步骤条样式、vue Steps 步骤条全部属性
vue.Steps 步骤条.Steps 属性.vue Steps 所有步骤条样式.vue Steps 步骤条全部属性设计规则何时使用代码演示 1.基本用法 2.迷你版 3.带图标的步骤条 4.步 ...
Android自定义圆形进度条
Android自定义圆形进度条 github地址:https://github.com/opq1289/CircleProgressView 效果图: 无动画: 有动画: 整圆: 切割圆: 具体步骤: ...
android绘制环形进度_Android动态自定义圆形进度条
这篇文章主要介绍了Android动态自定义圆形进度条,需要的朋友可以参考下效果图: A.绘制圆环,圆弧,文本 //1.画圆环 //原点坐标 float circleX = width / 2; fl ...
clientsideevents能定义几个click事件_分享8个非常实用的Vue自定义指令
作者:lzg9527 https://juejin.cn/post/6906028995133833230 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也 ...
vue自定义表格（每一列表格下面包含一个子表格）
vue自定义表格(每一列表格下面包含一个子表格) 实现效果图 template <div class="marsTable" ref="marsTable" ...
Android按钮滚动条,Android自定义Seekbar滑动条，Pop提示跟随滑动按钮一起滑动
由于项目需要做出此效果,自定义写了一个. 效果图思路: 原始的seekbar只有滑动条并没有下方的提示文字,所以我们必须要继承Seekbar重写这个控件. 代码: 在values文件夹下新建attr ...
Vue自定义组件npm上传私服，且从私服下载使用
Vue自定义组件npm上传私服,yarn私服下载使用安装镜像源管理工具nrm 发布自定义组件到公司私服若未下载nrm源管理工具直接使用npm设置私服地址也可以以下步骤都是基于npm命令从私服下 ...

vue自定义步骤行程条

vue自定义步骤行程条相关推荐

最新文章

热门文章