element-plus ElMessageBox 实现复制功能，动态点击html元素不生效解决

mxlWhb

已于 2022-11-04 10:39:36 修改

阅读量2.1k

点赞数

分类专栏： vue 文章标签：前端 html

于 2022-11-04 10:05:36 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42859450/article/details/127683423

版权

本文介绍了在Element-Plus的ElMessageBox组件中如何添加复制功能，以及遇到动态点击HTML元素不起作用的问题时的解决策略。通过对组件的深入理解和配置，成功实现了在弹框中复制文本的需求，并修复了点击事件不响应的bug。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、下载依赖
npm install --save vue-clipboard3

2、使用
import { ElMessageBox, ElMessage } from 'element-plus';
import router from '@/router';
import { computed, h } from 'vue';
import useStore from '@/store';
const { app } = useStore();
const locale = computed(() => app.language);
import useClipboard from 'vue-clipboard3';
const { toClipboard } = useClipboard();
export const toDownload = (fileNmae: string, excelType?: string) => {
  ElMessageBox({
    message: h('p', null, [
      h('p', null, [
        h('span', null, fileNmae),
        h(
          'span',
          {
            style: 'padding:5px;background:#409eff;color:#ffffff;border-radius:5px;margin:5px 20px',
            onclick: () => {
              console.log(fileNmae, '+fileNmae');
              toClipboard(fileNmae);
              ElMessage({

最低0.47元/天解锁文章