LeaderLine的基本使用（项目需要使用线条进行连接展示）

joker_qian

已于 2023-12-20 10:47:57 修改

阅读量888

点赞数 7

文章标签：前端 vue.js

于 2023-12-15 15:09:34 首次发布

本文链接：https://blog.csdn.net/joker_qian/article/details/135017069

版权

官网地址：LeaderLine (anseki.github.io)

npm地址：leader-line - npm (npmjs.com)

1，使用 npm 在项目中进行下载

npm i leader-line

坑点（此包没有进行导出在项目中无法直接通过es6的语法导入）

a，通过插件（ skeleton-loader ）

npm install skeleton-loader -D

在 vue.config.js 中增加如下配置

configureWebpack:{
    module: {
      rules: [
        {
          test: path.resolve(__dirname, 'node_modules/leader-line/'),
          use: [{
            loader: 'skeleton-loader',
            options: { procedure: content => `${content}export default LeaderLine` }
          }]
        }
      ]
    }
  },

b，亦可以找到下载到本地项目中的 leader-line.min.js文件手动在文件后面加上

2，在使用地方正常导入即可（具体参数查看官网 LeaderLine (anseki.github.io) ）

import LeaderLine from 'leader-line'

在 Vue项目中使用需要在dom挂载完后再进行操作否则会显示不出来线条

这边附上 demo 代码具体效果可以自己进行更改（此代码为html编写如需在项目中使用需进行调整）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://blog-static.cnblogs.com/files/mggahui/leader-line.min.js"> 
    </script>
</head>

<body>
    <style>
        .target {
            display: inline-block;
            background-color: #9ee7ea;
            padding: 12px;
        }

        .box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;

        }

        #start {
            /* width: 100%; */
            height: 50px;
        }

        #end1,
        #end2 {
            margin-top: 170px;
            margin-right: 20px;
            height: 50px;
        }
    </style>
    <div class="box">
        <div style="width: 100%;text-align: center;">
            <div class="target" id="start">start</div>
        </div>
        <div class="target" id="end1">end1</div>
        <div class="target" id="end2">end2</div>
    </div>
    <script>
        let leaderLine = new LeaderLine(
            document.getElementById('start'),
            document.getElementById('end1'), {
                startPlugColor: '#ff3792', // 渐变色开始色
                endPlugColor: '#fff386', // 渐变色结束色
                gradient: true, // 使用渐变色
                dash: { // 虚线样式
                    animation: true, // 让线条滚动起来
                },
                path: 'grid',
                endSocket: 'top',
                startSocket: 'bottom',
                endPlug: 'arrow2'
                // hide: true,
            }
        );
        let leaderLine2 = new LeaderLine(
            document.querySelector('#start'),
            document.querySelector('#end2'), {
                startPlugColor: '#ff3792', // 渐变色开始色
                endPlugColor: '#fff386', // 渐变色结束色
                gradient: true, // 使用渐变色
                dash: { // 虚线样式
                    animation: true, // 让线条滚动起来
                },
                path: 'grid',
                endSocket: 'top',
                startSocket: 'bottom',
                endPlug: 'arrow2'
                // hide: true,
            }
        );

    </script>
</body>

</html>

附上效果图：

joker_qian

关注

7
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
LeaderLine的基本使用（项目需要使用线条进行连接展示）

这边附上 demo 代码具体效果可以自己进行更改（此代码为html编写如需在项目中使用需进行调整）b，亦可以找到下载到本地项目中的 leader-line.min.js文件手动在文件后面加上。在 Vue项目中使用需要在dom挂载完后再进行操作否则会显示不出来线条。（此包没有进行导出在项目中无法直接通过es6的语法导入）a，通过插件（ skeleton-loader ）2，在使用地方正常导入即可（具体参数查看官网。在 vue.config.js 中增加如下配置。1，使用 npm 在项目中进行下载。
复制链接

扫一扫