纯CSS绘制左连接、右连接、内连接、全连接的小圆

最新推荐文章于 2025-06-23 17:23:59 发布

zxuanxuanz

最新推荐文章于 2025-06-23 17:23:59 发布

阅读量563

点赞数

CC 4.0 BY-SA版权

分类专栏：技巧 web前端文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/qq_40542728/article/details/120708025

该博客介绍了一个名为JointIcon的Vue组件，用于显示不同类型的连接图标。组件根据传入的连接类型（JointType）动态设置左右圆的填充颜色和层级。通过计算属性leftFill和rightFill确定填充状态，同时，当类型为Intersection时，会显示一个椭圆形交叉标记。样式使用了Less进行模块化管理，背景色和边框颜色等样式变量来自外部定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果

二、实现

<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;