This is the second day of my participation in Gwen Challenge

Note: the following is personal understanding, if there is wrong also hope to correct! General effect

Requirements:

  • Project multiple pages need to be used, click the button default selected text copy, the user only need to press CTRL + V paste

Considering that the technology stack is vUE, and that VUE also gives us the form of plug-in instructions, it's very easy to get started and write a V-copy instruction, so go ahead

Plug-in documentation learning

The document address

//template
<button v-copy:a="text"</button>//data
data(){
    return {
        text:'Copied content'}}//directive
Vue.directive('copys', {// called when the bound element is inserted into the parent node (the parent node is guaranteed to exist, but not necessarily inserted into the document)
    inserted (el) {
        // console.log(' parent dom',el)
    },
    // Only called once, when the directive is first bound to the element. This is where you can perform one-time initialization Settings.
    bind(el,binding){
        console.log('dom',el)
        console.log(binding)
        // binding:{
        // arg: "a" to the instruction parameter v-copy:a
        // def: {inserted: ƒ, bind: ƒ}
        // expression: command expression in the form of a string of "day"
        // modiFIERS: objects of the {} modifier
        // name: "copys" directive name
        // rawName: "V-copys :a
        // value:" copy content "// the binding value of the directive
        // }
    },
    // Called when the component's VNode is updated
    update(el,binding,vnode,oldVnode){},// call after the component's VNode and its child VNodes are all updated
    componentUpdated(el,binding,vnode,oldVnode){},// Only called once, when the instruction is unbound from the element
    unbind(el,binding,vnode,oldVnode,status){
        console.log(arguments)}})Copy the code

Actual combat v – copy

  • Create a copy. Js
export default { 
    bind(el, { value }) { 
        el.$value = value; 
        el.handler = (e) = > {
            // Prevent bubbling
            e.stopPropagation();
            // Create a prompt element
            let addelement = (text,color) = >{
                // Get the mouse position
                let scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
                let scrollY = document.documentElement.scrollTop || document.body.scrollTop;
                let x = e.pageX || e.clientX + scrollX;
                let y = e.pageY || e.clientY + scrollY;
                const $mes  = document.createElement('span');
                $mes.setAttribute('class'.'Copyspan');
                $mes.style = `position:fixed; left:${ x + 6 }px; top:${ y - 14}px; z-index:9999; font-size:12px; color:#343435; animation: Copyspan 800ms ease-in-out; color:${color}`;
                $mes.innerText = text;
                document.body.appendChild($mes);
                / / 500 ms after removed
                setTimeout(() = >{
                    document.body.removeChild($mes);
                }, 500);
            }
            if(! el.$value) { addelement('Copy successful'.'#f56c6c')
                return;
            }
            // Create copy element textarea
            const $textarea = document.createElement('textarea');
            $textarea.readOnly = 'readonly';
            $textarea.style = {
                position:'absolute'.left:'-9999px'
            }
            // Assign the contents of the copy
            $textarea.value = el.$value;
            document.body.appendChild($textarea);
            $textarea.select();
            const result = document.execCommand('Copy');
            if (result) {
                addelement('Copy successful'.'#67c23a')}document.body.removeChild($textarea);
        };
        el.addEventListener('click', el.handler);
    },
    // Listen for vNode changes and get value again
    componentUpdated(el, { value }) {
      el.$value = value;
    },
    // Remove the event
    unbind(el) {
      el.removeEventListener('click', el.handler); }};Copy the code
  • Main.js global injection
import copy from '@/directive/copy.js'
Vue.directive('copy',copy)
Copy the code

use

<div v-copy="text"</div>Copy the code

conclusion

It is easy to write down the whole, do the logic operation you want to do in vue hook, and have higher requirements for native JS