vue3 项目中 使用 leader-line-vue 绘制指引线

原创 于 2025-06-12 19:22:25 发布 · 391 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

vue3 项目中 使用 leader-line-vue 绘制指引线

项目需要点击菜单并且使用联动展示

官网地址

链接: 参考

部分预览：
效果图预览
在这里插入图片描述

1、安装：npm i leader-line-vue
2、页面 script 中引入：import LeaderLine from ‘leader-line-vue’;
3、创建页面元素

<div class="left">
     <el-menu :default-active="activeJob" class="job-menu" :collapse="false">
         <el-menu-item v-for="job in jobs" :key="job.id" :index="job.id" @click="handleSelect(job)">
             <div :id="`job-${job.id}`" class="job-menu-item-inner">
                 {{ job.name }}
             </div>
         </el-menu-item>
     </el-menu>
 </div>
 <div class="right overflow-y-auto">
     <el-card v-for="ability in abilities" :key="ability.id" :id="`ability-${ability.id}`"
         @click="handleAbilityClick(ability.id)" class="ability-card">
         {{ ability.name }}
     </el-card>
 </div>

4、获取页面元素添加划线（使用 LeaderLine.setLine ！！！）

// 绘制线条
function drawLines() {
    // 清除线条
    clearLines()
    // 等待DOM更新后执行
    nextTick(() => {
        // 获取当前职业和技能的DOM元素
        const jobEl = document.getElementById(`job-${activeJob.value}`)
        const abilityEl = document.getElementById(`ability-${activeAbility.value}`)

        // 如果DOM元素存在且LeaderLine存在且LeaderLine.setLine方法存在
        if (jobEl && abilityEl && LeaderLine && LeaderLine.setLine) {
            // 使用LeaderLine.setLine方法绘制线条
            const line = LeaderLine.setLine(
                jobEl,
                abilityEl,
                {
                    // 线条颜色
                    color: '#2196f3',
                    // 线条宽度
                    size: 1.5,
                    // 线条路径
                    path: 'fluid',
                    // 起始端点样式
                    startPlug: 'disc',
                    // 结束端点样式
                    endPlug: 'arrow3',
                    // 是否使用渐变
                    gradient: true,
                    // 是否使用阴影
                    dropShadow: true,
                    // 是否使用虚线
                    dash: { animation: true }
                }
            )
            // 将线条添加到lines数组中
            lines.push(line)
        }
    })
}

5、每次点击需要清空连线的对象

// 连线对象
let lines: any[] = []
function clearLines() {
    lines.forEach(line => line.remove())
    lines = []
}

特别注意！！！
a、不要和 leader-line 弄混，leader-line 是直接使用构造函数，可以直接使用new LeaderLine(startElement, endElement, {color: ‘red’, size: 8});

b、leader-line-vue 使用 LeaderLine.setLine(jobEl, abilityEl, { …options })

页面完整代码

<template>
    <div>
        <div class="ability-map">
            <div class="left">
                <el-menu :default-active="activeJob" class="job-menu" :collapse="false">
                    <el-menu-item v-for="job in jobs" :key="job.id" :index="job.id" @click="handleSelect(job)">
                        <div :id="`job-${job.id}`" class="job-menu-item-inner">
                            {{ job.name }}
                        </div>
                    </el-menu-item>
                </el-menu>
            </div>
            <div class="right overflow-y-auto">
                <el-card v-for="ability in abilities" :key="ability.id" :id="`ability-${ability.id}`"
                    @click="handleAbilityClick(ability.id)" class="ability-card">
                    {{ ability.name }}
                </el-card>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
import { ElMenu, ElMenuItem, ElCard } from 'element-plus'
import 'element-plus/dist/index.css'
import LeaderLine from 'leader-line-vue'

// 岗位数据
const jobs = [
    { id: 'job2', name: '第一个', abilities: ['b1', 'b2', 'b3'] },
    { id: 'job3', name: '第二个', abilities: ['c1', 'c2', 'c3'] },
    { id: 'job4', name: '第三个', abilities: ['d1', 'd2', 'd3'] },
    { id: 'job5', name: '第四个', abilities: ['e1', 'e2', 'e3'] },
]

// 能力项数据
const allAbilities = [
    { id: 'b1', name: '1.1第一个' },
    { id: 'b2', name: '2.1第一个' },
    { id: 'b3', name: '3.1第一个' },

    { id: 'c1', name: '1.1第二个' },
    { id: 'c2', name: '2.1第二个' },
    { id: 'c3', name: '3.1第二个' },

    { id: 'd1', name: '1.1第三个' },
    { id: 'd2', name: '2.1第三个' },
    { id: 'd3', name: '3.1第三个' },

    { id: 'e1', name: '1.1第四个' },
    { id: 'e2', name: '2.1第四个' },
    { id: 'e3', name: '3.1第四个' },
]

// 当前选中的岗位
const activeJob = ref(jobs[0].id)
const selectedAbilities = computed(() => {
    return jobs.find(j => j.id === activeJob.value)?.abilities ?? []
})
const abilities = computed(() => {
    return allAbilities.filter(a => selectedAbilities.value.includes(a.id))
})

// 连线对象
let lines: any[] = []
function clearLines() {
    lines.forEach(line => line.remove())
    lines = []
}

const activeAbility = ref<string | null>('b1')
// 能力项点击事件
function handleAbilityClick(id: string) {
    activeAbility.value = id
    drawLines()
}

// 绘制线条
function drawLines() {
    // 清除线条
    clearLines()
    // 等待DOM更新后执行
    nextTick(() => {
        // 获取当前职业和技能的DOM元素
        const jobEl = document.getElementById(`job-${activeJob.value}`)
        const abilityEl = document.getElementById(`ability-${activeAbility.value}`)

        // 如果DOM元素存在且LeaderLine存在且LeaderLine.setLine方法存在
        if (jobEl && abilityEl && LeaderLine && LeaderLine.setLine) {
            // 使用LeaderLine.setLine方法绘制线条
            const line = LeaderLine.setLine(
                jobEl,
                abilityEl,
                {
                    // 线条颜色
                    color: '#2196f3',
                    // 线条宽度
                    size: 1.5,
                    // 线条路径
                    path: 'fluid',
                    // 起始端点样式
                    startPlug: 'disc',
                    // 结束端点样式
                    endPlug: 'arrow3',
                    // 是否使用渐变
                    gradient: true,
                    // 是否使用阴影
                    dropShadow: true,
                    // 是否使用虚线
                    dash: { animation: true }
                }
            )
            // 将线条添加到lines数组中
            lines.push(line)
        }
    })
}

// 岗位切换
function handleSelect(val: any) {
    activeJob.value = val.id
    activeAbility.value = val.abilities[0]
}

// 监听岗位切换和窗口变化
watch([activeJob, abilities], () => {
    drawLines()
})

let scrollBox: HTMLElement | null = null

onMounted(async () => {
    drawLines()
    window.addEventListener('resize', drawLines)
    // 获取右侧滚动容器
    nextTick(() => {
        scrollBox = document.querySelector('.right')
        if (scrollBox) {
            scrollBox.addEventListener('scroll', handleScroll, false)
        }
    })
})
onBeforeUnmount(() => {
    clearLines()
    window.removeEventListener('resize', drawLines)
    if (scrollBox) {
        scrollBox.removeEventListener('scroll', handleScroll)
    }
})
function handleScroll() {
    // 重新定位所有连线
    lines.forEach(line => line.position())
}

</script>

<style scoped>
.ability-map {
    display: flex;
    width: 100%;
    height: 700px;
    background: radial-gradient(ellipse at 60% 40%, #11204a 60%, #061b3a 100%);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 0 40px #0a1a3a inset;
    position: relative;
    overflow: hidden;
}

.left {
    width: 240px;
    margin-right: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.job-menu {
    background: transparent;
    color: #fff;
    border: none;
    width: 100%;
}

.job-menu-item-inner {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(90deg, #1a2a4f 80%, #2b3e6b 100%);
    color: #b3d1ff;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 0 12px #1e2e5a;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

.el-menu-item.is-active .job-menu-item-inner,
.el-menu-item:hover .job-menu-item-inner {
    background: linear-gradient(90deg, #2b5cff 60%, #1a2a4f 100%);
    color: #fff;
    border: 2px solid #00ffcc;
    box-shadow: 0 0 24px #00ffcc, 0 0 32px #1e2e5a inset;
}

.right {
    width: 340px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ability-card {
    background: linear-gradient(90deg, #173b6c 60%, #1a237e 100%);
    color: #fff;
    border-radius: 18px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0;
    box-shadow: 0 0 16px #1e2e5a, 0 0 32px #0a1a3a inset;
    transition: background 0.2s, border 0.2s, box-shadow 0.2s;
    cursor: pointer;
    border: 2px solid transparent;
    min-height: 48px;
    display: flex;
    align-items: center;
    padding-left: 32px;
}

.ability-card:hover {
    border: 2px solid #00ffcc;
    background: linear-gradient(90deg, #1e88e5 60%, #283593 100%);
    color: #fff;
}
</style>
基于Vue3+LeaderLine实现画线测距及线条自由调整
算法小生
07-15 1871
先看下效果：我们画线后可以根据比例关系自动计算距离，并且线条不对可以自由调整。欢迎关注公众号 算法小生。
如何在 Vue 3 中使用 vue3-print-nb 实现灵活的前端打印
技小白的博客
06-14 7207
在前端开发中，经常需要打印页面的特定部分，比如客户列表或商品详情页。要快速实现这些功能，可以使用 vue3-print-nb 插件。它通过对 DOM 元素的操作和 CSS 样式的处理，轻松实现页面内容的打印功能。
vue基于leader-line绘制流水线流程图
weixin_43760238的博客
11-24 2142
那么怎么去画出这个结构呢，想到树状结构我们很容易想到递归组件，我们可以先写出每个树节点的布局。结构和样式写好后，通过leader-line将树节点用线连接起来。steps 表示每个树节点中的步骤数。具体的api和用法请查阅官方文档。每一个框代表着一个树中的节点，
js leader-line链接div元素划线工具
qq_43641110的博客
10-08 583
显示或隐藏指示线 (showEffectName效果可取 'draw' 慢慢绘制效果和 'fade'淡入淡出效果)注意：startElement, endElement为template中的元素节点，在。移除连线，实例相关的svg标签将从页面上被删除，leader_line 实例也被销毁。中不要使用GetElementById去获取元素节点，而是要使用ref。该方法接受和构造函数相同的参数选项（除了 hide 属性）指示线会被画在 start 和 end 两个元素之间。
第五篇：VUE使用 leader-line 画各样式线，主要用于连接 DOM 节点，关系图等
热门推荐
Yzt_199626的博客
05-03 2万+
第五篇：VUE使用 leader-line 画各样式线，主要用于连接 DOM 节点，关系图等 这篇博客主要是记录下leader-line 的简单使用，在实际开发中，还挺使用。 1 2 3 4 是4个 div,大致效果如下： 更丰富的配置可到官方文档查看：[leader-line文档](https://anseki.github.io/leader-line/) 1. npm 安装 leader-line npm install leader-line --save 2. 引用的方法如...
Vue3使用LeaderLine
zouxin_88的专栏
12-01 3181
注意：startElement, endElement为template中的元素节点，在Vue3中不要使用GetElementById去获取元素节点，而是要使用ref，可以参考我另外一篇。当元素位置变了时，需要更新连接线。LeaderLine官方文档在。2.导出LeaderLine。
vue引导线leader-line-vue使用
果冻
10-27 2132
【代码】vue实现连接线。
Vue 使用leader-line插件进行数据连线
玉九 鱼的博客
02-22 7276
最近公司下发一个需求需要进行标题依次连线 以及 连线其子级 总结以下遇到的一些坑 效果在以下链接当中： 连线组件视频 <template> <div class="line-block"> <div> <div> <div style="z-index:80;position: relative;"> <div class="items" :id="`b
vue手写多对多关联图，连线用leader-line
weixin_51263829的博客
08-11 2170
【代码】vue手写多对多关联图，连线用leader-line。
leader-line-vue简单使用
xiaowen125的博客
04-24 460
leader-line-vue简单上手，快速使用连线功能
vue2 leader-line画线
warrah 南极狼
12-25 5970
学命理，看书上说的格局，看多了有些就很崩溃，因为没有绝对统一的标准，导致沦为三教九流，我对这方面有些爱好，于是就想着是否可以通过leader-line，将格局的推理过程直观的展现出来，如果能做到是不是很炫呢 js leader-line 学习及问题总结 ...
【leader-line-vue移动svg（指示线元素）到另外一个容器中(定位基准)】
qq_37312180的博客
11-25 2101
【代码】【leader-line-vue移动svg（指示线元素）到另外一个容器中(定位基准)】
使用leader-line-vue实现相关模块的连线
最新发布
wbshfjr的博客
06-04 337
使用leader-line-vue进行连线，并实现相关模块的展开和收起自动变化连线。
LeaderLine的基本使用（项目需要使用线条进行连接展示）
joker_qian的博客
12-15 2544
这边附上 demo 代码具体效果可以自己进行更改 （此代码为html编写如需在项目中使用需进行调整）b，亦可以找到下载到本地项目中的 leader-line.min.js文件 手动在文件后面加上。在 Vue项目中使用需要在dom挂载完后再进行操作否则会显示不出来线条。（此包没有进行导出在项目中无法直接通过es6的语法导入）a，通过插件（ skeleton-loader ）2，在使用地方正常导入即可 （具体参数查看官网。在 vue.config.js 中增加如下配置。1，使用 npm 在项目中进行下载。
leader-line
hunter_97的博客
12-01 2012
leader-line 是一个基于 svg 在网页上画指引线的库。 本文对 leader-line 官方文档 进行了提炼整理，方便快速上手开发。 一、安装 下载插件 npm install leader-line 引入 方式一 在依赖文件夹中找到leader-line.min.js，路径可参考node_modules\_leader-line@1.0.7@leader-line\lea...
指引线leader-line库的使用
知无涯
12-11 1万+
今天给大家介绍一个用于做指引线的库，叫做leader-line。简单好用，非常容易上手。 这个库是用于在二个dom元素之间，画上一条线。可以用作产品详细点补充说明，也有用作相关关系表明。这样说有点空洞，先看一下几个示例。 引入与简单使用 leader-line库不依赖任何库，你无需引入jquery，vue，或其他的第三方库。 一个简单的案例 <!DOCTYPE html> <html> <head> <title>demo</title&g
leader-line-vue在ie11不兼容
vigorZ的博客
09-14 683
leader-line-vue在ie11不兼容 1.通过npm在项目中安装babel-polyfill包 2.找到项目的配置文件 我的项目是通过vue-cli3创建的 在vue.config.js进行添加如下配置 module.exports = { chainWebpack: config => { config.entry('main').add('babel-polyfill'); }, transpileDependencies: [ 'leader-line-vue' ]
leader-line画连接线(可点击切换、滚动更新位置)
qq_37312180的博客
12-05 1385
前言 安装 使用 示例 代码点击查看代码 2.安装 AnimEvent 官方文档 安装 使用 3.安装 d3 安装 使用 4.js 异步 Promise 状态和链式调用 文档 使用 5.源码 GitHub源码 https://github.com/volodyan/vue_ld_component...
如何在Vue中使用leader-line-vue库绘制具有不同颜色的线条?
09-14
在 Vue 中使用 leader-line-vue 库来绘制具有不同颜色的线条，你可以按照以下步骤操作： 1. 首先，在你的项目中安装 leader-line-vue。如果你还没有安装，可以使用 npm 或 yarn 进行安装： ```sh npm install leader-line-vue // 或者 yarn add leader-line-vue ``` 2. 在你的组件文件（例如：`LeaderLine.vue`）中导入 LeaderLine 组件： ```vue <template> <div> <leader-line :nodes="nodes" :line-colors="lineColors"></leader-line> </div> </template> <script> import LeaderLine from &#39;leader-line-vue&#39;; export default { components: { LeaderLine, }, data() { return { nodes: [ { x: 0, y: 0 }, // 起点 { x: 100, y: 200 } // 终点 ], lineColors: [&#39;red&#39;, &#39;blue&#39;], // 不同的颜色数组对应节点间的线条 }; } }; </script> ``` 3. 在 `data` 对象中定义 `nodes` 数组表示线条的起点和终点坐标，并定义 `lineColors` 数组，其中每个元素代表一条线段的颜色。 4. 在 `v-bind` 的语法中，`:nodes` 和 `:line-colors` 分别绑定到组件实例的数据属性上，这样每次数据变化时，线条会自动更新颜色。 5. 如果需要动态设置颜色，可以在计算属性或响应式数据结构中根据业务逻辑生成颜色数组，然后更新。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值