美文网首页
vue 简单copy功能实现

vue 简单copy功能实现

作者: 小娜同学 | 来源:发表于2021-03-10 10:33 被阅读0次
功能效果

记录自己平时遇到的小功能呢过。首页我们要实现效果图中的功能,不用使用插件就可以实现的下过,直接上图

需要粘贴代码,自行复制

```

methods:{

  copyThat(data){

    let url= data;

    let oInput= document.createElement('input');

    oInput.value= url;

    document.body.appendChild(oInput);

    oInput.select(); // 选择对象;

    console.log(oInput.value)

    document.execCommand("Copy"); // 执行浏览器复制命令

    this.$Message.success("复制成功!");

    oInput.remove()

  }

}

```

相关文章

  • vue 简单copy功能实现

    记录自己平时遇到的小功能呢过。首页我们要实现效果图中的功能,不用使用插件就可以实现的下过,直接上图 需要粘贴代码,...

  • 实现一个简单的vue

    实现一个简单的vue 以下仅仅实现了vue里非常简单的功能 第一步:initData 将options的data数...

  • VUE+WebRTC实现音视频直播

    如何使用 Vue 实现音视频功能 1 功能简介 本文将介绍如何快速使用 Vue 实现一个简单的实时音视频通话。 相...

  • 实现v-model功能组件实例

    实现v-model功能组件实例 app.vue: 如图: 实现v-model功能组件官网上更简单的写法vModel...

  • js copy功能实现

    IE - window下有个clipboardData对象,用来处理剪切板操作。 该对象下共有以下三个方法: cl...

  • 前端vue项目实现单页打印功能

    前端vue项目实现单页打印功能 vue-print-nb插件:这是用于打印,简单,快速,方便,轻便的指令包装。安装...

  • VUE纯前端导出excel表格功能

    插件:使用vue-json-excel插件实现Vue纯前端导出简单的Excel表格功能。 使用方法 1. 安装依赖...

  • vue使用markdown

    功能比较简单,使用vue-simplemde实现markdown文本编辑器。https://github.com/...

  • SpringBoot+Vue+WebSocket 实现在线聊天

    一、前言 本文将基于 SpringBoot + Vue + WebSocket 实现一个简单的在线聊天功能 页面如...

  • 实现浏览器的copy设置

    今天看了一段代码是实现浏览器copy复制功能的,我们用属性execCommand("Copy");

网友评论

      本文标题:vue 简单copy功能实现

      本文链接:https://www.haomeiwen.com/subject/zrfwqltx.html