element ui 动态下拉框复制

如果你想实现 Element UI 下拉框的复制功能，可以通过以下步骤来实现：

1. 安装 clipboard.js 库

npm install clipboard --save

2. 引入 clipboard.js 库和 Element UI 组件

import Clipboard from 'clipboard'
import { Select, Option } from 'element-ui'

3. 创建 Select 组件，并在 Option 上绑定复制事件

<el-select v-model="value" placeholder="请选择">
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ref="option">
    <span class="copy-btn" @click="copy(item.value)">复制</span>
  </el-option>
</el-select>

这里我们在 Option 组件上绑定了一个 copy 方法，并且在 copy 方法中调用了 clipboard.js 库来实现复制操作。

4. 在组件的 mounted 钩子函数中初始化 clipboard.js

mounted() {
  this.clipboard = new Clipboard('.copy-btn', {
    text: (trigger) => {
      return trigger.parentNode.querySelector('.el-select-dropdown__item span').textContent
    }
  })
},

这里我们通过初始化 clipboard.js 时，传入了一个 text 函数来指定复制的内容，这里我们获取了当前 Option 组件的文本内容作为复制的内容，可以根据实际需求来更改复制的内容。

5. 在组件的 beforeDestroy 钩子函数中销毁 clipboard.js

beforeDestroy() {
  this.clipboard.destroy()
}

这里我们在组件销毁前，通过 clipboard.destroy() 方法来销毁 clipboard.js 实例，避免内存泄漏。

这样就可以实现 Element UI 下拉框的复制功能了。