What is a Picker component

The Select TAB on the PC side and the Select box on the mobile side pop up at the bottom of the viewPort

Problems with the Picker component

  1. Picker usually has a fixed layout, but when we write the Picker component, we have encountered that the component cannot pop up at the bottom of the viewport, but pop up inside the component, resulting in style confusion, which does not conform to the aesthetics of the C-side. The reason for the above problem is [cascading context]. Fixed layout is not based on viewPort as baseboard, but the current cascading context

  2. If pickers are placed under the root component, data flow may be confused. Components nested too deep can’t easily trigger Picker display and hide, but need to combine state management VUEX for processing or through $listeners, which to some extent increase the mental burden of developers

solution

Declarative programming to place the Picker under the Body can better avoid the above two problems, for example, by calling the show and hide of the Picker in the following way

This. $picker (component option, {wrapper: {props: {}, on: {}}, props: {}, on: {}})Copy the code

Option to explain

Wrapper: Picker function programming parameter

Props: Option configuration of component options

On: Time binding of component options

The solution

Directory partition

 - Components
  - BaseUsedComponents
   - Picker
    - Picker.vue
    - index.js
 - main.js
Copy the code

Describe the Picker container

The picker. vue file is used for:

  1. Draw the Picker container
  2. Use the transition built-in component and CSS3 animation to do the animation transition

The code is as follows:

  <transition name="slideup">
    <div class="picker" v-if="show">
     <slot></slot>
     <div class="mask"></div>
    </div>
  </transition>
Copy the code

Create the Picker

Outline of thinking

  • Define a Picker function that does the following:

    1. PickerInstance generates an instance of Picker
    2. Set pickerinstance. show to true
    3. Place the Picker container at the bottom of the body
    4. Picker component generation requires the use of anti-shake measures, not under successive clicks

  • Generate a VNode from the props and ON properties of the passed component option and place it in the default slot

  • Clicking on the mask element hides the Picker, so you need to define a hide method

  • The hide method needs to do the following

    1. Set the show property of the instance to false
    2. Delete the inserted Picker container under body
    3. Set the instance to Null and call GC

Picker function

  1. Call the create function to generate the Picker instance
  2. Check whether the instance exists
  3. Keep the current component options and configuration
  4. Change the Picker component’s show property to pop up and place it under the body

create

  1. Create an EL as a container for the Picker and insert it under the body
  2. In the Render function, the Picker places the previously passed component options inside as default slots and acts as the root element itself as a child of the current instance
  3. Mounted getTransition () ¶

Why retrieve the animation time in requestAnimationFrame instead of Mounted?

The Toast component’s Mounted function is called after the initial rendering. The Toast component’s Transition Enter function is triggered by showStatus. In this case, the transition class does not exist on the Toast DOM. In this case, the data.setter function is triggered to issue updates to the Watcher, causing all operations to be executed in the nextTick(i.e., microtasks), so the call sequence is as follows:

Toast component Mounted -> The transition Enter function is not triggered because it does not carry the “appear” attribute. Update (V-show) -> Transition (V-show triggers the Enter function) -> Toast Dom added the transition class name -> window.getComputedStyle(toast) to get toastDuration, which we can also get in nextTick. RequestAnimationFrame is a Browser Redraw hook function that executes later than the microtask, so get it here

show

  1. Gets an instance of the Picker, which is the root element of the instance
  2. If the Mounted attribute is marked, it is Mounted
  3. Listen for the show property and call hide when show is set to false
  4. Insert it under the body

hide

  1. Reset the Mounted attribute to false
  2. Delete the teardown listener defined in show to free memory
  3. Set the delayer as the hook function for deleting the real DOM

Why use setTimeout to delete

There is a problem with using the listener transtionend:

Vue itself listens for transition End (or AnimationEnd) in the transition child node and deletes the Transition class when the animation is complete, so the transition-property will disappear. If the transition-property function disappears, the transition hook function will not be triggered, and thus the transitionEnd function will not be triggered. As a result, remove may not be called, leaving the previous ToastConainerCopy the code

remove

The remove function removes the real DOM, clears the delayer, sets the timer and Picker instances to null, and calls GC

updateChildrenComponent

Vnode has 4 hook functions. Prepatch is called as an update function and has two values. The first one is the previous vNode. The second is the changed vNode, so we preload the original vNode and Component in the PickerCommand function as the old Vnode of the diff, and call this function to update the Component

The complete code

Github.com/Gloomysunda…

conclusion

The Picker component is just one example, but there are many more ways to implement it, so feel free to leave a comment

Remaining abstract component addresses

Github.com/Gloomysunda…

Focus on

If you gain, please pay attention to me

Wechat id: IAmFineThanksMartin