Vue3 前端总结

1、如何防止按钮两次连续点击？

1.1场景：

提交表单过程中，防止连续点击重复提交。 

1.2方法：

添加一个临时变量，进入方法设置为true  方法结束设置为false 并且暂停三秒

1.3代码实现：

<script lang="ts" setup>

// 临时变量
let temp = false;
let send = () => {

    if (temp) {
        return;
    }
    // 进入方法，设置temp为true 防止再次进入
    temp = true;

    // 主要的代码逻辑
    // ....
    // ....

    // 方法结束的地方，重新设置为false
    setTimeout(() => {
        temp = false;
    }, 3000);

};
</script>

2、JavaScript实现点击按钮，复制文本

2.1场景：

web端，点击按钮，复制目标文本到剪切板。 

2.2方法：

调用剪贴板。

2.3代码实现：

function Copy(str: string) {
    // 根据不同的回传参数，复制不同的文本
  if (str === "email") {
    str = email_code;
  } else {
    str = wechat_code;
  }
  const clipboardObj = navigator.clipboard;

  if (clipboardObj) {
    // 不支持Clipboard对象直接报错
    return clipboardObj.writeText(str).then(
      // 读取内容到剪贴板
      () =>
        ElNotification({
          title: "成功复制！",
          message: "已复制" + str,
          type: "success",
        })
    );
  }
}

updating...