テキストをコピーする

このケースは、三者の開発者「peng」から来ています

1. 使用シーン

この例では、適切な組み合わせでテキストコピーを実現する方法を紹介します。

2. 機能を実現する

2.1. カスタムページの作成

2.2. テキストコピー関数

/**
* 文本复制
* @param text 需要复制的内容
*/
export function copyToClip(text) {
  if (this.utils.isMobile() && window.dd) {
    dd.biz.clipboardData.setData({
      text,
      onSuccess: () => {
        this.utils.toast({
          title: '复制成功',
          type: 'success',
        });
      },
      onFail: () => {
        this.utils.toast({
          title: '复制失败',
          type: 'error',
        });
      },
    })
  } else {
    if (navigator.clipboard && window.isSecureContext && typeof navigator.clipboard.writeText === 'function') {
      navigator.clipboard.writeText(text).then(() => {
        this.utils.toast({
          title: '复制成功',
          type: 'success',
        });
      }).catch(() => {
        this.utils.toast({
          title: '复制失败',
          type: 'error',
        });
      });
    } else {
      try {
        const input = document.createElement('input');
        input.readOnly = 'readonly';
        input.value = text;
        document.body.appendChild(input);
        input.select();
        input.setSelectionRange(0, input.value.length);
        document.execCommand('Copy');
        document.body.removeChild(input);
        this.utils.toast({
          title: '复制成功',
          type: 'success',
        });
      } catch (err) {
        this.utils.toast({
          title: '复制失败',
          type: 'error',
        });
      }
    }
  }
}

2.3. 関数の使用

呼び出しの例:

// 点击复制
export function onClick() {
  this.copyToClip(this.$('textareaField_l9pdlt0k').getValue());
}

3. 効果を実現する

4. オンラインで試遊する

示例中心 | 开发者赋能平台

AI智能体时代，全新宜搭。业务创新，一搭就行。

https://www.aliwork.com/o/coc?tplUuid=TPL_IHUV156IYOCLHR9YU9B8&from=yuque_subject