像这种复制链接的功能一般我们把他放在utils文件中.

 代码如下:

// 文本复制

export function copyText(value) {

  return new Promise((resolve) => {

    var input = document.createElement("input"); // js创建一个input输入框

    input.value = value; // 将需要复制的文本赋值到创建的input输入框中

    document.body.appendChild(input); // 将输入框暂时创建到实例里面

    input.select(); // 选中输入框中的内容

    document.execCommand("Copy"); // 执行复制操作

    document.body.removeChild(input); // 最后删除实例中临时创建的input输入框,完成复制操作

    resolve();

  });

}

在组件中我们如何去使用:

直接引入:import { copyText } from "@/utils/utils.js";

使用button按钮也可:  <MenuItem @click="copy(mouseRightItem)" >复制链接</MenuItem>

mouseRightItem----我这里传的是一个对象,本质上也是取其中的链接,直接传链接名也可.

然后在组件写一个方法即可:

// 复制链接

    copy(item) {

      const { value } = item;

      console.log(value);

      copyText(value.material_content.address).then(() => {

        this.$message.success({ message: "地址复制成功" });

      });

    },

------------红色的数据就是链接地址

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐