Vue 实现复制功能,不需要任何结构内容直接复制方式

news/2024/7/10 1:05:22 标签: vue, 复制, javascript

介绍:

在做复制文档功能时,考虑到是个不太会复用的小功能,最后选择直接用 document.execCommand 方法实现。

在查阅资料时候,发现其他人都需要在页面上写上结构、ID。然后捕捉某个ID获取内容,感觉很不方便。

使用:

javascript">methods: {
  copyShaneUrl(shareLink){
    var input = document.createElement("input");   // 直接构建input
    input.value = shareLink;  // 设置内容
    document.body.appendChild(_input);    // 添加临时实例
    input.select();   // 选择实例内容
    document.execCommand("Copy");   // 执行复制
    document.body.removeChild(_input); // 删除临时实例
  }
 }

方法代码如上,然后绑定需要执行当前方法的按钮

javascript"><li v-for="(item, index) in meetingList">
  <button @click="copyShaneUrl(item.shareUrl)">复制分享链接</button>
</li>

以上这篇Vue 实现复制功能,不需要任何结构内容直接复制方式就是小编分享给大家的全部内容了,希望能给大家一个参考。


http://www.niftyadmin.cn/n/1466616.html

相关文章

css3字体背景颜色跑马灯

页面效果 CSS .title {border: 0px;font-size: 200%;font-weight: bold;float: left;line-height: 1.5;width: 100%;padding-left: 5px;margin-top:0px;background: -webkit-linear-gradient(left,#ffffff,#ff0000 6.25%,#ff7d00 12.5%,#ffff00 18.75%,#00ff00 25%,#00ffff 31.…

vue路由切换之淡入淡出的简单实现

路由跳转的淡入淡出 在开发中有一种需求叫高端、大气、上档次。所以作为一个前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果&#xff0c;提升我们程序的动效设计 想让路由有过渡动画&#xff0c;需要在<router-view>标签的外部添加<trans…

基于vuex的任务事项管理的小demo

基于vuex的任务管理的小demo&#xff0c;适合学习vuex&#xff0c;充分运用了vuex 程序demo页面 使用到的vuex方法总概况 大家可以自己看看&#xff0c;探讨一下&#xff0c;附git地址&#xff1a; https://github.com/erdfty/vuex-todos

关于Vue不能监听(watch)数组变化

一、vue监听数组 vue实际上可以监听数组变化&#xff0c;比如 data () {return {watchArr: [],}; }, watchArr (newVal) {console.log(监听&#xff1a; newVal); }, created () {setTimeout(() > {this.watchArr [1, 2, 3];}, 1000); }, 在比如使用splice(0,2,3)从数组…

vue中事件修饰符详解(stop, prevent, self, once, capture, passive)

.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交.self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号.capture 是改…

vue3.0中setup使用(两种用法)

一、setup函数的特性以及作用 可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是当你真正开始使用 Vue3 写项目时 你会发现他比 Vue2.x 方便的多 Vue3 的一大特性函数 ---- setup 1、setup函数是处于 生命周期函数…

Do not access Object.prototype method ‘hasOwnProperty‘ from target object

今天用对象的属性hasOwnProperty&#xff0c;去判断对象是否包含该值&#xff0c;我这里主要判断对象是否为空&#xff0c;出现了以上错误&#xff0c;之前也遇到过类似的错误&#xff0c;如parseInt&#xff08;‘24.5’&#xff09;&#xff0c;必须要给转换的进制类型&#…

post方式返回文件流实现前端blob下载,responseType: ‘blob‘无效

responseType: blob 一般情况下&#xff0c;下载分为好几种&#xff0c;但是常用的是get下载文件流直接下载 post下载文件流是很少见的&#xff0c;但是鉴于参数太多&#xff0c;不能走get 只能走post下载&#xff0c;post下载分为两种&#xff1a; 1.form表单下载 2.post返回…