Shulou(Shulou.com)06/02 Report--

This article mainly explains "vuejs how to achieve replication function", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "vuejs how to achieve replication function" bar!

Vuejs to achieve replication methods: 1, to create a copyComm.js file; 2, to create a directives.js file to register all the global instructions; 3, through "return {copyText:'...'}" to achieve replication.

This article operating environment: windows7 system, vue2.9.6 version, DELL G3 computer.

How does vuejs achieve replication?

Vue.js realizes one-button copy function

1, first create a copyComm.js file

Const vCopy = {/ / name whatever you like / * bind hook function is called when you bind for the first time, you can initialize el: the 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 when el.handler = () = > {if (! el.$value) {/ / value is empty. My hint here is to use the ant-design-vue prompt. Feel free to console.log ('no copied content'); return } / / dynamically create the textarea tag const textarea = document.createElement ('textarea'); / / set the textarea to readonly to prevent the keyboard from automatically arousing under iOS, while moving the textarea out of the visual area textarea.readOnly =' readonly'; textarea.style.position = 'absolute'; textarea.style.left ='-9999px' / / assign the value of copy to the value attribute of the textarea tag textarea.value = el.$value; / / insert textarea into the body document.body.appendChild (textarea); / / select the value and copy textarea.select (); textarea.setSelectionRange (0, textarea.value.length); const result = document.execCommand ('Copy') If (result) {console.log ('copied successfully');} document.body.removeChild (textarea);}; / bind click event, which is the so-called one-button copy el.addEventListener ('click', el.handler);}, / / triggers componentUpdated (el, {value}) {el.$value = value when the incoming value is updated }, / / remove event binding unbind (el) {el.removeEventListener ('click', el.handler);},}; export default vCopy when the instruction is unbound from the element

2. Create a directives.js file to register all global directives

Import copy from'. / copyComm.js';// custom instructions const directives = {copy,}; / / this way of writing can register instructions export default {install (Vue) {Object.keys (directives). ForEach ((key) = > {Vue.directive (key, directives [key]);});},}

3, register with main.js

Import Vue from 'vue';import Directives from'. / directives';Vue.use (Directives)

4. Use of the vue file

Copy export default {data () {return {content to copy'}}, methods: {init () {},}, watch: {}, props: [], components: {}, computed: {}, mounted () {_ this = this; _ this.init () Thank you for your reading, the above is the content of "how to achieve replication function in vuejs". After the study of this article, I believe you have a deeper understanding of how to achieve replication function in vuejs, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.