vue2 leader-line画线

学命理，看书上说的格局，看多了有些就很崩溃，因为没有绝对统一的标准，导致沦为三教九流，我对这方面有些爱好，于是就想着是否可以通过leader-line，将格局的推理过程直观的展现出来，如果能做到是不是很炫呢
js leader-line 学习及问题总结
使用yarn添加有些问题，这里采用的是npm

npm install skeleton-loader -D
npm install leader-line -S

在vue.config.js中configureWebpack: config => {配置

 // leader-line画线相关配置
        let path = require('path')
        console.log(path)
        config.module.rules.push({
            test: path.resolve(__dirname, 'node_modules/leader-line/'),
            use: [
                {
                    loader: 'skeleton-loader',
                    options: {
                    procedure: content => `${content}export default LeaderLine`
                    }
                }
            ]
        })

因为获取dom节点，还是使用jquery比较方便，使用document或者vue的ref都很难实现，要写一堆代码，非不得已不应该使用jquery，画线好像没有更好的办法

npm install jquery --save
// vue.config.js
const webpack = require('webpack')

chainWebpack: config => {
// jquery
      config.plugin('provide').use(webpack.ProvidePlugin, [{
            $: 'jquery',
            jquery: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }])
}

通过$event,传递点击事件，从事件中拿到当前元素，再通过jquery获取对应的end元素，接着画线，画线样式按照官方说明即可

import LeaderLine from 'leader-line'
import $ from 'jquery'
let _ = require('lodash')

// 点击按钮，出发画线操作
<el-button type="text" v-for="item in info.gjs" :key="item.val" @click="clickGj($event,info.id)">{{item.name}}</el-button>
//
clickGj(e, id) {
            console.log(id)
            this.drawLine(id, e.target)
        },
        drawLine(panelId,start) {
            // 获取当前面板下符合条件的元素
            let ends = $('#'+panelId +' .mny')
            let animOptions = {duration:3000, timing:'ease-in'}
            if (!_.isEmpty(ends)){
                ends.each((index,end) => {
                    let line = new LeaderLine(e.target, end, {})
                    line.show()
                })
            }
        }

不使用jquery也是可以做到的，这里数组的遍历方式与jquery不一样,只是querySelector不能用做数字开头的选择器

drawLine(e,id) {
            // 获取当前面板下符合条件的元素
            // let ends = $('#'+id +' .mny')
            let ends = document.querySelectorAll('#'+id +' .mny')
            let startOptions = {
                animOptions: {
                    duration: 1000
                },
                hoverStyle:{
                    backgroundColor: null
                },
                // 起始点样式，这里为了清除默认样式,因为默认为黄色背景，没啥用
                style: {
                    paddingTop: null,
                    paddingRight: null,
                    paddingBottom: null,
                    paddingLeft: null,
                    cursor: null,
                    backgroundColor: null,
                    backgroundImage: null,
                    backgroundSize: null,
                    backgroundPosition: null,
                    backgroundRepeat: null
                }
            }
            let endOptions = {
                // color: 'red',
                size: 2,
                hoverStyle:{
                backgroundColor: null
                },
                // 起始点样式，这里为了清除默认样式
                style: {
                paddingTop: null,
                paddingRight: null,
                paddingBottom: null,
                paddingLeft: null,
                cursor: null,
                backgroundColor: null,
                backgroundImage: null,
                backgroundSize: null,
                backgroundPosition: null,
                backgroundRepeat: null
                }
            }
            this.lines = []
            if (!_.isEmpty(ends)){
                ends.forEach((end,i) => {
                    new LeaderLine(
                        LeaderLine.mouseHoverAnchor(e.target,'draw',startOptions)
                        , end, endOptions)
                    // line.show()
                })
            }
        },

上面的代码可以让线消失，但是会提示下面的问题,LeaderLine

leader-line.min.js:2 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at Object.setStyles (leader-line.min.js:2)
    at HTMLButtonElement.a.mouseleave (leader-line.min.js:2)

使用Beautify美化后，调整一段代码,接着再还原回去

setStyles: function (t, n) {
                if (n !== undefined){
                    Object.keys(n).forEach(function (e) {
                        t[e] = n[e]
                    })
                }
            }