精华内容
下载资源
问答
  • vue复制链接到剪贴

    2021-05-13 17:24:50
    复制链接到剪贴 <el-table-column label="操作" fixed="right" > <template #default="{ row }"> <el-button @click="messageConfirm(row)" type="text" size="small" :disabled="row.status...

    复制链接到剪贴板

         <el-table-column
           label="操作"
              fixed="right"
            >
              <template #default="{ row }">
                <el-button @click="messageConfirm(row)" type="text" size="small" :disabled="row.status === '未通知' || row.status === '未填写'">信息确认</el-button>
                <el-button type="text" size="small" @click="exportNewcomerInfo(row.id)">下载</el-button>
                <el-button type="text" size="small" @click="copyUrl(row)">复制链接</el-button>
              </template>
            </el-table-column>
    
        copyUrl (data) {
          const inputTag = document.createElement('input');
          document.body.appendChild(inputTag);
          inputTag.setAttribute('value', data.url);
          inputTag.select();
          if (document.execCommand('copy')) {
            document.execCommand('copy');
            this.$message({
              type: 'success',
              message: 'URL已复制到剪切板',
            });
          }
          document.body.removeChild(inputTag);
        },
    
    展开全文
  • 主要介绍了VUE 实现复制内容剪贴功能,本文通过两种方法,给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • vue 复制内容到剪切板

    千次阅读 2018-10-07 10:28:36
    这是对vue 复制内容到剪切板的应用的细节具体化。为初学者提供更简易的理解方式 是根据百度百科学习并修改得到的经验: https://jingyan.baidu.com/article/48a42057156888a9242504fd.html 1.安装vue-clipboard2...

    这是对vue 复制内容到剪切板的应用的细节具体化。为初学者提供更简易的理解方式

    是根据百度百科学习并修改得到的经验:

    https://jingyan.baidu.com/article/48a42057156888a9242504fd.html

    1.安装vue-clipboard2插件

    npm install --save vue-clipboard2 

    2.查看插件是否安装成功:

     

    在项目的package.json 文件中

    3.重启项目 cnpm run dev (或者npm run dev )

    4.将插件引入到页面中

    import Vue from 'vue'

    import VueClipboard from 'vue-clipboard2'

    Vue.use(VueClipboard);

    //VueClipboard.config.autoSetContainer = true(这一句不一定需要)

     

    5.用@click事件出发按钮

    npm install --save vue-clipboard2 

    onCopy: function () {

    let container = this.$refs.container

    this.$copyText("复制内容", container)

    Toast("复制成功");

    },

    6.复制成功

     

    ps: 之前我做的时候,总被一个东西迷惑:

    原以为只要在components 中引入插件即可,这是不可以的,否者this.$copyText("复制内容", container) 会报错。

    既然我犯了这样的问题,所以其他同学也可能碰到,所以写篇文章提醒一下

    只需要这样引入就可以了。

     

     

     

    展开全文
  • vue复制到剪切板

    2019-09-07 21:29:22
    VUE 中实现复制到剪切板,在电脑任何位置可复制功能 1、环境 vue 、 clipboard 2、使用步骤 1) 安装依赖包 npm install vue-clipboard2 --save 引入安装包 1、 脚手架搭建的用户 import Vue from 'vue' ...

    VUE 中实现复制到剪切板,在电脑任何位置可复制功能

    1、环境

    vue 、 clipboard
    

    2、使用步骤

    1) 安装依赖包

        npm  install vue-clipboard2  --save
    
    1. 引入安装包
    
    1、 脚手架搭建的用户
    import Vue from 'vue'
    
    import VueClipboard  from 'vue-clipboard2'
    
    Vue.use( VueClipboard )
    
    
    2、独立使用( 注意:vue-clipboard2  需要再vue.js后面引入 )
    
    <script src="vue.min.js"></script>
    
    <script src="vue-clipboard2.js"></script>
    
    1. 页面中使用
    1、 html  结构
    <div>
        <span :title="teamLink" class="invitLink pull-left ellipsis" v-text="teamLink" >
        </span>
        <el-button class="cpLink" type="primary" v-clipboard:error="onError"
         v-clipboard:copy="teamLink"  v-clipboard:success="onCopy">
         复制链接
         </el-button>
    </div>
    
    
    2、  JS  操作
    
     methods:{
         // 复制成功
        onCopy(e){
            this.$message({
                message:'复制成功!',
                type:'success'
            })
        },
        // 复制失败
        onError(e){
           this.$message({
                message:'复制失败!',
                type:'error'
            })
        },
     }
    

    3、实际项目中
    3.1 clipboard 插件引入
    clipboard 插件的引入.jpg

    3.2 clipboard方法的操作
    clipboardjs 方法的操作.jpg

    3.3 dom 结构中方法的绑定
    dom结构中方法的绑定.jpg

    展开全文
  • vue实现复制到剪切板 clipboard.js

    千次阅读 2018-04-01 22:25:52
    vue实现复制到剪切板 通过在网上查看比较,发现使用clipboard.js是比较理想的手段:1,不用flash,2,插件很小,压缩后只有3kb。 关于clipboard.js,官方文档请戳:https://clipboardjs.com。由于文档是英文的,...

    用vue实现复制到剪切板

    通过在网上查看比较,发现使用clipboard.js是比较理想的手段:1,不用flash,2,插件很小,压缩后只有3kb。

    关于clipboard.js,官方文档请戳:https://clipboardjs.com。由于文档是英文的,下面我会简单解释一下具体使用方法。其实目前已经有根据该插件封装好的vue插件了,由于项目中只有一个地方用到该功能,我就没有去考虑封装插件的情况。不过,就算不用封装插件,在vue中使用起来也是很简单,基本上只要按照官网文档的使用方法来就ok。如果有踩到坑的欢迎留言补充。

    一、下载:

    二、引入:

    *戳:https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers选择一个CDN资源或直接使用下载好的文件:

    <script src="dist/clipboard.min.js" ></script>

    三、使用:

    • 当需要复制的内容在另一个dom上,比如:
      <p>链接:<a>http://www.baidu.com </a><button>复制</button></p>
      通过点击button来复制前面的链接时,使用方法如下:

      html部分:

      <!-- Target -->
      <p>链接:<a id="targetId">http://www.baidu.com </a>
      <!-- Trigger -->
      <button class="btn" data->clipboard-target="#targetId">复制</button>
      </p>

      js部分:

      通过传递dom的选择器或html等来初始化一个实例

      var clipboard = new ClipboardJS('.btn');

    • 当需要剪切操作时,只需要为button指定data-clipboard-action属性为cut即可。该属性默认值是copy

      html部分修改为:

      <!-- Target -->
      <textarea id="bar">Mussum ipsum cacilds...</textarea>
      <!-- Trigger -->
      <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
       Cut to clipboard
      </button>

      注意:cut属性只能用于input textarea这类target元素上

    • 当然,如果复制的内容就是触发元素本身呢?可以使用data-clipboard-text属性。

      html部分修改为:

      <!-- Trigger -->
      <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
      Copy to clipboard
      </button>

    四、事件

    为提高用户友好性,你可能需要给用户一些操作反馈或错误提示,或者捕获触发事件的dom对象,clipboard.js提供了‘success’ ‘error’事件。

    var clipboard = new ClipboardJS('.btn');
    clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
    e.clearSelection(); //该方法用于清除文本选中后的默认样式(一般是文本区域出现背景色)
    });
    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });

    五、高阶用法

    如果你不想像前面提到的一样修改现有的HTML,可以使用clipboard.js提供的API。只需要声明函数,处理逻辑然后返回需要的值。比如,

    • 如果你想动态的设置target html,你需要返回一个Node:

      new ClipboardJS('.btn', {
          target: function(trigger) {
              return trigger.nextElementSibling;
          }
      });
    • 如果你想动态设置被复制的内容,需要返回string:

      new ClipboardJS('.btn', {
          text: function(trigger) {
              return trigger.getAttribute('aria-label');
          }
      });
    • 如果你使用bootstrap 模态框,或者其他插件,当当前focus的元素改变时,需要手动指定当前container为focused的元素:

      new ClipboardJS('.btn', {
          container: document.getElementById('modal')
      });
    • 如果是在单页面应用里,为了更精确的处理dom在不同生命周期的逻辑,你需要销毁创造的事件和实例,使用下面方式:

      var clipboard = new ClipboardJS('.btn');
      clipboard.destroy();

    六、浏览器支持

    clipboard.js能被以下浏览器支持:
    * chrome 42+
    * IE edge 12+
    * Firefox 41+
    * IE 9+
    * Opera 29+
    * Safari 10+

    为了有更好的用户体验,在使用时,可以在success回调里提示‘复制/剪切成功’,在error回调里提示:‘请按Ctrl + C进行复制’,因为此时的内容已经被选中了。

    另外:你也可以通过执行ClipboardJS.isSupported()来判断浏览器是否支持clipboard.js,如果不支持,您可以将复制/剪切按钮从页面上隐藏。


    以上是对clipboard.js的使用介绍。基本就是对官方文档的翻译。我在项目里只用到了基础的用法,还没有尝试高阶用法。所以解释的可能不是很到位。欢迎有用到的同学一块交流学习。

    展开全文
  • 一、npm安装 npm installclipboard -- save 二、引入 import Clipboard from 'clipboard' 三、html &lt;li class="...复制名片链接&lt;/li&gt; 四、methods copy (dat...
  • 首先 使用npm安装依赖 npm install --save vue-clipboard2 ...//复制到剪切板 importVueClipboardfrom'vue-clipboard2' Vue.use(VueClipboard) 最后在项目文件中使用 <spantitle=...
  • 1.下载插件vue-clipboard2 npm install --save vue-clipboard2 2.main.js import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) 3.在vue文件中 <button @click="copy">分享</button> ...
  • vue中使用clipboard.js 时候发现一个问题,如果移动端不是input或者button,则复制不成功,使用步骤如下 引入clipboard.js npm install clipboard --save 在需要使用的组件中import import Clipboard from '...
  • // 复制内容到剪切板 copy_content () { let in_text = this.xxx(这里就是你要复制的内容) let oInput = document.createElement('input') oInput.value = in_text document.body.appendChild(oInput) oInput...
  • 一个小小的需求:table行内点击复制按钮,复制对应行的数据到剪切板,如图: 其他博主推荐有两种方式,亲测,只有这种是有效的且常用的,如果想看第一种方式,可以百度,很多相关文章。 操作步骤: 1. 安装插件 npm...
  • 1、在package.json添加依赖"dependencies":{"clipboard":"^2.0.0"}2、页面引入...3、给触发复制事件的按钮增加class,增加点击事件H函数实现:h('Button',{props:{type:'info',size:'small',icon:'ios-li...
  • Vue复制到剪贴

    千次阅读 2020-07-15 17:55:47
    有些业务需求需要点击按钮复制链接,本文就是记录该如何实现 应用中间件vue-clipboard2 2.实现方法 1)先下载vue-clipboard2 npm install vue-clipboard2 --save 2)引入安装包 ​​​​ 1、 脚手架搭建...
  • JS复制内容剪贴vue

    千次阅读 2018-12-31 15:54:56
    MDN地址,里面有参数和命令:... 链接:&lt;input size="mini" :value="item.downloadLink" :id="item.id"/&gt; &lt;el-button size="mini" type="prim
  • vue-clipboard2 文本复制或剪切到剪切板 1、安装与使用 npm install --save vue-clipboard2 import Vue from 'vue' import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) 2、使用代码 <button ...
  • 推荐一个插件clipboardjs 实现复制功能插件 使用步骤: 1:安装 yarn add clipboard // 或者 npm install clipboard --save 2:在需要使用复制功能的页面引入 import Clipboard from 'clipboard' 3,使用 <...
  • 在实际项目开发中,用到复制的地方还挺多,如一些链接过长不显示,点击一下载复制到剪切板或者是将复制的内容自动填到其他组件中,这个复制功能 有些是纯html页面,有些是vue项目,本文章来总结常用的三种复制方式。...
  • 砍价功能剪切板 最近公司在做电商中的砍价活动,如果在电商app中分享砍价商品信息微信好友,展示的是一个h5链接的形式。 下图分别是从 电商app分享砍价商品 分享微信好友 砍价需要下载的电商app页面 电商app ...
  • 项目中要实现分享功能,现在各种接口都关闭了,而且不同的浏览器要使用不同的代码,最后决定直接复制url,然后手动分享 Vue中使用了vue-clipboard2 github地址:https://github.com/Inndy/vue-clipboard2 例子: ...
  • VUE 复制内容至剪切板(两种使用方法) 复制内容至剪切板使用的是插件'vue-clipboard2',通过官方文档会发现共有两种使用方式。 第一种方式与大多数文章类似,只粘贴代码: <template> <div class=...
  • 常见方法 查了一下万能的Google,现在常见的方法主要是以下两种: 第三方库:clipboard.js 原生方法:document.execCommand() 分别来看看... }) 总结 以上就是关于JavaScript如何实现复制内容剪贴,附上几个链接
  • vue-cli实现复制内容剪贴
  • Vue.directive('copy', { bind: function(el, binding, vnode) { el.onclick = function(){ // 兼容v-copy="copyText"与v-copy="{content: copyText, tip: '复制成功后提示给用户的message'}" const ...
  • 大部分教程都是直接在app.js引入,挂载在vue上,但是并不推荐这种做法,毕竟可能只有一个页面会用到复制功能,如果所有插件都挂载vue上,vue实例将是臃肿的。在需要用到此功能的文件中引入clipboard import ...
  • ', duration: 5 }) } } }, params.row.result) ]) } // 点击复制到剪贴函数 copyToClipboard(content) { if (window.clipboardData) { window.clipboardData.setData('text', content); } else { ...
  • 点击某个按钮,将设置的目标内容(例如下载链接地址)复制到剪切板,可以在电脑上任何地方粘贴,不使用任何框架和使用`Flash`,以最小的代码实现该功能,并能兼容所有主流浏览器
  • js复制内容到剪切板

    千次阅读 2018-06-20 18:10:09
    常见方法 查了一下万能的Google,现在常见的方法主要是以下两种: 第三方库:clipboard.js ...以上就是关于JavaScript如何实现复制内容剪贴,附上几个链接: execCommand MDN execCommand兼容性 clipboard.js
  • 开发需求:手机端,点击按钮实现需复制的文本内容; 案例已做手机端浏览器兼容处理经测试,[QQ,微信,苹果,360,UC等],可正常使用; 案例代码如下: &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;!...
  • vue实现点击复制功能

    2021-01-21 17:27:57
    项目中需要复制链接,如下图: 第一步:安装依赖 npm install --save v-clipboard 第二步: 在mian.js(全局)引入并注册组件 import Clipboard from 'v-clipboard' Vue.use(Clipboard) 第三步:具体使用 <a @...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 487
精华内容 194
关键字:

vue复制链接到剪切板

vue 订阅