精华内容
下载资源
问答
  • vue复制链接功能

    2021-10-29 18:11:34
    </template> </el-table-column> 第四步 // 复制 copy() { let clipboard = new Clipboard(".copy_obj"); clipboard.on("success", (e) => { console.log(e); clipboard.destroy(); return this.$message.success(...

    第一步

    npm install clipboard --save
    

    第二步

    // 页面中引入
    import Clipboard from "clipboard";
    

    第三步

    <el-table-column label="邀请链接" align="center">
                  <template #default="scope">
                    <span :id="'copyBody' + scope.row.id">
                      {{
                        "https://wkzx.wang/invitation/" + scope.row.inviteCode
                      }}</span
                    >
                    <br />
                    <span
                      class="copy_obj"
                      @click="copy"
                      data-clipboard-action="copy"
                      :data-clipboard-target="'#copyBody' + scope.row.id"
                      >复制</span
                    >
                  </template>
                </el-table-column>
    

    第四步

    // 复制
        copy() {
          let clipboard = new Clipboard(".copy_obj");
          clipboard.on("success", (e) => {
            console.log(e);
            clipboard.destroy();
            return this.$message.success("复制成功");
          });
          clipboard.on("error", (e) => {
            console.log(e);
            // 不支持复制
            clipboard.destroy();
            return this.$message.error("该浏览器不支持复制");
          });
        },
    
    展开全文
  • vue复制自定义指令

    2021-08-16 17:48:07
    vue复制自定义指令工作任务需要一个复制 工作任务需要一个复制 新建copy.js export default { // name: 'copy', /* bind 钩子函数,第一次绑定时调用,可以在这里做初始化设置 el: 作用的 dom 对象 value: ...

    vue复制自定义指令

    工作任务需要一个复制

    1. 新建copy.js
    
    export default { //
      name: 'copy',
      /*
        bind 钩子函数,第一次绑定时调用,可以在这里做初始化设置
        el: 作用的 dom 对象
        value: 传给指令的值,也就是我们要 copy 的值
      */
      hooks: {
        // eslint-disable-next-line space-before-function-paren
        inserted(el, { value }) {
          el.$msgFn = value.msgFn || ''
          el.$value = value.text || value // 用一个全局属性来存传进来的值,因为这个值在别的钩子函数里还会用到
          el.handler = () => {
            if (!el.$value) {
              // 值为空的时候,给出提示
              el.$msgFn && el.$msgFn('无复制内容')
              return
            }
            // 动态创建 textarea 标签
            const textarea = document.createElement('textarea')
            // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘,同时将 textarea 移出可视区域
            textarea.readOnly = 'readonly'
            textarea.style.position = 'absolute'
            textarea.style.left = '-9999px'
            // 将要 copy 的值赋给 textarea 标签的 value 属性
            textarea.value = el.$value
            // 将 textarea 插入到 body 中
            document.body.appendChild(textarea)
            // 选中值并复制
            textarea.select()
            textarea.setSelectionRange(0, textarea.value.length)
            const result = document.execCommand('Copy')
            if (result) {
              el.$msgFn && el.$msgFn('复制成功')
            }
            document.body.removeChild(textarea)
          }
          // 绑定点击事件,就是所谓的一键 copy 啦
          el.addEventListener('click', el.handler)
        },
        // 当传进来的值更新的时候触发
        // eslint-disable-next-line space-before-function-paren
        componentUpdated(el, { value }) {
          el.$value = value.text || value
          el.$msgFn = value.msgFn || ''
        },
        // 指令与元素解绑的时候,移除事件绑定
        // eslint-disable-next-line space-before-function-paren
        unbind(el) {
          el.removeEventListener('click', el.handler)
        }
      }
    }
    
    
    1. vue中引入
     			  <a 
     			    class="tw-btn copyAccount"
                    v-copy="{
                      text: accountCode,
                      msgFn: message => { //复制成功提示,当前使用的是element
                        $message({ message })
                      }
                    }"
                  >
                    {{ $t('home.copyAccount') }}
                  </a>
    
    展开全文
  • vue复制浏览器URL

    2020-12-30 10:25:20
    复制链接 </li> //复制链接 copyUrl() { var oInput = document.createElement("input"); //创建隐形input oInput.value = window.location.href; // window.location.href 浏览器URL ..
    
     <li @click="copyUrl()">
    	 <img src="@/assets/link.png" />复制链接
     </li>
    
    //复制链接
        copyUrl() {
          var oInput = document.createElement("input"); //创建隐形input
          oInput.value = window.location.href; // window.location.href 浏览器URL
          document.body.appendChild(oInput);
          oInput.select();
          document.execCommand("Copy");
          oInput.remove();
          this.$Message.success("复制链接成功");
        }
    
    展开全文
  • vue复制图片到剪切板

    2021-03-18 17:52:47
    vue复制图片到剪切板 最开始使用clipboard2,本地和测试环境都能运行,到了生产环境就无法粘贴到微信。 后来搜索到可以将图片转换成blod直接复制到剪切板,代码如下 <img :src="codeUrl" width="200px" id=...

    vue复制图片到剪切板

    最开始使用clipboard2,本地和测试环境都能运行,到了生产环境就无法粘贴到微信。

    后来搜索到可以将图片转换成blod直接复制到剪切板,代码如下

    <img :src="codeUrl" width="200px" id="img_body">
    
    <el-button v-if="copyLink" type="text" @click="copyImg">复制二维码</el-button>
    
    async copyImg(e) {
      var _this = this
      const img = document.querySelector('#img_body')
      const setToClipboard =  blob => {
        const data = [new ClipboardItem({ [blob.type]: blob })]
        return navigator.clipboard.write(data)
      }
      try {
          const response = await fetch(img.src)
          const blob =  await response.blob()
         setToClipboard(blob)
          _this.$message({
              message: '复制成功',
              type: 'success'
          })
      } catch (error) {
          _this.$message({
              message: '复制失败',
              type: 'error'
          })
      }
    }

    注:需要https或者本地环境才可以获得剪切板权限

    展开全文
  • vue复制文本组件封装

    2021-03-22 15:00:33
    vue复制文本组件封装 Copy组件 <template> <div> <span>{{text}}</span> <i class="el-icon-document-copy" ref="copy" @click="copy"></i> </div> </template> ...
  • VUE 复制数据到剪切板

    2021-05-26 10:25:00
    记录昨天浏览器点击按钮复制数据的功能: 查项目的package.json 文件发现有 引入 vue-clipboard2,想着直接用就可以了。 "dependencies": { "vue-clipboard2": "^0.3.1", } 如果项目中没有引入的话,需要先自己...
  • 首先要安装:cnpm install clipboard...Vue.prototype.Clipboard=Clipboard; html: <input v-show="shsw" v-model="center2" type="password" /> <input v-show="shaw" v-model="center2" type="text" />
  • 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...
  • <p @paste="onPaste"></p> // 清除默认格式 onPaste(evt) { this.textInit(evt) }, textInit(e) { e.preventDefault();... var clp = (e.originalEvent || e).clipboardData;... if (clp === undefined...
  • // 删除临时实例 } } body中: <input v-model="axios" /> 复制</button> data中: data:{ return{ axios:"" } } methods中 methods: { copyShaneUrl(shareLink){ var input = document.createElement("input...
  • 参考:https://www.jb51.net/article/160136.htmhttps://blog.csdn.net/JackieDYH/article/details/115551105...安装npm install --save vue-clipboard2引入import Vue from 'vue' import Clipboard from 'vue-clipboar
  • 1、v-clipboard插件 2、不用插件,进入页面获取剪切板中的内容 ...import Vue from 'vue' import Clipboard from 'v-clipboard' Vue.use(Clipboard) 3.使用 <template> <button v-clipboard="value" v-c
  • vue复制文本方法

    2021-10-22 15:04:44
    // 选中input try { await document.execCommand('Copy') // 执行浏览器复制命令 console.log('复制成功') } catch { console.log('复制失败') } }, //使用插件 //安装 npm install --save v-clipboard //在main.js...
  • vue 复制剪贴功能

    2021-01-18 14:50:50
    zeroclipboard是走的flash插件,手机浏览器是不支持的,所以不得不舍弃之,用clipboard,clipboard不需要flash就可以完成复制剪切等功能,而且可以兼容pc,移动端 首先要安装:cnpm install clipboard --save
  • vue 复制功能封装

    2021-11-19 16:32:09
    import Vue from 'vue' import Clipboard from 'clipboard' function clipboardSuccess() { Vue.prototype.$message({ message: '复制成功', type: 'success', duration: 1500 }) } function clipboardError...
  • vue 复制 粘贴div标签内容 安装clipboard.js npm install clipboard 在vue页面引入clipboard.js import Clipboard from 'clipboard';//安装复制插件 html代码 <button class="btn" data-clipboard-...
  • uniapp H5 Vue 复制功能 方法封装 uniapp在H5端不支持剪切板,这里通过clipboard实现(vue中也可使用此封装函数) 第一步:安装 npm i clipboard --save 第二步:封装复制函数 第三步:在需要使用的页面使用 ...
  • vue 复制内容到粘贴板

    千次阅读 2020-12-20 10:33:00
    html如图:class="copy",用于下面的JS中获取当前复制按钮这个对象,data-clipboard-text是表示复制当前的属性,属性值我这里用的变量Code,大家注意一下,data-clipboard-text前面带上 " :"...
  • Vue复制粘贴必备插件

    2021-12-14 19:29:11
    vue-clipboard2 - npmA Vuejs2 & Vuejs3 binding for clipboard.jshttps://www.npmjs.com/package/vue-clipboard2
  • 页面编辑时复制对象,修改表单时,不影响列表数据 /** * 空校验 null或""都返回true */ public static isEmpty (obj: any) { if ((typeof obj === 'string')) { return !obj || obj.replace(/\s+/g, "") === "...
  • vue复制功能

    2021-06-07 20:04:51
    vue点击按钮有复制文本的功能setAttribute()appendChild() setAttribute() setAttribute() :增加一个指定名称和治的新属性,或者把一个现有属性设定为指定的值 elementNode.setAttribute(name,value) 说明: 1.name...
  • vue 复制文本到浏览器

    2021-06-14 23:23:38
    复制链接</button> copy() { let url = this.input;//是所需要复制的内容 let oInput = document.createElement('input') oInput.value = url document.body.appendChild(oInput) ...
  • Vue实现复制内容到剪贴板功能

    千次阅读 2021-07-08 13:26:24
    复制内容至剪切板使用的是插件vue-clipboard2通过官方文档会发现共有两种使用方式。 一、安装插件 npm install vue-clipboard2 --save 二、全局注入(main.js) import VueClipboard from 'vue-clipboard2' vue.use...
  • vue文本的复制

    2021-01-06 14:40:59
    在公司遇到一个功能,觉得有意思我就打算发给你们看看。... // 执行复制 document.body.removeChild(input); // 删除临时实例 这就是很基础的文本的复制。不能支持图片的复制。 我是菜鸡。各位大佬勿喷。。。
  • vue点击复制链接功能

    2021-10-14 22:47:48
    原理:创建input标签,将链接值赋值给input标签,调用浏览器复制方法 示例代码: <template> <div class="box"> <div class="title">复制链接并在地址栏输入可跳转</div> <p v-...
  • 扯皮内容直接跳转到->vue-clipboard2 是什么 冬天家里草莓下来发快递纯手工记账太慢了,本着学以致用的想法,帮家里写一个记账的系统。经过2周的周六周天,完成了,这个样子 ...一个vue插件 快速实现文本的复制 vue-
  • vue复制到剪切板

    2021-09-26 11:43:58
    VUE 中实现复制到剪切板,在电脑任何位置可复制功能 1、环境 vue 、 clipboard 2、使用步骤 1 安装依赖包 npm install vue-clipboard2 --save 2.引入安装包 1、 脚手架搭建的用户 import Vue from 'vue' import...
  • index) in ringTemplete" :key="index" class="article" > <el-card class="box-card"> <h1>{{item.name}}</h1> <p>{{item.detail}}</p> (item.detail)" :data-clipboard-text="link" size="mini">复制内容...
  • Vue实现点击按钮复制文本内容的例子点击复制功能主要通过 clipboard.js 来实现在vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话,则复制不成功,使用步骤如下:1、引入clipboard.js...
  • vue复制信息到剪切板

    2021-08-18 15:56:03
    1、安装vue-clipboard2 npm install vue-clipboard2 --save 2、main.js 引用 //引用 import VueClipboard from 'vue-clipboard2' Vue.use( VueClipboard ) 3、页面中使用 3.1方式一 <span class="copy-btn" ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 64,862
精华内容 25,944
关键字:

vue复制

vue 订阅