在vue或H5中如何使用復(fù)制粘貼功能

更新時(shí)間：2022年09月09日 08:35:19 作者：linfeng_023

這篇文章主要介紹了在vue或H5中如何使用復(fù)制粘貼功能，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue或H5中使用復(fù)制粘貼

1.使用原生的方法,一般都是在瀏覽器上使用,所以兼容性不是很好

我是直接使用原生方法創(chuàng)建的input,你也可以直接在DOM上加input標(biāo)簽,然后去獲取它的value值.

copyUrl(){
? ?let url = 'https://blog.csdn.net/linfng023/article/details/101014133';
? ?let domInput = document.createElement('input');
? ?domInput.value = url;
? ?document.body.appendChild(domInput); ?// 添加input節(jié)點(diǎn)
? ?domInput.select(); // 選擇對象;
? ?document.execCommand("Copy"); // 執(zhí)行瀏覽器復(fù)制命令
? ?this.$toast({
? ? ?message: `鏈接復(fù)制成功！`,
? ? ?duration: 2000
? ?});
? ?domInput.remove()
},

2.使用插件的方式clipboard.js,使用步驟：

安裝clipboard.js,可以使用npm安裝(也可以cnpm)

npm install clipboard --save

引入clipboard.js,可以mian.js上直接引用(全局使用),也可以在你需要復(fù)制粘貼的組件上引用(局部使用)

import clipboard from 'clipboard';
//注冊到vue原型上
Vue.prototype.clipboard = clipboard;

然后復(fù)制粘貼

<a class="copyClassUrl" data-clipboard-action="copy" data-clipboard-text="https://blog.csdn.net/linfng023/article/details/101014133" @click="copyLink">復(fù)制鏈接</a>

copyLink() {
? ? let clipboardUrl = new this.clipboard(".copyClassUrl");
? ? clipboardUrl.on('success', function () {
? ? ? _this.$toast({
? ? ? ? message: `鏈接復(fù)制成功！`,
? ? ? ? duration: 2000
? ? ? });
? ? });
? ? clipboardUrl.on('error', function () {
? ? ? console.log(clipboardUrl)
? ? });
},

復(fù)制粘貼功能：H5或vue或uniapp

1.原生的瀏覽器復(fù)制方式，一般都是在瀏覽器上使用

單獨(dú)定義一個(gè)h5-copy.js文件。用于復(fù)用復(fù)制粘貼功能

h5-copy.js

export default function h5Copy(content) {
? console.log(content);
? if (!document.queryCommandSupported('copy')) {
? ? // 不支持
?? ?uni.showToast({
?? ??? ?title:'您當(dāng)前的應(yīng)用環(huán)境不支持自動復(fù)制內(nèi)容......',
?? ??? ?icon:'none'
?? ?})
? ? return false
? }
??
? let textarea = document.createElement("textarea")
? textarea.value = content
? textarea.readOnly = "readOnly"
? document.body.appendChild(textarea)
? textarea.select() // 選擇對象
? textarea.setSelectionRange(0, content.length) //復(fù)制的內(nèi)容的范圍?
? let result = document.execCommand("copy") // 執(zhí)行瀏覽器復(fù)制命令
? textarea.remove()
? return result
?
}

然后在文件中使用

<template>
	<view>
		<button type="primary" size="mini" @click="copy">文字復(fù)制</button>
	</view>
</template>
<script>
    import h5Copy from '@/utils/h5-copy.js'
    
	export default {
		data() {
			return {
				
			};
		}, 
        methods:{
            copy(){
                // #ifdef H5
                let res = h5Copy('傳入要復(fù)制的內(nèi)容')
                if (res) {
                    uni.showToast({
                        title:'復(fù)制成功',
                        icon:"success"
                    })
                	//window.location.href = "weixin://";
                } else {
                	uni.showToast({
                	    title:'復(fù)制失敗',
                	    icon:"none"
                	})
                }
                // #endif   
                
               // #ifdef APP-PLUS
                uni.setClipboardData({
                    data: '要復(fù)制的內(nèi)容',
                    success: () => {
                        //復(fù)制成功之后的回調(diào) do something here
                        uni.showToast({
                            title: '復(fù)制成功'
                        })
                    },
                    fail: () => {
                        //復(fù)制失敗之后的回調(diào) do something here
                        uni.showToast({
                            title: '復(fù)制失敗',
                            icon: "none"
                        })
                    }
                });
                // #endif
            }
        }
	}
</script>
<style lang="scss"></style>

如果要是在uniapp中使用app與h5 同時(shí)都實(shí)現(xiàn)復(fù)制粘貼功能的話：