vue中对iview树每个节点增加复制粘贴功能

vue中对iview树每个节点增加复制粘贴功能

微信公众号：前端程序猿之路
关注可了解更多的前端知识，反馈问题或建议，请公众号留言。
如果你觉得公众号内容对你有帮助，欢迎关注并转载

需求：在每个树节点后面都添加一个‘复制标识’，鼠标移入当前行后当前行显示‘复制标识’，点击复制标识对当前树节点的标识进行复制并提示是否复制成功，点击鼠标右键进行粘贴
效果图：
·
代码：因为树用的是iview里面的树组件，要想在树节点后面添加‘复制标识’必须通过render函数给每个节点添加span标签，添加标签以后在里面写moseover，mouseout、以及click方法，在里面调用复制方法，复制安装了依赖vue-clipboard2，可以通过 npm install --save vue-clipboard2 安装，具体代码如下：

render方法：

renderContent (h, { root, node, data }) {
        return h('div', {style: {
            display: 'inline-block'
        }}, [
            h('span', {
                style: {
                    width: '100%',
                    padding: '3px 4px',
                    borderRadius: '3px',
                    backgroundColor: node.node.selected ? '#d5e8fc' : '#fff'
                },
                on: {
                    click: (e) => {
                        this.selected = node.node.template
                        return this.current === node.node.template
                    },
                    mouseover: (e) => {
                        e.currentTarget.nextElementSibling.style.opacity = '1'
                        e.currentTarget.style.cursor = 'pointer'
                    },
                    mouseout: (e) => {
                        e.currentTarget.nextElementSibling.style.opacity = '0'
                    }
                }
            }, data.title),
            h('span', {
                style: {
                    fontSize: '14px',
                    paddingLeft: '18px',
                    color: '#03A4AD',
                    opacity: '0',
                    width: '100%'
                },
                on: {
                    click: (e) => {
                        this.doCopy(node.node.template.id)
                    },
                    mouseover: (e) => {
                        e.currentTarget.style.opacity = '1'
                        e.currentTarget.style.cursor = 'pointer'
                    },
                    mouseout: (e) => {
                        e.currentTarget.style.opacity = '0'
                    }
                }
            }, '复制标识')
        ])
    },

copy方法：

doCopy (val) {
            let this_ = this
            this.$copyText(val).then(function (e) {
                this_.$Message.info('复制成功')
            }, function (e) {
                this_.$Message.info('当前浏览器暂不支持,请手动复制')
            })
        }

欢迎关注公众号，有你想要的前端知识：