1. Use (deprecated)
import { Message } from 'ant-design-vue';
const vCopy = { //
/*
bind hook function, called during the first binding, you can initialize it here
el: the function dom object
value: The value passed to the instruction, that is, the value we want to copy
*/
bind(el, { value }) {
el.$value = value; // Use a global attribute to store the passed value, because this value will also be used in other hook functions = () => {
if (!el.$value) {
// When the value is empty, give a prompt. My prompt here is the prompt of ant-design-vue, you can do whatever you want ('No copy content');
return;
}
// Dynamically create textarea tags const textarea = ('textarea');
// Set the textarea to readonly to prevent the keyboard from being automatically evoked under iOS, and to move the textarea out of the visual area = 'readonly';
= 'absolute';
= '-9999px';
// Assign the value to copy to the value attribute of the textarea tag = el.$value;
// Insert textarea into body (textarea);
// Select the value and copy ();
// (0, );
const result = ('copy');
if (result) {
('Copy successfully');
}
(textarea);
};
// Binding click event is the so-called one-click copy ('click', );
},
// Triggered when the value passed in is updated componentUpdated(el, { value }) {
el.$value = value;
},
// When the command is unbinded with the element, remove the event binding unbind(el) {
('click', );
},
};
export default vCopy;<template>
<div>
<input v-model="text" placeholder="Enter what to copy" />
<button v-copy="text">Click to copy</button>
</div>
</template>
<script>
import vCopy from './directives';
export default {
data () {
return {
text: 'This is what to copy' // Default copy content };
},
directives: {
copy: vCopy
}
};
</script>- Custom directive v-copy binds to a button, and the bound content will be copied when the button is clicked.
- el.$value saves the content to be copied, and is copied to the clipboard via (‘copy’) on each click.
- The componentUpdated hook updates the copied content when the input box content changes.
execCommandIt is a method used to execute commands related to user operations, mainly used to perform clipboard operations (such as copy, cut, paste) or format operations (such as bold, italic, underlined) on documents. You can also use: "copy", "cut", "paste", "bold", "italic"
textareaLabel:
- Supports selection and copy operations: The content of the textarea tag can be selected natively by the browser and it can be copied to the clipboard. The copy operation depends on selected text, while the textarea and input elements are form elements in HTML that can easily select text content. Although input tags can also be used to copy text, input tags have some limitations compared to textarea, especially when dealing with longer text or multiple lines of text.
- The textarea tag supports the readonly property, which ensures that its contents are not modified before being copied. Setting textarea to readonly avoids igniting the virtual keyboard when clicking on a mobile device and avoids unnecessary user interference.
API
The Clipboard API is a modern web API for performing clipboard operations (such as copying and pasting) on web pages. Unlike , the Clipboard API provides a more modern asynchronous interface and supports performing these operations on HTTPS pages for security.
The Clipboard API method returns a Promise, which means you can use the then and catch methods to handle success and failure situations.
Implement the function of one-click pasting:
Use the () method to read text from the clipboard:
let vCopy = {
bind (el, { value }) {
el.$value = value;
= async () => {
if (!el.$value) {
('Nothing to copy');
return;
}
try {
// Copy directly using the Clipboard API await (el.$value);
('Copy successfully');
} catch (err) {
('Copy failed', err);
}
};
// Listen to click events ('click', );
},
componentUpdated (el, { value }) {
el.$value = value;
},
unbind (el) {
('click', );
}
};
export default vCopy;<template>
<div>
<input v-model="text" placeholder="Enter what to copy" />
<button v-copy="text">Click to copy</button>
</div>
</template>
<script>
import vCopy from './directives';
export default {
data () {
return {
text: 'This is what to copy' // Default copy content };
},
directives: {
copy: vCopy
}
};
</script>navigator is a property of the window object that provides information about the user's browser and some specific functions.
Main functions:
- Provides information about the user agent (browser) and operating system.
- Provides information such as browser language settings and online status. Provides access to modern browser functions such as clipboard operations, geographic location, media devices, etc.
- Extension: Use the () method to write text to the clipboard:
<template>
<div>
<input v-model="text" placeholder="Enter what to copy" />
<button @click="copyToClipboard">Click to copy</button>
</div>
</template>
<script>
export default {
data() {
return {
text: 'The content to be copied by default'
};
},
methods: {
copyToClipboard() {
().then(() => {
('Text has been successfully copied to clipboard');
}).catch(err => {
('Copy failed', err);
});
}
}
};
</script>This is the end of this article about vue using custom instructions to achieve one-click copying. For more related vue one-click copying content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!