在vue中使用vue-clipboard2实现点击复制链接功能

在vue中使用vue-clipboard2实现点击复制链接功能（配合使用iview）

下面介绍3种使用方法

安装

npm install --save vue-clipboard2

在main.js中引入

import VueClipboard from "vue-clipboard2";
Vue.use(VueClipboard);

方法1：

<Button style="margin:50px" type="default" @click="copyUrl">复制链接</Button>


export default {
      name: "copy",
      data(){
          return{
            linkUrl:'https://blog.csdn.net/qq_37656005/article/details/109720796',
          }
      },
      methods:{
        copyUrl(){
          this.$copyText(this.linkUrl).then(e=>{
            this.$Message.success("复制成功！");
          }, e=> {
            this.$Message.error("复制失败！");
          })
        }
      }
    }

方法2：

 <Button style="margin:50px" type="default"
            v-model="linkUrl"
            v-clipboard:copy="linkUrl"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError">复制链接</Button>

export default {
      name: "copy",
      data(){
          return{
            linkUrl:'https://blog.csdn.net/qq_37656005/article/details/109720796'
          }
      },
      methods:{
        onCopy(e) {
          this.$Message.success("复制成功！");
        },
        onError(e) {
          this.$Message.error("复制失败！");
        }
      }
    }

方法3：在树形控件中使用，render函数中使用

<Tree style="width:300px" :data="dataTree" :render="renderContent" class="demo-tree-render"></Tree>

 export default {
      name: "copy",
      data(){
          return{
            dataTree: [
              {
                title: 'parent 1',
                expand: true,
                linkAddress:'http://url-1',
                children: [
                  {
                    title: 'child 1-1',
                    expand: true,
                    linkAddress:'http://url-1-1',
                    children: [
                      {
                        title: 'leaf 1-1-1',
                        expand: true,
                        linkAddress:'http://url-1-1-1'
                      },
                      {
                        title: 'leaf 1-1-2',
                        expand: true,
                        linkAddress:'http://url-1-1-2'
                      }
                    ]
                  },
                  {
                    title: 'child 1-2',
                    expand: true,
                    linkAddress:'http://url-1-2',
                    children: [
                      {
                        title: 'leaf 1-2-1',
                        expand: true,
                        linkAddress:'http://url-1-2-1'
                      },
                      {
                        title: 'leaf 1-2-2',
                        expand: true,
                        linkAddress:'http://url-1-2-2'
                      }
                    ]
                  }
                ]
              }
            ],
            buttonProps: {
              type: 'default',
              size: 'small',
            }
          }
      },
      methods:{
        renderContent (h, { root, node, data }) {
          return h('span', {
            style: {
              display: 'inline-block',
              width: '100%'
            }
          }, [
            h('span', [
              h('Icon', {
                props: {
                  type: 'ios-paper-outline'
                },
                style: {
                  marginRight: '8px'
                }
              }),
              h('span', data.title)
            ]),
            h('span', {
              style: {
                display: 'inline-block',
                float: 'right',
                marginRight: '32px'
              }
            }, [
              h('Button', {
                props: Object.assign({}, this.buttonProps, {
                  icon: 'ios-copy'
                }),
                style: {
                  marginRight: '8px'
                },
                on: {
                  click: () => { this.treeCopyUrl(data.linkAddress) }
                }
              })
            ])
          ]);
        },
        treeCopyUrl(data){
          this.$copyText(data).then(e=>{
            this.$Message.success("复制成功！");
          }, e=> {
            this.$Message.error("复制失败！");
          })
        },
      }
    }