-
结果如下:
-
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css">
<style>
.el-row {
margin-bottom: 20px;
}
.el-row:last-child {
margin-bottom: 0;
}
#copyArea {
position: absolute;
width: 50%;
}
#copyText {
position: relative;
display: inline-block;
}
#copyBtn {
/*display: inline-block;*/
position: absolute;
bottom: 5px;
right: 1px;
}
/*html { overflow-x:hidden; }*/
body {
overflow-x:hidden;
overflow-y:hidden;}
</style>
</head>
<body >
<div id="app">
<el-row :gutter="20">
<el-col :offset="6" >
<div id="copyArea">
<el-input
id="copyText"
type="textarea"
:rows="30"
placeholder="请输入要复制的内容"
v-model="textarea">
</el-input>
<el-button round size="small" id="copyBtn" @click="clickCopyBtn(textarea, $event)"
data-clipboard-target="#copyText">复制
</el-button>
</div>
</el-col>
</el-row>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
<script src="https://cdn.bootcss.com/clipboard.js/2.0.6/clipboard.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
textarea: ' '
}
},
methods: {
clickCopyBtn: function (text, event) {
const btnId = '#' + event.currentTarget.id;
const clipboard = new ClipboardJS(btnId, {
text: () => text
});
// const clipboard = new ClipboardJS(event.target);
clipboard.on("success", e => {
this.$message({
type: "success",
message: "复制成功",
duration: 300,
showClose: true,
}); //这里你如果引入了elementui的提示就可以用,没有就注释即可
// 释放内存
clipboard.destroy();
});
clipboard.on("error", e => {
// 不支持复制
this.$message({
type: "error",
message: "复制失败",
duration: 300,
showClose: true,
});
clipboard.destroy();
});
}
}
})
</script>
</html>