首页 > 其他分享 >vue 使用剪切板功能功能vue-clipboard2

vue 使用剪切板功能功能vue-clipboard2

时间:2023-07-21 20:45:18浏览次数:34  
标签:function 功能 vue clipboard2 VueClipboard 剪切板

vue-clipboard2介绍

vue-clipboard2是前端能够调用剪切板的一个插件。具体的描述官网上也有具体的说明,
npm地址https://www.npmjs.com/package/vue-clipboard2
github地址https://github.com/Inndy/vue-clipboard2

1.安装

npm install --save vue-clipboard2

2.在main.js中引入

import VueClipboard from 'vue-clipboard2' //复制粘贴功能
VueClipboard.config.autoSetContainer = true
Vue.use(VueClipboard)

3.页面使用

  <p>{{showtags}}</p>   //展示拷贝的内容
  <el-button
            type="primary"
            v-clipboard:copy="showtags"      //这里showtags为拷贝内容  按钮点击拷贝
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
          >复制</el-button>
或者
  <p      v-clipboard:copy="showtags"      //这里showtags为拷贝内容  这里是直接点击内容拷贝
            v-clipboard:success="onCopy"
            v-clipboard:error="onError" >{{showtags}}</p>

方法:
    onCopy: function(e) {
      console.log("复制成功");
    },
    one rror: function(e) {
      console.log("复制失败");
    },

标签:function,功能,vue,clipboard2,VueClipboard,剪切板
From: https://www.cnblogs.com/andy0816/p/17572365.html

相关文章

  • vue使用echarts图表,有一个组件:v-charts
    介绍在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表。是vue的charts的......
  • vuex中的state更新了,但是页面不更新
    问题:我有两个页面,都是用了同一个变量,我在A页面更改了变量,然后我切到B页面,B页面上的变量没有刷新 原因:是因为我这两个页面的路由在配置的时候都是用了keep-alive,所以导致在两个keep-alive之间的页面切换时,页面不会主动刷新,只会展示第一次加载的内容router.config.js 解......
  • vue3如何正确设置 Tailwind CSS
    1.创建vue3项目npminitvue@latest需要配置的选择YES 2.切换到项目newProject目录下 npminstall下载依赖包 3.安装tailwind及其依赖项(PostCSS和自动前缀)npminstall-Dtailwindcss@latestpostcss@latestautoprefixer@latest4.创建tailwind.config.js文件......
  • vue3+ts利用draggable组件实现拖拽
    界面展示实现步骤安装组件(vue3引入的包为vuedraggable@next,vue2为vuedraggable)npmi-Svuedraggable@next引入并使用组件<template><!--此页面template中没有可刷新页面的数据变化,拖拽会不起作用,所以加个activeInfo来使界面刷新-->{{activeInf......
  • 关于项目开发中遇到的难点问题-vue项目中页面需要在浏览器中打开新窗口,但是当关闭新窗
    vue项目中页面需要在浏览器中打开新窗口,但是当关闭新窗口时候,sessionStorage中数据丢失问题。问题描述:项目中A页面有table列表,在列表上方有“导入文件”按钮,点击按钮后需在浏览器新窗口中打开B页面,在B页面进行选择文件上传xlsx数据经过一系列校验后,将最终确定的数据返回回显......
  • vue3组合式 API_为 computed() 标注类型
    computed() 会自动从其计算函数的返回值上推导出类型<template><h3>{{doubleCount}}</h3></template><scriptsetuplang="ts">import{ref,computed}from"vue"constcount=ref<number>(100)//推导得到的类型:ComputedRef&l......
  • vue contenteditable编辑模式下,样式不生效
    换行后生成div,设置的样式没有生效 ***原因style标签上设置了scoped解决办法1、去掉style的scoped属性2、额外写一个style,不加scoped(vue支持多个style)<divclass="mainText-body"contenteditable="true"></div><stylelang="less"scoped>//删除......
  • vue3中组合式 API_为 reactive() 标注类型
    reactive() 也会隐式地从它的参数中推导类型<template><h3>{{book.title}}</h3><h3>{{book.author}}</h3></template><scriptsetuplang="ts">import{reactive}from"vue"constbook=reactive({title......
  • Vue3 响应式全局对象json 动态绑定界面三 (Div块样式 字符串叠加)
    效果 man.js  定义响应式全局对象 globalData//全局对象constglobalData=reactive({missedCallData:"",currentUserTel:"",})app.provide('globalData',globalData);在main.js的函数中改变missedCallData 的值从而改变界面列表//改变全局变量gl......
  • Vue3 响应式全局对象json 动态绑定界面四 (Div块样式 Json数据绑定)
    效果man.js  定义响应式全局对象 globalData//全局对象constglobalData=reactive({extTelTalkData:[{userExten:"1000",userName:"刘亦菲",callStatus:"通话"},{......