vue 简单版复制功能

 

父组件中使用

引入

  components: {

    sphCopy:()=>import('./sphCopy.vue')

  },

使用

<sphCopy ref="copyDom">

　　　这里可以写一些你所需要的复制按钮样式

        <div @click="$refs.copyDom.copy('复制一下')">复制</div>

 

 </sphCopy>

 

子组件 sphCopy.vue

 

<template>

  <div>

     <slot></slot>

     <div class='copyBox'>

      <textarea ref="copyInput" />

    </div>

  </div>

</template>

 

<script type="text/ecmascript-6">

  export default {

    name:'sphCopy',

    methods:{

       copy(v){

          this.$refs.copyInput.value=v;

          this.$refs.copyInput.select();

          document.execCommand("copy");

          this.$message({message:'复制成功',type: 'success'});

      },

    }

  }

</script>

 

<style lang='scss' scoped>

.copyBox{

  opacity: 0;

  position: fixed;

  left: 10000px;

  top:10000px;

}

</style>