vue 利用clipboard进行复制

下载 clipboard 组件

npm install clipboard --save

import clipboard from 'clipboard';
//注册到vue原型上
Vue.prototype.clipboard = clipboard;

用在table组件中

<el-table-column  prop="appid"  show-overflow-tooltip label="AppID - AppSecret" >
       <template slot-scope="scope">
           <div>
             {{scope.row.appid}} -- {{scope.row.app_secret}} 
            </div>
                <el-button type="text" 
                    data-clipboard-action="copy" 
                  
                     :data-clipboard-text=" 'AppID：' + scope.row.appid +  ' AppSecret：' +  scope.row.app_secret"     //需要复制的文本内容
                       class="cobyOrderSn" @click="copylink" >复制</el-button>
                </template>
          </el-table-column>

methods: {
         //复制
            copylink() {
                let _this = this;
                let clipboard = new this.clipboard(".cobyOrderSn");
                clipboard.on('success', function () {
                    console.log(123)
                    _this.$message({showClose: true,duration:3000,message: '复制成功',type: 'success'});
                });
                clipboard.on('error', function () {
                   _this.$message({showClose: true,duration:3000,message:'复制失败',type: 'error'});
                });
            },
}