精华内容
下载资源
问答
  • vue实现复制粘贴

    2019-12-03 11:44:16
    1.安装clipboard:npm install clipboard ...import Vue from 'vue' import Clipboard from 'clipboard' function clipboardSuccess() { console.log('success') Vue.prototype.$message({ messa...

    1.安装clipboard:npm install clipboard
    2.src/utils/clipboard.js

    import Vue from 'vue'
    import Clipboard from 'clipboard'
    function clipboardSuccess() {
    console.log('success')
    Vue.prototype.$message({
    message: 'Copy successfully',
    type: 'success',
    duration: 1500
    })
    }
    
    function clipboardError() {
    console.log('error')
    Vue.prototype.$message({
    message: 'Copy failed',
    type: 'error'
    })
    }
    export default function handleClipboard(text, event) {
    const clipboard = new Clipboard(event.target, {
    text: () => text
    })
    clipboard.on('success', () => {
    clipboardSuccess()
    clipboard.off('error')
    clipboard.off('success')
    clipboard.destroy()
    })
    clipboard.on('error', () => {
    clipboardError()
    clipboard.off('error')
    clipboard.off('success')
    clipboard.destroy()
    })
    clipboard.onClick(event)
    }
    

    3.vue的代码

    <template>
    <div class="app-container">
    <el-tabs>
    <el-tab-pane label="直接使用剪切板">
    <div class="el-tab-pane" >
    <el-input v-model="inputData" style='width:400px;'></el-input>
    <el-button @click="handleCopy(inputData,$event)">复制</el-button>
    </div>
    </el-tab-pane>
    </el-tabs>
    </div>
    </template>
    
    <script>
    import clip from '@/utils/clipboard'
    export default {
    name: "index",
    data(){
    return {
    inputData:""
    }
    },
    methods:{
    handleCopy(text, event) {
    clip(text, event)
    console.log('clicp')
    }
    }
    }
    </script>
    
    展开全文
  • 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-clipboard2 cnpm i -S vue-clipboard2 main.js中引入 import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) ... console.log("这是已复制的文本,使用ctrl+v即可粘贴:", text);

    下载 vue-clipboard2

    cnpm i -S vue-clipboard2

    main.js中引入

    import VueClipboard from 'vue-clipboard2'
    Vue.use(VueClipboard)

    使用:

        async doCopy() {
          let { text } = await this.$copyText("这是待复制的文本");
          console.log("这是已复制的文本,使用ctrl+v即可粘贴:", text);
        },

    展开全文
  • 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)...

    1、安装 npm install clipboard --save
    2、引用 import Clipboard from ‘clipboard’
    3、使用方法一

    <el-button type="text" size="small" class="copyBtn" @click="copy($event)">复制</el-button>
    // methods
    copy(e) {
          const clipboard = new Clipboard(e.target, { text: () => '复制的内容' })
          clipboard.on('success', e => {
            this.$message({ type: 'success', message: '复制成功' })
            clipboard.destroy()         // 释放内存
          })
          clipboard.on('error', e => {
            this.$message({ type: 'waning', message: '该浏览器不支持自动复制' })
            clipboard.destroy()
          })
          clipboard.onClick(e)  // 事件绑定
        }
    
    

    4、使用方法二

    <template>
           <span>{{ code }}</span>
           <i
           id="tag-copy" <-- 作为选择器的标识使用用class也行 -->
           :data-clipboard-text="复制的内容"
           class="el-icon-document"   title="点击复制"
           @click="copy()"/>
    </template>
    // methods
    copy() {
          const clipboard = new Clipboard("#tag-copy")
          // 或者不绑定 const clipboard = new Clipboard("#tag-copy", () => '复制的内容')
          clipboard.on('success', e => {
            this.$message({ type: 'success', message: '复制成功' })
            clipboard.destroy() // 释放内存
          })
          clipboard.on('error', e => {
            this.$message({ type: 'waning', message: '该浏览器不支持自动复制' })
            clipboard.destroy()
          })
        }
    
    展开全文
  • 方式一: 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'...
  • 结合 clipboard.js 实现复制粘贴功能 剪切功能参考官方文档,个人认为用不太上(有富文本编辑器的时候可能才用得上,也或许不需要自己实现) 想要知道怎么使用,优先参考官方文档(如何指定要复制的数据,如何复制...
  • vue 实现复制粘贴板功能需要依赖到clipboard.js 1、 首先需要安装依赖*出现错误的话,可以试试 cnpm npm install --save vue-clipboard2 2、 安装成功之后就可以开始使用了 对于vue-cli 在main.js里 ...
  • vue 实现图片复制粘贴

    2020-12-14 10:36:09
    参考原文链接 https://www.zhangxinxu.com/wordpress/2018/09/ajax-upload-image-from-clipboard/
  • vue-clipboard2 实现复制粘贴 1.先下载vue-clipboard2 cnpm install vue-clipboard2 --save-dev 2.在main.js引入配置 // 复制到粘贴板插件 import VueClipboard from 'vue-clipboard2' VueClipboard.config....
  • vue实现复制粘贴功能

    千次阅读 2020-05-20 21:15:26
    最近在项目中遇到点击按钮复制链接功能,将其总结如下: 安装\color{#ff8247}{安装}安装 npm install vue-clipboard2 --save 引入\color{#ff8218}{引入}引入 在main.js中引入以下代码: import VueClipboard from '...
  • 一、安装vue-clipboard2插件 npm install --save vue-clipboard2 二、main.js文件中引入 import VueClipboard from 'vue-clipboard2'; Vue.use(VueClipboard) 三、页面中配合button使用 <template> <el-...
  • 下面小编就为大家分享一篇vue 实现复制内容到粘贴板clipboard的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • import VueClipboard from 'vue-clipboard2' //引入插件 Vue.use(VueClipboard) //安装插件 3、在需要使用复制功能的地方使用 如下 HTML部分 <!-- onCopy表示复制成功的回调 --> <span v-clipboard:copy=...

空空如也

空空如也

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

vue实现复制粘贴

vue 订阅