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


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

下面介绍3种使用方法

安装

1
npm install --save vue-clipboard2

在main.js中引入

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

方法1：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 <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函数中使用
在这里插入图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<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("复制失败！");
          })
        },
      }
    }