Vue前端复制文本vue-clipboard2

最新推荐文章于 2024-08-10 08:42:03 发布

csstmg

最新推荐文章于 2024-08-10 08:42:03 发布

阅读量123

点赞数

分类专栏： vant 前端 element

本文链接：https://blog.csdn.net/csstmg/article/details/116274608

版权

前端同时被 3 个专栏收录

171 篇文章 1 订阅

订阅专栏

element

104 篇文章 0 订阅

订阅专栏

vant

13 篇文章 0 订阅

订阅专栏

npm install vue-clipboard2

import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

使用
linkUrl 是文字或者链接需要复制的文字

<div style="margin-top: 33px" v-if="!preview">
        <el-input
          v-model="linkUrl"
          size="small"
          class="ml-20"
          style="width: 350px"
          placeholder="访问链接"
          disabled
        ></el-input>
        <el-button
          type="primary"
          size="small"
          v-clipboard:copy="linkUrl"  //对应v-module
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
          class="ml-20"
          >复制链接</el-button
        >
      </div>
    
  
+ methods中
  onCopy () {
      this.$message({
        message: '复制成功',
        type: 'success'
      })
    },
    onError () {
      this.$message.error('复制失败')
    },