精华内容
参与话题
问答
  • Vue 点击复制粘贴文本

    千次阅读 2019-08-05 10:40:02
    select() 方法只对 input和 textarea有效 <span class="courier"> 快递单号:<input type="text" v-model="danhao" id="danhao"> <...span class="sp1" @click="copy">... 复制单号 </sp...

    https://www.cnblogs.com/sherlock-Ace/p/10803961.html

    https://blog.csdn.net/weixin_42398560/article/details/90766534?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

    通过使用Vue-clipboard2实现

    npm install --save vue-clipboard2
     
    import Vue from 'vue'
    import VueClipboard from 'vue-clipboard2'
     
    Vue.use(VueClipboard)
    <div id="app"></div>
     
    <template id="t">
        <div class="container">
        <input type="text" v-model="message">
        <button type="button" @click="doCopy">Copy!</button>
        </div>
      </template>
     
      <script>
      new Vue({
        el: '#app',
        template: '#t',
        data: function () {
          return {
            message: 'Copy These Text',
            copytext:'' 
          }
        },
        methods: {
          doCopy: function () {
            //复制多个值:把所有想要复制的值 给一个新值
            let copytext = this.copytext + " " + this.ip;
            this.$copyText( copytext ).then(function (e) {
              alert('Copied')
              console.log(e)
            }, function (e) {
              alert('Can not copy')
              console.log(e)
            })
          }
        }
      })
      </script>

    select() 方法只对 input和 textarea有效 

    <span class="courier">
         快递单号:<input type="text" v-model="danhao" id="danhao">
    </span>
    <span class="sp1" @click="copy">
          复制单号
    </span>
    methods:{
            copy() {
             // var number = document.getElementById("danhao").value;//获取需要复制的值(innerHTML)
                 document.getElementById("danhao").select(); // 选择对象
                 document.execCommand("Copy"); // 执行浏览器复制命令
                 alert('复制成功')
                }
        },
    
    // 点击复制
    copy (wechatId) {
    	document.getElementById(wechatId).select() // 选择对象
    	document.execCommand('Copy') // 执行浏览器复制命令
    	console.log('复制成功')
    }

     

    展开全文
  • vue点击按钮复制内容

    千次阅读 2019-05-15 10:48:00
    <button @click="copyUrl">复制url</button>   //js copyUrl() { const input = document.createElement('input') document.body.appendChild(input) input.setA...
    <button @click="copyUrl">复制url</button>   
    

      

    //js
        copyUrl() {
          const input = document.createElement('input')
          document.body.appendChild(input)
          input.setAttribute('value',"这里可以写变量或者要复制的字符串内容")
          input.select()
          if (document.execCommand('copy')) {
            document.execCommand('copy')
          }
          document.body.removeChild(input)
    

      

    转载于:https://www.cnblogs.com/z-y-zone/p/10868062.html

    展开全文
  • vue点击复制功能

    2020-04-28 16:37:10
    复制功能,选中复制或者点击复制(不使用插件的情况下) 1、选中复制 这个比点击复制简单点 <template> <div> <el-buttontype="primary"plain@click="copy()">复制</el-button> <...

    复制功能,选中复制或者点击复制(不使用插件的情况下)

    1、选中复制

    这个比点击复制简单点

     

    <template>

      <div>

        <el-button type="primary" plain @click="copy()">复制</el-button>

      </div>

    </template>

     

    <script>

    export default {

      data(){

        return{

          

        }

      },

      methods:{

        copy(){

            document.execCommand("Copy"); // 执行浏览器复制命令

            this.$message({

              message: '复制成功',

              type: 'success'

            });

          },

      }

    }

    </script>

     

    2、点击复制

      (我是在vue+element UI中实现点击表格中的按钮复制表格中的数据;)

    <template>

      <div>

        <el-table

          :data="tableData"

          style="width: 100%">

          <el-table-column

            prop="name"

            label="姓名"

            width="180">

          </el-table-column>

          <el-table-column label="操作">

            <template slot-scope="scope">

              <el-button

                size="mini"

                @click="handleCopy(scope.$index, scope.row)">复制</el-button>

            </template>

          </el-table-column>

        </el-table>

      </div>

    </template>

     

    <script>

    export default {

      data(){

        return{

          tableData:{

            name:'小明'

          },

          copyData:null,

        }

      },

      methods:{

        handleCopy(index,row){

          this.copyData = row.name

          this.copy(this.copyData)

        },

        copy(data){

            let url = data;

            let oInput = document.createElement('input');

            oInput.value = url;

            document.body.appendChild(oInput);

            oInput.select(); // 选择对象;

            console.log(oInput.value)

            document.execCommand("Copy"); // 执行浏览器复制命令

            this.$message({

              message: '复制成功',

              type: 'success'

            });

            oInput.remove()

          },

      }

    }

    </script>            

    展开全文
  • Vue实现点击按钮复制功能 因为之前做过一个项目,有网关标识和场景标识,都是32个长度的随机字符串,后期需要用到这两个标识,以前用户可以手动复制过去用,但是随着数据的增多,这两个标识可能太长会被隐藏掉一部分...

    Vue实现点击按钮复制功能

    因为之前做过一个项目,有网关标识和场景标识,都是32个长度的随机字符串,后期需要用到这两个标识,以前用户可以手动复制过去用,但是随着数据的增多,这两个标识可能太长会被隐藏掉一部分,用户就复制不了了,所以加一个按钮,可以让用户需要复制的时候,点击按钮,前端自动实现复制操作。复制操作是基于input输入框的,所以得事先生成一个输入框来存放需要复制的文本数据。

    copyText(){
       var input = document.createElement("input");   // js创建一个input输入框
       input.value = this.text;  // 将需要复制的文本赋值到创建的input输入框中
       document.body.appendChild(input);    // 将输入框暂时创建到实例里面
       input.select();   // 选中输入框中的内容
       document.execCommand("Copy");   // 执行复制操作
       document.body.removeChild(input); // 最后删除实例中临时创建的input输入框,完成复制操作
    },
    

    在这里插入图片描述

    展开全文
  • 效果图: 粘贴图: 源码: <div class="box_m form_conter"> <span class="box_p lader">社会信用代码:<...input type="text" value="form_tone" id="form_tone">...span class...
  • vue实现点击复制功能

    2020-04-13 17:47:44
    copy() { var _input = document.createElement("input"); // 直接构建input _input.value = $(".code").text(); // 设置内容 document.body.appendChild(_input); // 添加临时实例 _input.select();...
  • vue实现点击复制

    千次阅读 2019-01-10 11:48:55
    vue实现点击复制功能,借助Clipboard插件 1.npm i Clipboard -s 2.在main.js里引入并挂 import Clipboard from ‘clipboard’ // 复制 Vue.prototype.Clipboard=Clipboard 3. 在页面中使用 &lt;span class=...
  • VUE点击复制组件

    2019-10-24 11:08:29
    1.安装依赖 npm install --save v-clipboard 2.在main.js中引入 import Vue from 'vue' import Clipboard from 'v-clipboard' Vue.use(Clipboard) 3.Html <template> ...
  • Vue实现点击按钮复制文本内容

    千次阅读 2019-07-12 10:00:43
    点击复制功能主要通过 clipboard.js 来实现 在vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话,则复制不成功,使用步骤如下: 1、引入clipboard.js,方法如下: 第一种直接npm安装...
  • 1.下载clipboard.js npm install clipboard...Vue.prototype.clipboard = clipboard 3.代码编写 <a @click="copy" :data-clipboard-text="record.wenjuanLink" id="express_info_right">复制链接</a> &l
  • vue 点击复制文本内容

    2019-12-13 17:17:59
    copy(data) { let url = data; let oInput = document.createElement('input'); oInput.value = url; document.body.appendChild(oInput); oInput.select(); // 选择对象;... console.log(oInput.value) ...
  • 有时业务需求是需要点击按钮复制相关内容。如下图: 推荐一个插件clipboardjs 实现复制功能插件 使用步骤: 1:安装 yarn add clipboard // 或者 npm install clipboard --save 2:在需要使用复制功能的页面引入 ...
  • vue 点击复制链接功能

    千次阅读 2019-10-28 17:51:45
    代码 template里 <p class="inviteCode" id = "inviteCode" v-text="short_url"></p> <el-button v-if="short_url" class="copy" @click=...复制链接</el-button> 在methods里 ```javascrip...
  • vue 点击复制到粘贴板

    2020-05-28 22:59:17
    背景:业务开发中遇到,点击复制内容到粘贴板的需求,记录一下 效果: 关键代码: copyText() { const oInput = document.createElement('input') oInput.value = this.textarea document.body.appendChild...
  • 在实际项目开发中,用到复制的地方还挺多,如一些链接过长不显示,点击一下载复制到剪切板或者是将复制的内容自动填到其他组件中,这个复制功能 有些是纯html页面,有些是vue项目,本文章来总结常用的三种复制方式。
  • 经过测试,方法兼容谷歌和IE,提取成公共方法如下: export function copyText(e) { let text = document.getElementById(e); let selection = window.getSelection(); let range = document.createRange();...
  • 废话不多说,直接上步骤! STEP1: 安装clipboard.js ... // 这里的url是要复制的内容, class名与点击事件里创建 Clipboard 对象相关联 <div> <p @click="copyUrl" class="copy-btn" :data-clipbo
  • 引入clipboard.js npm install clipboard --save 工具方法的封装 import Clipboard from 'clipboard'; import { Notify } from 'vant';... message: '复制发票链接成功', }); }, clipboardError() {
  • 1.安装vue-clipboard2 npm install --save vue-clipboard2 2.引入 import Vue from 'vue' import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) 3.使用 在按钮中定义一个复制函数 <el-...
  • 前端实现点击复制到粘贴板
  • 安装插件 clipboard npm install clipboard --save 封装成指令 ...import Vue from "vue"; export default { bind: (el, binding = {}, vnode) => { const clipboard = new Clipboard(el, {
  • vue实现点击复制指定区域的文字,推荐使用Clipboard.js,Clipboard.js是一个轻量级的插件,它不依懒于Flash和多余的框架。 安装clipboard.js npm install clipboard --save 引入clipboard.js,封装点击复制的...
  • 这两天写项目的时候有一个点击按钮复制文本的需求,完成之后把过程记录一下 首先是搜索有没有相关的现成的lib 搜索得到这个clipboardjs 这个库的具体用法也都写在官方文档中了,下面看在vue中如何集成这个库完成需求...
  • vue点击复制添加多行

    千次阅读 2019-02-21 10:28:35
    介绍:如下图 点击添加时 会添加相同样式的代码 点击删除时 删除那一行的代码 效果图 如下:    源代码: &lt;template&gt; &lt;div&gt; &lt;div class="navigation"&...
  • vue使用element-ui项目中实现点击按钮复制文本内容到剪贴板 html代码: <el-button :disabled="!allData.getDataDicUsing.allowEdit" @click="copyTemplate(scope.$index, scope.row)" size="mini" type=...
  • 1 安装依赖包 npm install --save v-clipboard ...import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) 3 页面使用 <view class="buy_box_text" v-clipboard:copy="copytext" ...
  • vue点击实现一键复制文本内容 页面标签 Dom <input type="text" id="copyValERC20"/> 这里的data-clipboard-target="" 是点击后你所要复制哪个标签里内容的 可以是绑定的id或者class 我这里想要复制的是 id=...
  • 在需要用到的vue文件导入: import Clipboard from 'clipboard'; import { Toast } from 'vant'; //引入vant ui库的toast轻提示 <div class="id-item item"> <span>单号<...
  • vue点击复制粘贴功能 1.下载clipboard.js npm install clipboard --save 2.引入,可以在mian.js中全局引入也可以在单个vue中引入 import Clipboard from 'clipboard'; 3.使用,在template中,这里我用了vant...
  • vue框架实现点击复制文本功能 一、安装clipboard.js插件 npm install clipboard --save 二、在需要使用的页面引入clipboard.js import Clipboard from 'clipboard'; 三、定义添加复制的内容 :data-clipboard-text...

空空如也

1 2 3 4 5 ... 20
收藏数 14,338
精华内容 5,735
关键字:

vue点击复制

vue 订阅