vue 一键复制粘贴文字功能

news/2024/7/19 14:45:19 标签: html, javascript, js, vue

1/下载 clipboard 依赖

js">npm install clipboard --save

2/在功能页面写如下代码

js"><template>
     <div style="margin:10px auto;" v-for="(item,index) in ringTemplete" :key="index" class="article" >
          <el-card class="box-card">
               <h1>{{item.name}}</h1>
               <p>{{item.detail}}</p>
               <el-button type="primary" class="copy-btn" @click="copyString(item.detail)" :data-clipboard-text="link" size="mini">复制内容</el-button>
           </el-card>
      </div>
</template>

import Clipboard from 'clipboard'   //引入依赖
export default {
  data () {
    return {
         link:'',  //复制的文字内容
		ringTempleteList:{
			'雨水':[
      			  {name:'交节时间',detail:'斗指壬;太阳黄经度数为330°。公历2月18-20日交节'},
    		 ],
	    }
	}
  },
 methods: {
	copyString(link){
      this.link=link
      let clipboard = new Clipboard('.copy-btn') // 这里括号里填写上面点击事件绑定的class名
      clipboard.on('success', (e) => {
        // 复制成功,提示根据自己项目实际使用的UI来写
        this.$message({
          message: '复制成功',
          type: 'success'
        });
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', (e) => {
        // 不支持复制,提示根据自己项目实际使用的UI来写
        this.$message.error('该浏览器不支持自动复制');
        // 释放内存
        clipboard.destroy()
      })
    },
}
}

在这里插入图片描述
demo 地址 暂定


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

相关文章

hyper运算符_来自Intel的高性能的正则表达式匹配库——Hyperscan

作者简介&#xff1a;王翔&#xff0c;英特尔软件工程师&#xff0c;负责Hyperscan研发。主要研究领域包括正则表达式匹配&#xff0c;深度报文检测等。感谢英特尔工程师张磊的建议和修改。阅读字数&#xff1a;2969 | 5分钟阅读摘要Hyperscan是一款来自于Intel的高性能的正则表…

jsp 新建页面的方法

jsp 新建页面需要更改java代码,示例如下 新建一个cs.jsp 使用jsp ${ctx} 获取当前根目录或是用相对路径都是跳不过去的 <a href"${ctx}/cs">测试</a>这时要找到你项目中的 Controler层 在相应java页下配置如下代码就可以了 RequestMapping(value &q…

中小型企业网络规划设计方案_深圳线尚网络:中小型企业网站建设方案包含哪些内容?...

对于中小企业来说&#xff0c;网站是非常重要的&#xff0c;它代表了企业的对外形象&#xff0c;也是做口碑宣传、营销引流的重要窗口。那么如何让网站发挥这些基础作用呢?这就需要你认真准备企业网站建设方案详细方案了。但是很多新手并不明白企业网站建设方案应该怎么做&…

vue-cli 2.0/3.0+ vue build打包生成的文件中运行index.html报错Failed to load resource: net::ERR_FILE_NOT_FOUND 白屏

问题 执行npm run build 生成的打包文件运行index.html 报错,上线不能正常显示内容 解决办法 vue-cli 2.0 在build / webpack.prod.conf.js 文件 output参数配置 publicPath:’./’, 重新build即可 vue-cli 3.0 及以上 1.在vue.config.js 文件中 修改成 publicPath: ‘…

前端埋点的缺点_前端-埋点-理念-通识-浅谈

本文将全部以Q&A的形式来进行描述Q1&#xff1a;为什么需要埋点&#xff1f;采集用户浏览次数采集用户交互行为采集商品曝光...先别管采集了什么&#xff0c;重点就是采集二字Q2&#xff1a; 采集来有什么用啊&#xff1f;前端&#xff1a;上报用户行为啊&#xff01;前端&…

excel查找在哪里_系统学习Excel的知识框架,真香

Excel确实博大精深&#xff0c;如果要精通的话有很多模块需要学习。很多人用到Excel都是工作中遇到了问题&#xff0c;然后通过搜索引擎查找并学起来的&#xff0c;很少有人系统的去沉下心来专业的学习Excel&#xff0c;大部分人都只是懂得了一些技巧而已&#xff0c;无异于&qu…

centos7 串口配置修改_linux 添加最大串口数量方法

重启之后就可以看到添加的串口了&#xff0c;配置后就可以正常使用了。常用的配置命令有&#xff1a;修改/etc/init.d/boot.local 文件&#xff0c;添加&#xff1a;setserial /dev/ttyS6 uart 16550a port 0x300 irq 7 baud_base 115200setserial /dev/ttyS7 uart 16550a port…

jsp 报错 Uncaught SyntaxError: Unexpected token ‘;‘

这个问题也许并非是jquery版本或是什么引入文件路径错误的问题 我这里出现这个问题是因为接口的一个数据没有正常返回,导致的报错.整个页面的组件和按钮全部失效,所以解决办法是检查接口