vue+css左边三角形的矩形完成自定义流程图（可扩展）

组件用到所有图标都来自阿里云iconfont
注意事项：
1、这里的三角形是两个三角形的叠加，因为只有一个div，所以采用叠加伪类元素和绝对定位的方式实现；
2、绘制第一个 &::before三角形， &::after绘制第二个三角形，第一个三角形给个背景色，第二个三角形给背景色和矩形颜色一样。

效果图

1、页面

<template><div class="custom-map-for-approval"><h2 class="map-title">审批进度</h2><template v-if="nodeList && nodeList.length > 0"><div class="map-node" v-for="(item, index) of nodeList" :key="index"><div :class="['map-left-line', {'send': item.type=='notifier'}]"><!-- 发起节点状态 --><template v-if="item.type=='start'"><span v-if="Array.isArray(item.person)" :title="item.person[0].staffName" class="line-name">{{item.person[0].staffName.substring(0,2)}}</span><!-- 是否完成图标 --><span class="line-complete-icon"><i class="icon2_ icon2_gou complete-icon"></i></span></template><!-- 已审批状态 --><template v-else-if="item.reason =='approve_agree'||item.reason =='approve_refuse'"><i class="icon2_ icon2_workflow-center line-icon"></i><!-- 是否完成图标 --><span class="line-complete-icon"><i class="icon2_ icon2_gou complete-icon"></i></span></template><!-- 待审批状态 --><template v-else-if="item.type =='approver'&&!item.reason"><i class="icon2_ icon2_workflow-center line-icon"></i></template><!-- 抄送状态 --><template v-else-if="item.type=='notifier'"><i class="icon2_ icon2_faqishenpi line-icon"></i><!-- 是否完成图标 --><span class="line-complete-icon"><i class="icon2_ icon2_gou complete-icon"></i></span></template><!-- 待重审状态 --><template v-else-if="item.type=='approve_wait'"><i class="icon2_ icon2_faqishenpi line-icon"></i></template><!-- 其他状态 --><template v-else-if="['approve_recall','approve_revoke'].includes(item.type)"><i class="icon2_ icon2_workflow-center line-icon"></i><!-- 是否完成图标 --><span class="line-complete-icon"><i class="icon2_ icon2_gou complete-icon"></i></span></template></div><div class="map-right-content"><div class="item-cell"><div class="item-label"><span class="label-name">{{item.title}}</span><span class="label-time">{{item.time}}</span></div><div class="item-node"><span v-if="Array.isArray(item.person)" :title="item.person[0].staffName" :class="['node-name']">{{item.person[0].staffName}}</span><!-- 发起节点状态 --><span v-if="item.type=='start'" class="is-complete-icon"><i class="icon2_ icon2_gou complete-icon"></i></span><!-- 已完成审批状态 --><span v-if="item.reason =='approve_agree'" class="is-complete-icon"><i class="icon2_ icon2_gou complete-icon"></i></span><!-- 已拒绝状态 --><span v-if="item.reason =='approve_refuse'" class="is-complete-icon"><i class="icon2_ icon2_gou complete-icon"></i></span><!-- 其他状态 --><span v-if="['approve_recall','approve_revoke'].includes(item.type)" class="is-complete-icon"><i class="icon2_ icon2_gou complete-icon"></i></span><div :class="['node-status']" v-if="item.type=='start'">发起</div><div :class="['node-status', 'agree']" v-if="item.reason =='approve_agree'">已审批</div><div :class="['node-status', 'reject']" v-if="item.reason =='approve_refuse'">已拒绝</div><div :class="['node-status', 'pend']" v-if="item.type =='approver'&&!item.reason">待审批</div><div :class="['node-status', 'send']" v-if="item.type=='notifier'">抄送</div><div :class="['node-status', 'reject']" v-if="item.type=='approve_recall'">退回</div><div :class="['node-status', 'recall']" v-if="item.type=='approve_revoke'">撤回</div><div :class="['node-status', 'reject']" v-if="item.type=='approve_wait'">重审</div></div><div class="item-status-content" v-if="item.type !== 'start'">{{item.message}}</div><!-- 当前节点如果有图片和文件 --><div class="item-centent-imgs img_box" v-if="item.photos&&item.photos.length > 0"><viewer class="img_list"><img v-for="(img) in item.photos" :key="img.url" title="点击图片查看详情" :src="showImages(img.url)" alt="" ></viewer></div><div v-for="(files) in item.files" :key="files.url" class="item-centent-files file_list"><i v-if="files.suffix=='zip'" class="icon iconzip"></i><i v-else-if="files.suffix=='xls'||files.suffix=='xlsx'" class="icon iconxlsx"></i><i v-else-if="files.suffix=='doc'||files.suffix=='docx'" class="icon icondoc"></i><i v-else-if="files.suffix=='pdf'" class="icon iconpdf"></i><i v-else-if="files.suffix=='txt'" class="icon icontxt"></i><i v-else class="icon iconmoren"></i><div class="preview" title="点击可预览文件" @click="previewFile(files)" > {{files.name}}</div><div class="preview_file" title="点击可下载" @click="downloadFile(files)">下载</div></div></div></div></div></template><!-- 文件预览组件 --><file-preview v-if="preFlag" :fileTitle="fileTitle" :excleUrl="excleUrl" :fileType="fileType" :url="fileUrl" @close="closeModal"></file-preview></div>
</template><script>
import FilePreview from "~components/preview/file-preview";
import { showImage } from '~script/utils'
export default {name:'custom-approval-map',components:{FilePreview},data(){return{preFlag: false, //预览组件默认关闭fileUrl: '',// 文件预览加载地址fileType: '', // 文件类型fileTitle: '', // 文件标题excleUrl: '', // excle表格url}},props:{nodeList:{type: Array,require: true,default: function(){return []}}},watch:{nodeList:{handler(n, o){// console.log(n, 444);},immediate: true}},methods:{// 图片展示showImages(url){return showImage(url) || ''},//下载文件downloadFile(val){// url,data,params,contentType,mark,responsetypethis.$ajax.get(this.$api.file.downloadFile,{url: val.url},{},0,'','blob').then(res =>{DownFile.Down(res)}).catch(err => console.log(err))},// 文件预览previewFile(val){if (['rar','zip'].includes(val.url.split('.')[1])) {this.$Message.warning('压缩文件暂时不支持预览哦~')return}// 提取文件类型let type = val.url.split('.')this.excleUrl = valthis.fileUrl = `/api${this.$api.file.onlinePreview}?url=${val.url}&access_token=${LocalStore.get('access_token')}`this.fileType = type[1]this.fileTitle = val.namethis.preFlag = true},// 预览组件关闭closeModal(val) {this.preFlag = val;},}
}
</script><style lang="less">
@import url('./style.less');
</style>

2、css代码

 // 自定义流程图.custom-map-for-approval{.map-title{font-size: 16px;font-weight: bold;color: #333;padding: 20px 20px 20px 0;margin-top: 15px;border-top: 1px solid #999999;}.map-node{display: flex;position: relative;.map-left-line{width: 40px;height: 40px;border-radius: 50%;background-color: #2d8cf0;font-size: 8px;color: #fff;text-align: center;line-height: 40px;overflow: hidden;.line-name{font-size: 12px;}.line-icon{font-size: 22px;}.line-complete-icon{display: block;width: 16px;height: 16px;border-radius: 50%;text-align: center;line-height: 16px;background-color: #3fba73;position: absolute;left: 25px;top: 25px;.complete-icon{color: #fff;}}&.send{background-color: #FFBA02; }// 自定义流程虚线&::before{content: '';display: block;width: 2px;height: 100%;background-color: #CDCDCD;// z-index: -1;position: absolute;left: 18px;top: 40px;}}&:last-child{.map-left-line{&::before{display: none;}}}.map-right-content{position: relative;width: 100%;margin: 12px 0 0 17px;.item-cell{position: relative;top: -22px;left: 10px;background-color: #fff;border-radius: 6px;padding: 12px 16px;margin-right: 16px;box-shadow: 1px 1px 4px #93c1f3;.item-label{line-height: 1;display: flex;justify-content: space-between;.label-name{font-size: 15px;font-weight: bold;color: #333;}.label-time{font-size: 13px;font-weight: bold;color: #B9B9B9;.label-status{padding: 0 10px;}}}.item-node{display: flex;align-items: center;margin: 10px 0;.node-name{width: 30px;height: 30px;border-radius: 50%;background-color: #2d8cf0;font-size: 8px;color: #fff;text-align: center;line-height: 30px;overflow: hidden;position: relative;}.is-complete-icon{display: block;width: 16px;height: 16px;border-radius: 50%;text-align: center;line-height: 16px;background-color: #3fba73;position: absolute;left: 35px;top: 55px;.complete-icon{color: #fff;}}.node-status{color: #666;padding-left: 10px;&.agree{// 同意样式color: #3fba73;}&.reject{// 拒绝样式color: #E76060;}&.pend{// 待审批样式color: #fa795e;}&.recall{// 撤回color: orange;}&.send{// chaosocolor: #2d8cf0;}}}.item-centent-files{align-items: center;margin: 6px 0 0 0;}.item-status-content{line-height: 1.5;}// 绘制向左三角形，borer-left不做操作，其他加右边颜色和上下透明即可&::before{content: '';width: 0;height: 0;border-top: 10px solid transparent;border-right: 12px solid #edf6ff;border-bottom: 11px solid transparent;// 滤镜(filter)中的drop-shadow()// drop-shadow才是真正意义上的投影，而box-shadow只是盒阴影filter: drop-shadow(0px 0px 1px #93c1f3);position: absolute;left: -13px;top: 20px;}// 覆盖第一个三角形，形成边框&::after{content: '';width: 0;height: 0;border-top: 9px solid transparent;border-right: 11px solid #fff;border-bottom: 10px solid transparent;position: absolute;left: -11px;top: 21px;}}}}
}.img_box{display:flex;margin-top: 10px;.img_list{display:flex;margin-top: 10px;img{margin-right:15px;border-radius:6px;cursor: pointer;width: 80px;height: 80px;}}
}
.file_list{display: flex;flex-wrap: wrap;margin: 6px 0 0 38px;.iconzip, .iconxlsx, .icondoc, .iconpdf, .icontxt, .iconmoren{font-size:30px;margin-right: 10px;}.iconzip{color:#BDC3C9;}.iconxlsx{color: #E74D3C;}.icondoc{color: #5497D7;}.iconpdf{color: #30CC71;}.icontxt{color: #F1C411;}.iconmoren{color: #5497D7;}.preview{cursor: pointer;&:hover{color: #169BD5;}}.preview_file{margin-left: 20px;color: #169BD5;cursor: pointer;&:hover{color: red;}}
}

vue+css左边三角形的矩形完成自定义流程图（可扩展）相关推荐

html+css实现三角形和矩形
一.三角形 1. 设置div的宽高为0 2. 添加边框并设为transparent(透明) 3. 设置某边的边框颜色即可实现上下左右三角形 <style>.box {width: 0;he ...
VUE + CSS画三角形
width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; bord ...
css圆角三角形3个圆角_CSS圆角
css圆角三角形3个圆角 The ability to create rounded corners with CSS opens the possibility of subtle design i ...
CSS -- 使用纯CSS绘制三角形及常见案例汇总
文章目录 1. 绘制原理 2. 绘制最简单的三角形 3. 绘制对话框 4. 绘制两条直角边不等长的三角形 1. 绘制原理网页中常见一些三角形,使用 CSS 直接画出来就可以,不必做成图片或者字体图标 ...
vue css 应用变量_如何使用CSS Grid和CSS变量快速为应用创建原型
vue css 应用变量 CSS Grid and CSS Variables are both huge wins for front-end developers. The former make ...
css 绘制三角形_解释CSS形状：如何使用纯CSS绘制圆，三角形等
css 绘制三角形 Before we start. If you want more free content but in video format. Don't miss out on my Y ...
css画直角三角形,关于CSS画三角形的那些事
用CSS画一个三角形,是不难的问题,但我却掌握的不够熟练,例如当要求为画一个直角三角形或者等腰三角形,我就有点反应不过来.所以,在这篇中点透它,以后再见,不含糊. 原理分析用CSS画三角形,实际上就 ...
CSS绘制三角形原理及应用
更多精彩内容可以访问我的博客Aelous-BLog 在从 PSD 到 HTML 页面的过程中,免不了要遇到一个问题:"这个小图标,可以用 CSS 效果实现,也可以切图下来,到底该怎么选择呢? ...
css实现三角形原来这么简单啊，可以跟三角形图片说拜拜了
在开发网页时经常需要用到三角形做指示效果. [三角形指示效果] 一般我们会让美工提供好三角形的图片然后用在网页中,这种方式用起来简单,但会增加网页的大小,同时要修改三角形大小.颜色等还需要再去麻烦美工 ...

vue+css左边三角形的矩形完成自定义流程图（可扩展）

vue+css左边三角形的矩形完成自定义流程图（可扩展）相关推荐

最新文章

热门文章