美文网首页
vue 实现button点击复制链接

vue 实现button点击复制链接

作者: 一爷之秋 | 来源:发表于2020-04-21 10:50 被阅读0次

使用的是 vue-clipboard2npm 包,配合button按钮,实现点击复制链接功能

下载安装npm包

yarn add vue-clipboard2
// 或
npm install vue-clipboard2 --save-dev

配置npm包

在项目的main.js文件导入并配置

import VueClipboard from 'vue-clipboard2'
VueClipboard.config.autoSetContainer = true; // add this line
Vue.use(VueClipboard);

在项目中button组件中使用

<el-button
  type="text"
  v-if="scope.row.op_status === 2"
  v-clipboard:copy="scope.row.copyMessage"
  v-clipboard:success="onCopy"
  v-clipboard:error="onError"
  >复制链接</el-button
>

v-clipboard:copy = 要复制的内容
v-clipboard:success = 复制成功回调
v-clipboard:error = 复制失败回调

相关文章

网友评论

      本文标题:vue 实现button点击复制链接

      本文链接:https://www.haomeiwen.com/subject/gboyihtx.html