SoFunction
Updated on 2025-04-04

How to use copy and paste function in vue or H5

Copy and paste in vue or H5

1. Use native methods, usually in browsers, so compatibility is not very good

I created the input directly using native methods. You can also directly add the input tag to the DOM and then get its value.

copyUrl(){
   let url = '/linfng023/article/details/101014133';
   let domInput = ('input');
    = url;
   (domInput);  // Add input node   (); // Select an object;   ("Copy"); // Execute the browser copy command   this.$toast({
     message: `Link copied successfully！`,
     duration: 2000
   });
   ()
},

2. How to use plugins,Use steps:

Installation, you can use npm to install (or cnpm)

npm install clipboard --save

Introduce, you can directly reference it (used globally), or you can reference it on the components you need to copy and paste (used locally)

import clipboard from 'clipboard';
//Register to the vue prototype = clipboard;

Then copy and paste

<a class="copyClassUrl" data-clipboard-action="copy" data-clipboard-text="/linfng023/article/details/101014133" @click="copyLink">Copy the link</a>
copyLink() {
    let clipboardUrl = new (".copyClassUrl");
    ('success', function () {
      _this.$toast({
        message: `Link copied successfully！`,
        duration: 2000
      });
    });
    ('error', function () {
      (clipboardUrl)
    });
},

Copy and paste function: H5 or vue or uniapp

1. The native browser copy method is generally used in the browser

Define a file separately. For reuse Copy and paste function

export default function h5Copy(content) {
  (content);
  if (!('copy')) {
    // Not supported    ({
        title:'Your current application environment does not support automatic copying of content...',
        icon:'none'
    })
    return false
  }
  
  let textarea = ("textarea")
   = content
   = "readOnly"
  (textarea)
  () // Select an object  (0, ) //The scope of copied content  let result = ("copy") // Execute the browser copy command  ()
  return result
 
}

Then use it in the file

<template>
	<view>
		<button type="primary" size="mini" @click="copy">Text copy</button>
	</view>
</template>
<script>
    import h5Copy from '@/utils/'
    
	export default {
		data() {
			return {
				
			};
		}, 
        methods:{
            copy(){
                // #ifdef H5
                let res = h5Copy('Pass in the content to be copied')
                if (res) {
                    ({
                        title:'Copy successfully',
                        icon:"success"
                    })
                	// = "weixin://";
                } else {
                	({
                	    title:'Copy failed',
                	    icon:"none"
                	})
                }
                // #endif   
                
               // #ifdef APP-PLUS
                ({
                    data: 'What to copy',
                    success: () => {
                        //Callback after successful copying do something here                        ({
                            title: 'Copy successfully'
                        })
                    },
                    fail: () => {
                        //Callback after copying failed do something here                        ({
                            title: 'Copy failed',
                            icon: "none"
                        })
                    }
                });
                // #endif
            }
        }
	}
</script>
<style lang="scss"></style>

If you use app and h5 in uniapp to implement the copy and paste function:

  • H5 can be implemented using the above method.
  • The app is availableCopy and paste API interface of uniapp official website

The above is personal experience. I hope you can give you a reference and I hope you can support me more.