vue點擊複製功能

複製功能，選中複製或者點擊複製（不使用插件的狀況下）

一、選中複製

這個比點擊複製簡單點

<template>

  <div>

    <el-button type="primary" plain @click="copy()">複製</el-button>

  </div>

</template>

<script>

export default {

  data(){

    return{

      

    }

  },

  methods:{

    copy(){

        document.execCommand("Copy"); // 執行瀏覽器複製命令

        this.$message({

          message: '複製成功',

          type: 'success'

        });

      },

  }

}

</script>

代碼如圖：

選中點擊按鈕便可複製，其實這個並不實用，有助於理解execCommand("Copy")。

 

二、點擊複製

　　（我是在vue+element UI中實現點擊表格中的按鈕複製表格中的數據；）

<template>

  <div>

    <el-table

      :data="tableData"

      style="width: 100%">

      <el-table-column

        prop="name"

        label="姓名"

        width="180">

      </el-table-column>

      <el-table-column label="操做">

        <template slot-scope="scope">

          <el-button

            size="mini"

            @click="handleCopy(scope.$index, scope.row)">複製</el-button>

        </template>

      </el-table-column>

    </el-table>

  </div>

</template>

<script>

export default {

  data(){

    return{

      tableData:{

        name:'小明'

      },

      copyData:null,

    }

  },

  methods:{

    handleCopy(index,row){

      this.copyData = row.name

      this.copy(this.copyData)

    },

    copy(data){

        let url = data;

        let oInput = document.createElement('input');

        oInput.value = url;

        document.body.appendChild(oInput);

        oInput.select(); // 選擇對象;

        console.log(oInput.value)

        document.execCommand("Copy"); // 執行瀏覽器複製命令

        this.$message({

          message: '複製成功',

          type: 'success'

        });

        oInput.remove()

      },

  }

}

</script>            

如圖：

其實就是把值賦給一個建立的節點選中