Premise:

Used to v-show V-if can also write v-own instructions

For example, V-copy or V-focus can implement one-click copy or one-click listening for control selection events

Use:

Custom instruction is divided into global instruction and local instruction, the difference is global or local effect, one is defined in the VUE instance, one is defined in the component inside, write under data.

Global directive:

    // Register a global custom directive 'V-focus'
    Vue.directive('focus', { 
        // When the bound element is inserted into the DOM...
        inserted: function (el) { 
        // Focus elements
             el.focus() 
        } })
Copy the code

Local instructions:

     data() {
         rerurn{
         
         }
     },
     directives: { 
          focus: { 
          // The definition of a directive
              inserted: function (el) { 
                  el.focus() 
              } 
          }
    }
Copy the code

Custom directives have five life cycles

Bind: Called only once, the first time a directive is bound to an element. This is where you can perform one-time initialization Settings

Inserted: Called when the bound element is inserted into the parent node

Update: Triggered when the component is updated

ComponentUpdate: Triggered when all parent and child components are updated

Unbind: call only once, when unbind

Parameters:

The sample

v-copy

Vue.directive("copy", {
  bind(el, { value }) {
    el.$value = value;
    el.handler = () = > {
      el.style.position = 'relative';
      if(! el.$value) {// When the value is empty, a hint is given
        alert('No copy content');
        return
      }
      // Create textarea tag dynamically
      const textarea = document.createElement('textarea');
      // Set this textarea to readonly to prevent iOS from automatically evoking the keyboard and remove the Textarea out of view
      textarea.readOnly = 'readonly';
      textarea.style.position = 'absolute';
      textarea.style.top = '0px';
      textarea.style.left = '-9999px';
      textarea.style.zIndex = '9999';
      // Assign the copy value to the textarea tag's value property
      textarea.value = el.$value
      // Insert textarea into el
      el.appendChild(textarea);
      // Compatible with IOS there is no select() method
      if (textarea.createTextRange) {
        textarea.select(); // Select the value and copy it
      } else {
        textarea.setSelectionRange(0, el.$value.length);
        textarea.focus();
      }
      const result = document.execCommand('Copy');
      if (result) alert('Copy successful');
      el.removeChild(textarea);
    }
    el.addEventListener('click', el.handler); // Bind the click event
  },
  // Triggered when the value passed in is updated
  componentUpdated(el, { value }) {
    el.$value = value;
  },
  // Remove event bindings when directives are unbound from elements
  unbind(el) {
    el.removeEventListener('click', el.handler); }});Copy the code

20210917 There will also be handwritten code, conceptual things, more or less can answer part of or related things, handwritten code is currently a short board, mainly the array object of the various new API combination application is not consistent