js文本复制插件&vue

Posted 2021-01-09 xiaojiangK

/*  html：
*    <a href="javascript:;" class="copy" data-clipboard-text="copy"></a>
*/
$(‘.bdsharebuttonbox .copy‘).on(‘click‘, function (){
    $(this).attr(‘data-clipboard-text‘,window.location.href);

    var clipboard = new Clipboard(‘.copy‘);
    clipboard.on(‘success‘,function(e){
        e.clearSelection();
        alert(‘复制成功‘);
    });
    clipboard.on(‘error‘,function(e){
        e.clearSelection();
        alert(‘复制失败‘);
    });
});

// vue 文本复制插件
/*   install： 
*    1、npm install --save vue-clipboard2
*    2、import Vue from ‘vue‘
*    3、import VueClipboard from ‘vue-clipboard2‘
*/
/*    HTML：
*    <el-button class="ml10" type="text" size="medium"
*   v-clipboard:copy="sysAppIds"
*   v-clipboard:success="onCopy"
*   v-clipboard:error="onError">点击复制</el-button>
*/
export default {
    data(){
      return {
        sysAppIds: ‘xxxxxxxxxxxsx‘
      }
    },
    methods: {
      // 复制成功
      onCopy(e){
        console.log(e.text);
      },
      // 复制失败
      onError(e){
        alert("失败");
      },
    }
 }