copy is not a function

[xianghongai]

🐛 Bug Report

vue

<!-- table v-clipboard -->
<!-- tr v-for -->
<!-- td -->
{text}
<i :data-clipboard-text={text} class="icon-copy clipboard__trigger" title="Copy ID"></i>

import Clipboard from 'clipboard';

function listener(event) {
  const target = event.target;
  if (target.classList.contains('clipboard__trigger')) {
    const clipboardText = target?.dataset.clipboardText;
    Clipboard.copy(clipboardText);    
  }
}

export default {
  name: 'Clipboard',
  bind(el) {
    el.addEventListener('click', listener);
  },
  unbind(el) {
    el.removeEventListener('click', listener);
  },
};

Have you read the Contributing Guidelines on issues?

Yes.

Expected Behaviour

Copy function can be effective

Actual Behaviour

Uncaught TypeError: clipboard__WEBPACK_IMPORTED_MODULE_0___default.a.copy is not a function

To Reproduce

There are multiple rows in a table, and each row has an ID.

Hovering over the ID, a Copy button icon is displayed, click on it to copy the ID.

Browsers Affected

Chrome 92.0.4515.159

Operational System

Windows 10