vue 复制剪切板功能

在没项目中经常遇到要求可以复制一东西便于用户去粘贴。

下面就说说两个简单粗暴的方法

第一种：利用document.execCommand() 这个方法执行浏览器复制领命

<template><div class="seller-box" @click="Copy('我要复制')"></dev>
</template>methods:{Copy(data){let url = data;let oInput = document.createElement('input');oInput.value = url;document.body.appendChild(oInput);oInput.select(); // 选择对象;document.execCommand("Copy"); // 执行浏览器复制命令this.$toast('复制成功');oInput.remove()}
}

第二种方法：利用第三方插件 vue-clipboard2

安装

npm install vue-clipboard2 --save

注入

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

使用

<template><div class="container"><input type="text" v-model="message"><button type="button" @click="doCopy('来呀！来呀')">Copy!</button></div>
</template>
<script>export default {data() {return {message: '快点复制我'}},methods: {dataProcessing (val) {this.message = this.message + ' ' + val},doCopy: function (val) {this.dataProcessing(val)this.$copyText(this.message).then(function (e) {alert('Copied')console.log(e)}, function (e) {alert('Can not copy')console.log(e)})}}}
</script>

喜欢博主的可以点赞关注一下

长得美的，长得帅的都关注了

现在就差你了

还不长按关注一下

vue 复制剪切板功能相关推荐

火狐和IE都支持的复制剪切板功能
function copyToClipboard(txt) { if(window.clipboardData) { window.clipboardData.clearData(); window. ...
HeyUI组件库12月更新日志：Clipboard复制剪切板，Avatar头像
时隔很久,HeyUI终于有了一些新的组件补充了这个组件都是来自于近期的一些开发思考,希望大家多多指点 HeyUI 对于不熟悉HeyUI组件库的同学,我在这里补充一下信息: HeyUI是一个基于Vue ...
html复制文字兼容手机,JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)...
新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了.写出了总结下使用的方法:clipboard 插件下载地址:https://github.com/zenorocha/clipb ...
html5 js 手机剪切板,JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)...
新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了.写出了总结下使用的方法:clipboard 插件下载地址:https://github.com/zenorocha/clipb ...
Android 复制到剪切板功能
Android 复制到剪切板功能-------------- 1.复制到剪切板会使用ClipboardManager,在SDK版本为11前后使用的包不一样.一个是android.text(已弃用),一 ...
html5 读取剪切板,Html5剪切板功能的实现
本篇文章主要介绍了Html5剪切板功能的实现代码,内容挺不错的,现在分享给大家,也给大家做个参考. 最近使用Vue开发Line(日韩的一款类似中国微信平台)的内嵌H5.里面的有一个需求就是将当前链接粘 ...
html5图片剪切板,Html5剪切板功能的实现方法
Html5剪切板功能的实现方法发布时间:2020-10-23 16:45:29 来源:亿速云阅读:68 作者:小新这篇文章主要介绍了Html5剪切板功能的实现方法,具有一定借鉴价值,需要的朋友可 ...
html5 设置剪切板,Html5剪切板功能的实现
本篇文章主要介绍了Html5剪切板功能的实现代码,内容挺不错的,现在分享给大家,也给大家做个参考. 最近使用Vue开发Line(日韩的一款类似中国微信平台)的内嵌H5.里面的有一个需求就是将当前链接粘 ...
android输入法剪切板历史记录,讯飞输入法剪切板功能知多少？
原标题:讯飞输入法剪切板功能知多少? 复制+粘贴"是日常操作,但批量复制时前次内容就被覆盖,粘贴很不方便:如果一次复制给多个朋友,依然需要来回操作很不省心:有时翻找上一次或者以前的聊天内容, ...

vue 复制剪切板功能

vue 复制剪切板功能相关推荐

最新文章

热门文章