vue复制到剪切板功能(vue-clipboard2)

6,106 阅读1分钟

写在前面:为什么会是vue-clipboard2???因为刚写的项目就用的这个啊,哈哈哈哈,我只好记下这个怎么用了,至于clipboard,用法几乎一样,只是写法不同罢了

  • 项目基础 vue+webpack

  • 安装

    npm i vue-clipboard2 --save-dev
    
  • 在main.js中引入

    import VueClipboard from 'vue-clipboard2';
    
    Vue.use(VueClipboard)
    
  • 使用

    methods:{
        copyText(){   //this.clidata是要复制的动态数据
            this.$copyText(this.clidata).then(()=> {
                console.log("复制成功"+this.clidata)
            },()=> {
                console.log("复制失败了")
                }
            )}
        }
    
  • 调用

    直接调用copyText()就行了


附项目代码,功能是表格文本双击即可复制到剪切板

  columns:[
    {
        titel:"编号",
        key:"sys_order_no",
        render: (h, params) => {
            return h(
              "span",
              {
                on: {
                  dblclick: () => {
                    this.clidata = params.row.sys_order_no;
                    this.clifun();
                  }
                }
              },
              params.row.sys_order_no
            );
          }
    }
  ]