小白单纯记录一下工做中遇到的需求:在vue中如何实现复制功能 (注: 依赖第三方插件 clipboard)vue
第一种直接npm安装: npm install clipboard --save
第二种: <script src="js/clipboard.min.js"></script>(下载地址:https://clipboardjs.com/)
复制代码
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
复制代码
新建一个index.js文件里面存放项目会屡次使用的方法vue-cli
export default{
install(Vue,opstion){
//把方法写在vue原型方便调用
Vue.prototype.copy = function (value) {
this.$copyText(
`${value}`
).then( res => {
//这是element的Message 消息提示组件
this.$message({
message: "复制成功",
type: "success"
});
},
err => {
this.$message.error("复制失败");
}
);
},
}
}
复制代码
<template>
<el-tooltip class="item" effect="dark" content="复制" placement="bottom">
<i class="icon copy iconfont" @click.stop="copyCode()"></i>
</el-tooltip>
</template>
<script>
//直接调用copy方法就能够了
copyCode(scope) {
//把须要复制的内容传value
this.copy(scope.row.date);
},
</script>
复制代码