精华内容
下载资源
问答
  • vue实现复制粘贴
    2022-05-26 11:53:31

    实现复制粘贴(兼容ios)

    方式一

    	let value = "我是被copy的内容"
        let oInput = document.createElement("input");
        oInput.value = value;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {//兼容ios
          if (!document.execCommand("Copy")) {
            oInput.setSelectionRange(0, oInput.value.length);
          }
        }
        document.execCommand("Copy"); // 执行浏览器复制命令
        document.body.removeChild(oInput);
        return new Promise((resolve,reject)=>{
            if (document.execCommand("Copy")) {
                resolve(value);
            }else{
                reject(value);
            }
        })
    
    
    

    方式二

    1、引入插件
    
    npm install --save vue-clipboard2
    
    2、在mian.js中引入
    
    import VueClipboard from 'vue-clipboard2' //引入插件
    Vue.use(VueClipboard) //安装插件
    
    3、在组件间中使用
    
      <div>
        <span
          v-clipboard:copy="message"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
        >
          复制
        </span>
      </div>
      
      methods: {
        onCopy: function (e) {
          console.log("复制成功!");
        },
        onError: function (e) {
          console.log("复制失败!");
        },
      },
    
    更多相关内容
  • Vue实现复制粘贴功能

    千次阅读 2022-06-14 10:36:16
    Vue实现复制粘贴功能 目录 一、需求说明 二、代码实现 1、安装 vue-clipboard2 依赖 2、在main.js文件中全局引入插件 3、案例 三、项目所用 : 实现选中并且复制成功后带有提示信息的效果 :...

    目录

    一、需求说明

    二、代码实现

    1、安装 vue-clipboard2 依赖

    2、在 main.js 文件中全局引入插件

    3、案例

    三、项目所用 :

    实现选中并且复制成功后带有提示信息的效果 :


    一、需求说明

    在项目中 点击按钮 复制 某行文本是很常见的 应用场景,

    在 Vue 项目中实现 复制功能 需要借助 vue-clipboard2 插件。

    二、代码实现

    1、安装 vue-clipboard2 依赖

    ( 出现错误的话,可以试试切换成淘宝镜像源

    npm config set registry https://registry.npm.taobao.org )

    npm install --save vue-clipboard2

    "vue-clipboard2": "^0.3.3",

    2、在 main.js 文件中全局引入插件

    示例代码如下:

    import Vue from 'vue'
    import VueClipBoard from 'vue-clipboard2'
    
    Vue.use(VueClipBoard)
    
    new Vue({
      render: h => h(App)
    }).$mount('#app')
    

    3、案例

    在组件中有两种方法可以实现复制功能。

    方法一 :

    使用 vue-clipboard2 提供的 指令

    直接将变量内容复制至剪切板,暂时没有找到处理数据后再复制的方式

    <template>
      <div class="yeluosen">
        <input type="text" v-model="message">
        <el-button 
          icon="el-icon-share" 
          size="mini" 
          style="font-size: 16px;padding: 4px 8px;" 
          title="共享" 
          v-clipboard:copy="scope.row.url" 
          v-clipboard:success="onCopy" 
          v-clipboard:error="onError" 
          @click="share(scope.row.url)"></el-button>
      </div>
    </template>

    复制时,通过 v-clipboard: copy 复制输入的内容 :

    // 复制成功 or 失败(提示信息!!!)
    onCopy: function (e) {
      console.log('复制成功!', e)
    },
    onError: function (e) {
      console.log('复制失败!', e)
    }

    方法二:
    使用 vue-clipboard2 全局绑定的 $copyText 事件方法

    复制动作使用的是 Vue 响应函数方式,这就为复制前控制数据提供了可能!

    // 点击事件
    share(val) {
      this.handleData(val)
      this.$copyText(this.message).then(function (e) {
        alert('Copied')
      }, function (e) {
        alert('Can not copy')
      })
    },
     
    // 数据处理
    handleData(val){
      this.message = this.message + ' ' + val
    }
    <template>
      <div>
        <el-button
          type="success"
          size="small"
          style="margin-left: 10px"
          @click="onCopy"
          >复制</el-button
        >
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          text: "这是一段复制的文本",
        };
      },
      methods: {
        onCopy() {
          this.$copyText(this.pathText).then(
    	      e=>{
    	        console.log('复制成功:', e);
    	      },
    	      e=>{
    	        console.log('复制失败:', e);
    	      }
          )
        }
      }
    };
    </script>

    三、项目所用 :

    实现选中并且复制成功后带有提示信息的效果 :

    <template>
      <div>
        <el-input ref="addressInput" v-model="address" :readonly="true">
          <template slot="prepend"> 反馈地址 </template>
        </el-input>
        <el-button @click="copyLink(address)">复制链接</el-button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          address: "https://www.baidu.com/", // 地址信息
        };
      },
      methods: {
        // 判断是否是 IE 浏览器
        isIE() {
          if (window.ActiveXObject || "ActiveXObject" in window) {
            return true;
          } else {
            return false;
          }
        },
        // 拷贝地址
        copyLink(url) {
          if (this.isIE()) {
            this.$copyText(url);
            this.$refs.addressInput.select(); // 实现选中效果
            this.$message.success("复制成功!");
          } else {
            this.$copyText(url)
              .then((res) => {
                this.$refs.addressInput.select(); // 实现选中效果
                this.$message.success("复制成功!");
              })
              .catch((err) => {
                this.$message.error("该浏览器不支持自动复制, 请手动复制");
              });
          }
        },
      },
    };
    </script>
    
    <style lang="scss" scoped></style>
    
    展开全文
  • vue 实现复制粘贴功能

    2020-04-01 15:16:44
    vue 实现复制粘贴功能 这里使用到的是vue-clipboards插件, 首先安装依赖 yarn add vue-clipboards -s 然后引入项目main.js文件中,注册使用 import VueClipboards from “vue-clipboards”; Vue.use(VueClipboards)...

    vue 实现复制粘贴功能

    这里使用到的是vue-clipboards插件,

    首先安装依赖 yarn add vue-clipboards -s

    然后引入项目main.js文件中,注册使用
    import VueClipboards from “vue-clipboards”;
    Vue.use(VueClipboards)

    就可以直接在页面上使用:

    <template>
    <div>
    	<span>{{copyText}}</span>
    	<button  v-clipboard="copyText"   @success="handleCopy" @error="handleCopyFail">复制</button>
    </div>
    </template>
    
    <script>
    	export default {
    	  name: "page",
    	  data() {
    	    return {
    	      copyText: "想要复制的文本"
    	    };
    	  },
    	  methods: {
    	  		// 复制成功回调
    	  	 handleCopy() {
    		    this.$toast("复制成功");  // ui组件使用的是vant
    		  }
    		  // 复制失败回调
    			handleCopyFail(){
    			    this.$toast("复制失败");
    			  }
    	  }
    	};
    </script>
    
    
    展开全文
  • vue实现复制粘贴板的功能 html: <div @click="copyCode" /> ts: const copyCode = () => { const copyUrl: any = document.createElement('textarea'); //创建一个textarea框获取需要复制的文本内容 ...

    vue实现复制到粘贴板的功能

    html:

    <div @click="copyCode" />
    

    ts:

    const copyCode = () => {
      const copyUrl: any = document.createElement('textarea'); //创建一个textarea框获取需要复制的文本内容
      copyUrl.value = props.code;
      const appDiv: any = document.getElementById('app');
      appDiv.appendChild(copyUrl);
      copyUrl.select();
      document.execCommand('Copy');
      copyUrl.remove();
      message.destroy();
      message.success('复制成功');
    };
    

    js:

    const copyCode = () => {
      const copyUrl = document.createElement('textarea'); //创建一个textarea框获取需要复制的文本内容
      copyUrl.value = props.code;
      const appDiv = document.getElementById('app');
      appDiv.appendChild(copyUrl);
      copyUrl.select();
      document.execCommand('Copy');
      copyUrl.remove();
      message.destroy();
      message.success('复制成功');
    };
    
    展开全文
  • vue 实现图片复制粘贴

    千次阅读 2020-12-14 10:36:09
    参考原文链接 https://www.zhangxinxu.com/wordpress/2018/09/ajax-upload-image-from-clipboard/
  • vue项目中实现复制粘贴功能
  • 结合 clipboard.js 实现复制粘贴功能 剪切功能参考官方文档,个人认为用不太上(有富文本编辑器的时候可能才用得上,也或许不需要自己实现) 想要知道怎么使用,优先参考官方文档(如何指定要复制的数据,如何复制...
  • 一、安装vue-clipboard2插件 npm install --save vue-clipboard2 二、main.js文件中引入 import VueClipboard from 'vue-clipboard2'; Vue.use(VueClipboard) 三、页面中配合button使用 <template> <el-...
  • vue实现复制功能

    千次阅读 2022-07-08 22:18:46
    Vue实现复制功能,横向展开同样的方法也可用来给所需字段加标签。
  • 下面小编就为大家分享一篇vue 实现复制内容到粘贴板clipboard的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 下载 vue-clipboard2 cnpm i -S vue-clipboard2 main.js中引入 import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) ... console.log("这是已复制的文本,使用ctrl+v即可粘贴:", text);
  • 输入框获取粘贴内容
  • 主要介绍了VUE 实现复制内容到剪贴板功能,本文通过两种方法,给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • 1、安装 npm install clipboard --save 2、引用 import Clipboard from ‘clipboard’ 3、使用方法一 <el-button type="text" size="small" class="copyBtn" @click...复制</el-button> // methods copy(e)...
  • vue / js 实现复制粘贴功能

    千次阅读 2020-02-10 23:56:17
    vue vue 可使用vue-clipboard 插件 cnpm i vue-clipboard2-S 安装插件 在main.js 中引入 importVueClipboardfrom'...success 回调,复制成功,即可粘贴 按照如图使用即可 二 js 使用 js 选择要复制的 do...
  • 在项目中,需要开发一个复制邀请码的功能,也就是点击复制按钮就将邀请码复制粘贴板,直接粘贴即可。 使用到的是 vue-clipboard2 插件,简单又好用 首先,需要先安装这个插件 npm install --save vue-clipboard2...
  • 说明想要实现从excel表格复制内容之后,在vue页面上粘贴。有两个情况(1)无论从哪一列点击开始粘贴,都是从点击的列开始粘贴。效果如上图1(2)点击哪一列开始粘贴,从此列开始粘贴,如果点击的列不是可以粘贴的列...
  • 下面给大家介绍Vue中使用clipboard实现复制功能,具体内容如下所示: 首先现在Vue中引入clipboard npm install clipboard --save 在需要使用的组件中import 引入clipboard import Clipboard from 'clipboard'; ...
  • 方式一: 1.安装clipboard:npm install clipboard 2.src/utils/clipboard... 1 import Vue from 'vue' 2 import Clipboard from 'clipboard' 3 4 function clipboardSuccess() { 5 console.log('success'...
  • vue点击复制粘贴功能;vue复制功能
  • vue 复制粘贴

    千次阅读 2022-03-24 14:24:40
    在项目中,需要开发一个复制邀请码的功能,也就是点击复制按钮就将邀请码复制粘贴板,直接粘贴即可。 使用到的是 vue-clipboard2 插件,简单又好用 首先,需要先安装这个插件 npm install --save vue-...
  • vue上传图片+粘贴图片两种方式切换

    千次阅读 2022-02-25 16:22:22
    vue上传图片+粘贴图片两种方式切换
  • 小白单纯记录一下工作中遇到的需求:在vue中如何实现复制功能 (注: 依赖第三方插件 clipboard) 一. 安装插件 第一种直接npm安装: npm install clipboard --save  第二种: [removed][removed](下载地址:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,810
精华内容 2,324
关键字:

vue实现复制粘贴