Detailed explanation of how to copy content to clipboard in vue

1. The el-table implementation of element-ui double-click to copy the contents of the cell to the clipboard

1. Add a double-click response event in el-table

<el-table
      :data="tableData"
      @cell-dblclick="copyText"
      border
    >
    .....
<el-table>

The cell-dblclick function has four parameters, namely row, column, cell, event;

row: You can see all the data in the row where the cell is operated by it;

cloumn: You can see the property of the cell that is operated by it, and according to the property, you can get the value of the cell in row;

cell: You can see the dom structure of this cell;

event: all parameters when the event is triggered;

2. Add the double-click binding copyText method in methods

copyText(row, column, cell, event){
  // Double-click to copy  let save = function (e){
    ('text/plain',); 
    ();  //Block default behavior  }
  ('copy',save);//Add a copy event  ("copy");//Execute the copy method  this.$message({message: 'Copy successfully', type:'success'})//hint}

2. Click the copy icon to copy the corresponding content to the clipboard

1. Add a copy icon

<span v-else>
  <i class="el-icon-document-copy" @click="clickCopy(msg)" />
  {{ msg }}
</span>

2. Add clickCopy method to click Copy in methods

clickCopy(msg) {
  const save = function(e) {
    ('text/plain', msg)
    () // Block default behavior  }
  ('copy', save) // Add a copy event  ('copy') // Execute the copy method  this.$message({ message: 'Copy successfully', type: 'success' })
}

3. Step on the pit

1. After adding the copy event, press ctrl+c to copy the thing on the entire page and it didn't respond.

It is guessed that using ('copy', save) will add events to the entire dom tree, which will overwrite the occurrence of the original events in the dom tree, so you need to add once parameter to make this event take effect only once.

once means that the listener is called only once at most after being added. If true, listener will be automatically removed after it is called

clickCopy(msg) {
      const save = function(e) {
        ('text/plain', msg)
        () // Block default behavior      }
      const once = {
        once: true
      }
      ('copy', save, once) // Add a copy event, execute once when triggered, and delete after execution      ('copy') // Execute the copy method      this.$message({ message: 'Copy successfully', type: 'success' })
    }

refer to:

/zh-CN/docs/Web/API/EventTarget/addEventListener

Summarize

This is the end of this article about how to copy content to clipboard in vue. For more related vue copy content to clipboard content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!