vu项目复制文本插件

第一步 :安装插件
  cnpm install vue-clipboard2 --save

 

第二步:引入到项目

  // main.js引入
  import VueClipboard from 'vue-clipboard2'
  Vue.use(VueClipboard)

 

第三步: 在组件中(.vue文件)使用

<template>
  <div>
    <div class="wxsmallcode-page publicCon">
      <div class="copyBox">
        msg:<span>{{msg}}</span>
        <div  v-clipboard:copy="msg"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError">
          点击复制
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {Toast} from 'Mint-ui'
  export default {
    name:'copy',
    data() {
      return {
        msg: 'xxxxxxxx'
      }
    },
    methods: {
      // 复制成功
      onCopy (e) {
        msg('复制成功')
      },
      // 复制失败
      onError (e) {
        msg('复制失败')
      }
    }
  }
  const msg = m => {
    Toast({
      message: m,
      position: 'middle',
      duration: 2000
    })
  }
</script>

 

posted @ 2020-09-17 11:53  Kobe_bk  阅读(123)  评论(0编辑  收藏  举报