精华内容
下载资源
问答
  • 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>
    
    
    展开全文
  • 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'...

    方式一:

    1.安装clipboard:npm install clipboard

    2.src/utils/clipboard.js

     1 import Vue from 'vue'
     2 import Clipboard from 'clipboard'
     3 
     4 function clipboardSuccess() {
     5   console.log('success')
     6   Vue.prototype.$message({
     7     message: 'Copy successfully',
     8     type: 'success',
     9     duration: 1500
    10   })
    11 }
    12 
    13 function clipboardError() {
    14   console.log('error')
    15   Vue.prototype.$message({
    16     message: 'Copy failed',
    17     type: 'error'
    18   })
    19 }
    20 
    21 export default function handleClipboard(text, event) {
    22   const clipboard = new Clipboard(event.target, {
    23     text: () => text
    24   })
    25   clipboard.on('success', () => {
    26     clipboardSuccess()
    27     clipboard.off('error')
    28     clipboard.off('success')
    29     clipboard.destroy()
    30   })
    31   clipboard.on('error', () => {
    32     clipboardError()
    33     clipboard.off('error')
    34     clipboard.off('success')
    35     clipboard.destroy()
    36   })
    37   clipboard.onClick(event)
    38 }

    3.vue代码

     1 <template>
     2     <div class="app-container">
     3       <el-tabs>
     4        <el-tab-pane label="直接使用剪切板">
     5          <div class="el-tab-pane" >
     6            <el-input   v-model="inputData"    style='width:400px;'></el-input>
     7            <el-button    @click="handleCopy(inputData,$event)">复制</el-button>
     8          </div>
     9        </el-tab-pane>
    10       </el-tabs>
    11     </div>
    12 </template>
    13 <script>
    14   import clip from '@/utils/clipboard'
    15   export default {
    16         name: "index",
    17         data(){
    18           return {
    19             inputData:""
    20           }
    21         },
    22       methods:{
    23         handleCopy(text, event) {
    24           clip(text, event)
    25           console.log('clicp')
    26         }
    27       }
    28     }
    29 </script>
    30 
    31 <style scoped>
    32 
    33 </style>
    34 
    35 
    36 
    37 <el-tab-pane label="使用封装的剪切指令v-directive">
    38   <div class="el-tab-pane" >
    39     <el-input     style='width:400px;'></el-input>
    40     <el-button>复制</el-button>
    41   </div>
    42 </el-tab-pane>

    方式二:src/directive/clipboard/clipboard.js

                   src/directive/clipboard/index.js

                  npm install clipboard --save

              

     1 //index.js
     2 import Clipboard from './clipbloard'
     3 
     4 const install = function(Vue) {
     5   Vue.directive('Clipboard', Clipboard)
     6 }
     7 
     8 if (window.Vue) {
     9   window.clipboard = Clipboard
    10   Vue.use(install); // eslint-disable-line
    11 }
    12 
    13 Clipboard.install = install
    14 export default Clipboard
     1 //clipboard.js
     2 // Inspired by https://github.com/Inndy/vue-clipboard2
     3 const Clipboard = require('clipboard')
     4 if (!Clipboard) {
     5   throw new Error('you shold npm install `clipboard` --save at first ')
     6 }
     7 
     8 export default {
     9   bind(el, binding) {
    10     if (binding.arg === 'success') {
    11       el._v_clipboard_success = binding.value
    12     } else if (binding.arg === 'error') {
    13       el._v_clipboard_error = binding.value
    14     } else {
    15       const clipboard = new Clipboard(el, {
    16         text() { return binding.value },
    17         action() { return binding.arg === 'cut' ? 'cut' : 'copy' }
    18       })
    19       clipboard.on('success', e => {
    20         const callback = el._v_clipboard_success
    21         callback && callback(e) // eslint-disable-line
    22       })
    23       clipboard.on('error', e => {
    24         const callback = el._v_clipboard_error
    25         callback && callback(e) // eslint-disable-line
    26       })
    27       el._v_clipboard = clipboard
    28     }
    29   },
    30   update(el, binding) {
    31     if (binding.arg === 'success') {
    32       el._v_clipboard_success = binding.value
    33     } else if (binding.arg === 'error') {
    34       el._v_clipboard_error = binding.value
    35     } else {
    36       el._v_clipboard.text = function() { return binding.value }
    37       el._v_clipboard.action = function() { return binding.arg === 'cut' ? 'cut' : 'copy' }
    38     }
    39   },
    40   unbind(el, binding) {
    41     if (binding.arg === 'success') {
    42       delete el._v_clipboard_success
    43     } else if (binding.arg === 'error') {
    44       delete el._v_clipboard_error
    45     } else {
    46       el._v_clipboard.destroy()
    47       delete el._v_clipboard
    48     }
    49   }
    50 }
     1 view/clipboard/index.vue
     2 <template>
     3     <div class="app-container">
     4       <el-tabs>
     5        <el-tab-pane label="直接使用剪切板">
     6          <div class="el-tab-pane" >
     7            <el-input   v-model="inputData"    style='width:400px;'></el-input>
     8            <el-button    @click="handleCopy(inputData,$event)">复制</el-button>
     9          </div>
    10        </el-tab-pane>
    11         <el-tab-pane label="使用封装的剪切指令v-directive">
    12           <div class="el-tab-pane" >
    13             <el-input v-model="inputData" placeholder="Please input" style='width:400px;'></el-input>
    14             <el-button type="primary" icon="document" v-clipboard:copy='inputData' v-clipboard:success='clipboardSuccess'>copy</el-button>
    15           </div>
    16         </el-tab-pane>
    17       </el-tabs>
    18     </div>
    19 </template>
    20 <script>
    21   import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive
    22 
    23   export default {
    24         name: "index",
    25         data(){
    26           return {
    27             inputData:""
    28           }
    29         },
    30     directives: {
    31       clipboard
    32     },
    33       methods:{
    34         clipboardSuccess() {
    35           this.$message({
    36             message: 'Copy successfully',
    37             type: 'success',
    38             duration: 1500
    39           })
    40         }
    41       }
    42     }
    43 </script>
    44 
    45 <style scoped>
    46 
    47 </style>

     

    转载于:https://www.cnblogs.com/yangguoe/p/9405556.html

    展开全文
  • 结合 clipboard.js 实现复制粘贴功能 剪切功能参考官方文档,个人认为用不太上(有富文本编辑器的时候可能才用得上,也或许不需要自己实现) 想要知道怎么使用,优先参考官方文档(如何指定要复制的数据,如何复制...
  • vue 实现复制粘贴板功能需要依赖到clipboard.js 1、 首先需要安装依赖*出现错误的话,可以试试 cnpm npm install --save vue-clipboard2 2、 安装成功之后就可以开始使用了 对于vue-cli 在main.js里 ...
  • 下面小编就为大家分享一篇vue 实现复制内容到粘贴板clipboard的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 最近在项目中遇到点击按钮复制链接功能,将其总结如下: 安装\color{#ff8247}{安装}安装 npm install vue-clipboard2 --save 引入\color{#ff8218}{引入}引入 在main.js中引入以下代码: import VueClipboard from '...
  • vue 实现图片复制粘贴

    2020-12-14 10:36:09
    参考原文链接 https://www.zhangxinxu.com/wordpress/2018/09/ajax-upload-image-from-clipboard/
  • 实现vue移动端的复制粘贴
  • 一、安装vue-clipboard2插件 npm install --save vue-clipboard2 二、main.js文件中引入 import VueClipboard from 'vue-clipboard2'; Vue.use(VueClipboard) 三、页面中配合button使用 <template> <el-...
  • Vue实现复制excel表格内容粘贴至网页

    千次阅读 2020-06-22 11:37:26
    Vue实现复制excel表格内容粘贴至网页 有一个项目要求复制excel表格内容粘贴至网页表格,并且自动生成格式(合并单元格等) (别问为什么不直接上传excel表格,用户不喜欢。。。) 最后决定的做法是根据页面生成一个...
  • vue-clipboard2 实现复制粘贴 1.先下载vue-clipboard2 cnpm install vue-clipboard2 --save-dev 2.在main.js引入配置 // 复制到粘贴板插件 import VueClipboard from 'vue-clipboard2' VueClipboard.config....

空空如也

空空如也

1 2 3 4 5 ... 13
收藏数 255
精华内容 102
关键字:

vue实现复制粘贴

vue 订阅