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('当前浏览器暂不支持,请手动复制')
})
}
欢迎关注公众号,有你想要的前端知识: