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

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

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({
                message: locale.value === 'en' ? 'Copy succeeded' : '复制成功',
                type: 'success',
              });
            },,
          },
          locale.value === 'en' ? 'Copy' : '复制'
        ),
      ]),
      h('p', locale.value === 'en' ? 'Whether to go to the download center?' : '是否前往下载中心？'),
    ]),
    showCancelButton: true,
    confirmButtonText: locale.value === 'en' ? 'Yes' : '是',
    cancelButtonText: locale.value === 'en' ? 'No' : '否',
    center: true,
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        done();
        router.push({ path: '/download', query: { excelType: excelType || 'Export' } });
      } else {
        done();
      }
    },
  });
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46