Standing on the shoulders of giants, improve productivity, today look at the common custom instructions and what they solve the problem and the realization of the idea behind a simple introduction

1. V-hotkey: handles keyboard bindinggithub

Can you learn how to export instructions

2. V-click-outside: Checks whether to Click on other elements instead of the element itselfgithub

The iframe case is also handled

3. V-Clipboard : To handle copy-paste, create textarea dynamically and set cssText implementation to use contentEditable = True and createRange to manually set cursor selection compatible with Mobile’s select using Textarea on PC sidegithub

4. V-scrollto: handles element scrolling to the specified position,github

The utility functions encapsulate the events simply:

  on(element, events, handler, opts = { passive: false }) {
    if(! (eventsinstanceof Array)) {
      events = [events]
    }
    for (let i = 0; i < events.length; i++) {
      element.addEventListener(
        events[i],
        handler,
        supportsPassive ? opts : false)}},off(element, events, handler) {
    if(! (eventsinstanceof Array)) {
      events = [events]
    }
    for (let i = 0; i < events.length; i++) {
      element.removeEventListener(events[i], handler)
    }
  }
Copy the code

Core is to realize the ScrollTo method, which can be worthy of scrutiny Distinguish between horizontal and vertical direction, the dynamic calculation of top left and use Windows. RequestAnimationFrame realization of animation, Improve rendering performance why-IS-requestAnimationFrame -better-than-setinterval-or-setTimeout Use offset = options.hasOwnProperty(‘offset’)? Options. Offset: defaults. Offset to judge whether there is any attribute, of course you can also use the let offset = (options && options. The offset) | | defalut. Offset

Vue-lazyload 7.2kstar is worth a closer look

Render (h) Use of the render function

  • Use of es6 classes
  • Lazy functions use the closure technique
  • Check whether IntersectionObserver and getBoundingClientRect are in the screen, and the former performs better
  • The use of Vue. NextTick
  • The implementation idea of once is to call once and remove once, to call once and remove off
  • Js Use of CustomEvent

6. V-tooltip: Every application needs a Tooltipgithub

  • It is worth taking a closer look at how the tooltip is automatically adjusted to the screen when it is not on the screen
  • Internally implements a Popover Vue component slot-style binding event handling for use of computed Watch and other basic VUE apis using third party components, how does the component register ResizeObserver
  • Using_the_aria-hidden_attribute
  • The tabIndex global attribute indicates whether its element can be focused and if/where it participates in sequential keyboard navigation (usually using the Tab key, hence the name).

7. V-scrolllock handles the situation that the contents inside the open frame can Scroll, but the external body prevents scrolling, based onbody-scroll-lock

  • Developed using TS SCSS
  • Use rollup to process JS
  • Use of transition for vue animation

8. V-money formats the Money unit display scenegithub

9. Vue-infinite-scroll To load more scenes of ElemeFE works

  • ShouldTrigger = viewportBottom + distance >= elementBottom; It is implemented and throttle is throttle, but I personally feel that IntersectionObserver will have better performance, and I don’t need to calculate the offsetHeight by myself

10. Vue-clampy instruction to implement text beyond the specified value truncated and tail add… According to

  • Based on clampy. Js implementation

11. Vue-ripple-directive Element Click to animate itgithub

  • CSS takes the parent container out of the document flow
  • Js dynamically get element click position, dynamically create element, add
  • The use of CSS Transition allows smooth changes in CSS property values
  • The demo uses a BULma CSS framework where you can learn the CSS architecture

12. Vue-focus Automatic Focus is used to optimize the user experiencegithub

The amount of code is also very small, their own implementation is very simple

import Vue from 'vue';

export var version = '2.1.0';

var compatible = (/ ^ 2 \. /).test(Vue.version);
if(! compatible) { Vue.util.warn('VueFocus ' + version + ' only supports Vue 2.x, and does not support Vue ' + Vue.version);
}

export var focus = {
  inserted: function(el, binding) {
    if (binding.value) el.focus();
    else el.blur();
  },

  componentUpdated: function(el, binding) {
    if (binding.modifiers.lazy) {
      if (Boolean(binding.value) === Boolean(binding.oldValue)) {
        return; }}if (binding.value) el.focus();
    elseel.blur(); }};export var mixin = {
  directives: {
    focus: focus,
  },
};
Copy the code

13. V-blur toggle CSS style filter effect with the commandgithub

The core code is to set the incoming styles to the elements and implement them as written by the API of the Vue directive

el.style.opacity = bindingValue.isBlurred ? opacity : 1
el.style.filter = bindingValue.isBlurred ? filter : 'none'
el.style.transition = transition
el.style.pointerEvents = bindingValue.isBlurred ? 'none' : 'auto';
el.style.userSelect = bindingValue.isBlurred ? 'none' : 'auto' ;
Copy the code

14. Vue-dummy: Use lorem ipsum text or add a placeholder image of a certain size somewhere in itgithub