gas-injection/src/hooks/web/useCopyModal.ts

import { isRef, unref, watch, Ref, ComputedRef } from 'vue';
import Clipboard from 'clipboard';
import { ModalOptionsEx, useMessage } from '/@/hooks/web/useMessage';

/** 带复制按钮的弹窗 */
interface IOptions extends ModalOptionsEx {
  // 要复制的文本，可以是一个 ref 对象，动态更新
  copyText: string | Ref<string> | ComputedRef<string>;
}

const COPY_CLASS = 'copy-this-text';
const CLIPBOARD_TEXT = 'data-clipboard-text';

export function useCopyModal() {
  return { createCopyModal };
}

const { createMessage, createConfirm } = useMessage();

/** 创建复制弹窗 */
function createCopyModal(options: Partial<IOptions>) {
  let modal = createConfirm({
    ...options,
    iconType: options.iconType ?? 'info',
    width: options.width ?? 500,
    title: options.title ?? '复制',
    maskClosable: options.maskClosable ?? true,
    okText: options.okText ?? '复制',
    okButtonProps: {
      ...options.okButtonProps,
      class: COPY_CLASS,
      [CLIPBOARD_TEXT]: unref(options.copyText),
    } as any,
    onOk() {
      return new Promise((resolve: any) => {
        const clipboard = new Clipboard('.' + COPY_CLASS);
        clipboard.on('success', () => {
          clipboard.destroy();
          createMessage.success('复制成功');
          resolve();
        });
        clipboard.on('error', () => {
          createMessage.error('该浏览器不支持自动复制');
          clipboard.destroy();
          resolve();
        });
      });
    },
  });

  // 动态更新 copyText
  if (isRef(options.copyText)) {
    watch(options.copyText, (copyText) => {
      modal.update({
        okButtonProps: {
          ...options.okButtonProps,
          class: COPY_CLASS,
          [CLIPBOARD_TEXT]: copyText,
        } as any,
      });
    });
  }
  return modal;
}