[Front-end vue] How to copy selected text without triggering a click event

In some specific business scenarios, it is necessary to click on the text to pop up details and select the text for copying. However, simply adding a click event will also trigger a click event when the text is selected.

 As shown in the following example, click on the serial number in the table to pop up the order details, but you can also copy the serial number.

<el-table-column
    prop="serialNumber"
    show-overflow-tooltip
    label="流水号"
    min-width="170">
  <template slot-scope="scope">
    <el-link type="primary"  @click="orderInfo(scope.row)">{
   
   {scope.row.serialNumber}}</el-link>
  </template>
</el-table-column>

solution:

You only need to determine whether there is currently selected text in the click event. If the text is not selected, a pop-up window will be executed. If it is selected, no operation will be performed.

    orderInfo(row){
      if (window.getSelection().toString() === '') {
        this.orderInfo = row;
        this.dialogOrderInfo = true;
      }
    },

Guess you like

Origin blog.csdn.net/qq_39078783/article/details/127526597