vue h5 实现一键复制文案功能

news/2024/7/19 14:56:53 标签: vue, js, H5

点击按钮,实现一键复制纯文案的功能,代码如下:

在这里插入图片描述

方法一 原生的方法 一般在浏览器上使用

copyUrl() {
      let url = this.codeUrl
      let domInput = document.createElement('input');
      domInput.value = url;
      document.body.appendChild(domInput);  // 添加input节点
      domInput.select(); // 选择对象;
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$toast({
        message: `链接复制成功!`,
        duration: 2000
      });
      domInput.remove()
},

方法二 安装插件
PC端 H5端都可以用

npm install clipboard --s

局部引用

import Clipboard from 'clipboard';
 copyUrl() {
      let copy = this.codeUrl  //要复制的链接
      let clipboard = new Clipboard('.copy', {  //绑定需要的触发的dom
        text: function () {
          return copy;
        }
      });
      let _this = this
      clipboard.on('success', function (e) {
        _this.$toast({
          message: `链接复制成功!`,
          duration: 2000
        });
      });
    },

效果图 直接粘贴到想复制的页面
在这里插入图片描述


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

相关文章

matlab 画同colorbar的图_利用Matlab处理Lumerical FDTD的三角纳米片电场分布仿真结果...

FDTD计算得到的电场分布,但是FDTD通过另存为jpg或者截屏所得到的图片分辨率很低,得到的图片往往不能直接使用。因此,可以通过脚本输入到Maltab,然后再利用Matlab处理图片并输出。  但是将数据从FDTD输出到Matlab中,并…

启动vue时ESLint报错解决方案

默认情况下,ESLint和vscode格式化工具有冲突 Eslint语法太严格,有好几种方法关闭方法。这里直接用个简单的关闭方法 在vue.config.js中添加如下代码,重新nmp run dev 就能正常运行了 lintOnSave: false,//关闭eslint报错和警告

python发邮件未命名附件_python3发邮件,附件名称为中文时出错

问题描述 我写了一个发邮件的类,一切进行的很顺利,但是附件名改成中文的时候就出问题了 问题出现的环境背景及自己尝试过哪些方法 用的是python3*和email包 是了MIMEText、MIMEApplication、MIMEBase都不行 相关代码 // 请把代码文本粘贴到下方&#xff…

vue项目接口响应之前默认给所有接口加上公共参数的操作

在request.js中的请求拦截器里面添加如下代码 如果是get请求 需要在URL后面拼接的话 用到的是 config.params {appkey:appkey}如果是post请求 不需要在URL后面拼接的话 用到的是 config.data {appkey:appkey}那这时候直接添加会有问题 在请求拿到的参数中只会拿到你添加的…

python保存json文件_Python如何存储数据到json文件

1 前言 很多程序都要求用户输入某种信息,程序一般将信息存储在列表和字典等数据结构中。 用户关闭程序时,就需要将信息进行保存,一种简单的方式是使用模块json来存储数据。 模块json让你能够将简单的Python数据结构转存到文件中,并…

Warning: icon should have ‘type‘ prop or ‘component‘ or ‘children‘解决方法

首先报错翻译 [ant-design/icons]应该有一个component或者children 通过排查发现 当icon为""或者null时 就会报这个错 方法如下 将icon " " 中间加个空格就好了 大体意思就是在给 icon 这个组件传值时不能穿空,就算多一个空格符也好&#xf…

oracle 必须声明标识符_JavaScript let和const声明

在函数作用域或全局作用域中通过关键字var声明的变量,无论在哪里声明,都会被当成在当前作用域顶部声明的变量,这就是JavaScript的变量提升机制。我们看下面的代码:变量声明这种变量提升机制在开发时会给我们造成很多的困扰&#x…

vue a-range-picker回显问题和回显之后值无法改变的问题

直接记录吧 原因很简单: 回显从后端传过来的日期要么是时间戳 要么是正常日期 而选择日期的控件的日期格式显示的不是这种 是中国标准日期 所以就是说日期格式不对 导致不回显 解决方法: a-range-picker里面选中的时间默认是moment对象,所以要…