github: https://github.com/zenorocha/clipboard.js
utils.js
export const copy = className => {
const clipboard = new Clipboard(className);
clipboard.on('success', () => {
Message({
message: '复制成功',
type: 'success',
});
clipboard.destroy(); // 释放内存
});
clipboard.on('error', () => {
Message({
message: '该浏览器不支持自动复制',
type: 'warning',
});
clipboard.destroy(); // 释放内存
});
};
<el-tree
ref="tree"
:data="data"
:props="defaultProps"
:indent="5"
node-key="id"
default-expand-all
:expand-on-click-node="false"
@current-change="currentChange"
>
<div
slot-scope="{ node, data }"
:class="{
'department-tree-node': true,
'department-tree-select': selectId === data.id,
}"
>
<textTooltip
:content="node.label"
type="text"
class="department-tree-node__label"
class-name="department-tree-node__label__box"
/>
<div class="department-tree-node__btn">
<el-button
v-if="node.level < 2 && hasPermissions('pro_org_add')"
type="text"
size="mini"
icon="el-icon-plus"
@click.stop="append(node, data)"
>
</el-button>
<el-button
v-if="hasPermissions('pro_org_edit')"
type="text"
size="mini"
icon="el-icon-edit"
@click.stop="edit(node, data)"
>
</el-button>
<el-button
v-if="node.level !== 1"
type="text"
size="mini"
icon="el-icon-link"
@click.stop="link(data)"
></el-button>
<el-button
v-if="node.level !== 1 && hasPermissions('pro_org_del')"
type="text"
size="mini"
icon="el-icon-close"
@click.stop="remove(data)"
>
</el-button>
</div>
</div>
</el-tree>
<span ref="copyValue" class="copyValue" :data-clipboard-text="clipboardText" @click="copy('.copyValue')"></span>
link(data) {
console.log(lStorage.get('tenantid'));
this.clipboardText = `${window.location.protocol}//${window.location.host}/scd-footprint-enterprise/register?id=${
data.id
}&tenantId=${lStorage.get('tenantId')}`;
this.$confirm('是否生成邀请企业注册链接?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
this.$refs.copyValue.click();
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消',
});
});
},