一、效果
二、实现
<template>
<div :class="$style.jointIcon">
<div
:class="[
$style.jointIconLeft,
leftFill && $style.fillColor,
leftFill && $style.level,
]"
></div>
<div
:class="[
$style.jointIconRight,
rightFill && $style.fillColor,
{ [$style.level]: rightLevel },
]"
></div>
<div :class="$style.oval" v-if="type === JointType.Intersection"></div>
</div>
</template>
<script>
import { Component, Vue, Prop } from 'vue-property-decorator';
import { JointType } from '@/views/data-flow-design/data/utils/enum';
@Component()
export default class JointIcon extends Vue {
/**@name 连接类型 */
@Prop({ type: String, default: 'ALL' }) type;
JointType = JointType;
/**@name 左圆填充颜色 */
get leftFill() {
if (this.type === JointType.All || this.type === JointType.Left)
return true;
return false;
}
/**@name 右圆填充颜色 */
get rightFill() {
if (this.type === JointType.All || this.type === JointType.Right)
return true;
return false;
}
/**@name 右圆层级高 */
get rightLevel() {
if (this.type === JointType.Right) return true;
return false;
}
}
</script>
<style lang="less" module>
.jointIcon {
position: relative;
width: 36px;
height: 22px;
}
.jointIconLeft {
position: absolute;
top: 0px;
left: 0px;
display: inline-block;
width: 22px;
height: 22px;
background-color: var(--btn-border);
box-shadow: 0 0 1px 0.5px var(--btn-border);
border-radius: 50px;
z-index: 1;
}
.jointIconRight {
display: inline-block;
top: 0px;
left: 14px;
width: 22px;
height: 22px;
background-color: var(--btn-border);
border-radius: 50px;
position: absolute;
z-index: 1;
}
.level {
z-index: 999;
}
.oval {
display: inline-block;
position: absolute;
top: 5px;
left: 12px;
width: 12px;
height: 12px;
background-color: var(--primary);
border: 1px solid var(--primary);
border-radius: 12px 0px;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
z-index: 999;
}
.fillColor {
background-color: var(--primary);
}
</style>