首页 > 其他分享 >vue实现点击按钮复制到剪切板功能

vue实现点击按钮复制到剪切板功能

时间:2024-01-26 17:24:29浏览次数:35  
标签:复制到 function vue Clipboard clipboard params 复制 剪切板

//安装clipboard.js
//npm install --save clipboard.js
<template>
   <div>{{ params}}</div>
   <el-button size="small" class="btn">复制</el-button>
</template>
<script>
import Clipboard from 'clipboard'

export default {
    data() {
        return {
            params: '测试复制',
        }
    },
    mounted() {
        //复制
        let that = this;
        const clipboard = new Clipboard(".btn", {
            text: function () {
                return that.params
            },
        });
        clipboard.on("success", function (e) {
            that.$message.success("复制成功");
        });
        clipboard.on("error", function (e) {
            that.$message.error("复制失败");
        });
    }
}
</script>


标签:复制到,function,vue,Clipboard,clipboard,params,复制,剪切板
From: https://www.cnblogs.com/LiZiheng/p/17989810

相关文章

  • 基于Java+Vue开发的企业Ehr数智化人力管理系统源码+配套文档(提升人力资源管理效率的利
    写在前面:随着企业规模的不断扩大和人力资源管理的日益复杂,传统的人力资源管理方式已经无法满足现代企业的需求。为了提高管理效率、优化资源配置、降低人力成本,越来越多的企业开始引入eHR人力资源管理系统。本文将重点介绍eHR系统在招聘管理、人事管理、考勤管理、绩效管理、社保......
  • vue3 解决导航栏和header之间的空白
    vue3解决导航栏和header之间的空白现象如下图所示,导航栏和header之间有白色空隙 解决components\CommonAside.vue修改样式,添加如下代码</style>.el-menu{height:100vh;border-right:none;h3{color:#fff;text-align:center;......
  • Vue2.0新手教程:如何轻松实现数字输入框指令?
    前言前端项目中,输入框是常见的,数字输入框更是常见,我们也许用惯了UI框架或是第三方提供的数字输入框,其实我们内心也想拥有自己的一个数字输入框指令,进可以攻(灵活使用),退可以守(灵活扩展),一切尽在掌握之中,不尽于被动。需求最近用到了数字输入框,需求需要满足:设置输入的小数位数设置是......
  • vue 一个页面切到另一个页面,再切回来的时候,滚动条的位置不变(只处理当前页面)
    1、使用 beforeRouteLeave 来记录路由跳转之前滚动条的位置beforeRouteLeave(to,from,next):离开路由之前执行的函数,可用于页面的反向传值,页面跳转;beforeRouteLeave(to,from,next){console.log('beforeRouteLeave.................')this.scroll=document.......
  • vue中动态添加style样式的几种写法总结
    项目中可能会需要动态添加style行内样式,但是在长期维护的项目里面,尽量要避免使用。注意:1、凡是有-的style属性名都要变成驼峰式,比如font-size要变成fontSize。2、除了绑定值,其他的属性名的值要用引号括起来,比如backgroundColor:'#00a2ff'而不是backgroundColor:#00a2ff。......
  • vue echarts hooks 封装
    vue中echartshooks的封装,监听主体的变化,监听窗口大小的变化。监听元素大小的变化hooksimportechartsfrom'@/echart/themeInit'import{debounce}from'@/utils/dehounce'import{useAppStore}from'@/pinia'constuseEchartHooks=(id,groupId)=>{......
  • 使用命令行方式搭建uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv
    使用命令行方式搭建uni-app+Vue3+Typescript+Pinia+Vite+TailwindCSS+uv-ui开发脚手架项目代码以上传至码云,项目地址:gitee.com/breezefaith…目录一、前言近日心血来潮想做一个开源项目,目标是做一款可以适配多端、功能完备的模板工程,包含后台管理系统和前台......
  • vue的几个小分享
    1.VNode钩子在每个组件或html标签上,我们可以使用一些特殊的(文档没写的)钩子作为事件监听器。这些钩子有:onVnodeBeforeMountonVnodeMountedonVnodeBeforeUpdateonVnodeUpdatedonVnodeBeforeUnmountonVnodeUnmounted我主要是在组件上使用onVnodeMounted,当需要......
  • vue实现将word转换为HTML页面,并实现类似word的目录导航和关键字搜索跳转
    <template>  <divclass="content">    <divclass="header">      <divclass="title">        XXXXXX      </div>      <divclass="search">   ......
  • Vue 3高级响应式数据探秘:原理、用法详解与实战示例!
     在Vue3中,数据的变化通过响应式系统来实现,该系统基于ES6的Proxy对象。Proxy对象允许拦截并自定义操作,因此Vue可以通过代理对象来实现对数据的监听和触发相应的操作。以下是Vue3中监测数据改变的原理、使用方法和步骤的详细描述,以及一个实例代码:原理:Vue3的响应式系统基于P......