Global call implementation of Vue2.x Picker on mobile terminal

What is the Picker component

Compared with the Select tag on the PC side, the selection box on the mobile side usually pops up at the bottom of the viewPort.

Problems with Picker components

• Picker usually uses fixed layout. However, when we write Picker components, we have encountered that the component cannot pop up at the bottom of the viewport, but pops up inside the component, which causes style confusion and does not conform to the aesthetics of the C-end. The reason for the above problem is because of [stack context]. The fixed layout is not based on the viewport as the base, but the current stacking context.
• If the Picker is placed under the root component, the data flow will be confused. Components that are nested too deeply cannot easily trigger the display and hiding of the Picker. It needs to be processed in combination with state management vuex or through transparent transmission of $listeners, which increases the mental burden of developers to a certain extent.

Solution

Using declarative programming to place the Picker in the Body can better avoid the above two problems. For example, the following method can be used to call the display and hide of the picker

 this.$picker(component options, {
 wrapper: {
  props: {},
  on: {}
 },
 props: {},
 on: {}
 })

Option Explanation

• wrapper: picker function programming parameters
• props: Option configuration for component options
• on: Time binding of component options

Solution

Directory Division

- Components
-BaseUsedComponents
- Picker
- Picker.vue
- index.js
- main.js

Describing the Picker container

Picker.vue file function:

• Draw the Picker container
• Use the built-in transition component combined with CSS3 animation to make animation transitions

The code is as follows:

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

Creating a Picker

Outline of ideas

• Define a Picker function, which needs to do the following:
  • Generate an instance of PickerPickerInstance
  • Set PickerInstance.show to true
  • Place the Picker container at the bottom of the body
• Picker component generation requires anti-shake measures and cannot be performed under continuous clicks
• Generate a vnode based on the props and on attributes of the passed component options and place it in the default slot
• Clicking the mask element will hide the Picker, so we need to define a hide method.
• The hide method needs to do the following problems
  • Set the show attribute under the instance to false
  • Delete the Picker container under the body
  • Set the instance to Null and call GC

Picker Function

• Call the create function to generate a Picker instance
• Determine whether the instance exists
• Preserve current component options and configuration
• Change the show property of the Picker component to pop up a pop-up window and insert it under the body

create

• Create an el as a container for the Picker and insert it under the body
• In the render function, Picker places the previously passed component options as the default slot inside, and acts as the root element as a child component of the current instance.
• Get the corresponding transition time in the mounted function as the trigger for the hide function later.

Why do we need to get the animation time in requestAnimationFrame instead of getting it directly in mounted?

The mounted function of the component is called after the initial rendering, and the Toast component triggers the enter function of the transition by setting showStatus (although the mounted function of the Toast component will be called before, there is no transition class on the toast dom at this time). At this time, the data.setter function is triggered, which distributes and updates the Watcher, causing all operations to be executed in nextTick (that is, microtask), so the calling order is as follows:

Toast component Mounted -> parent component Mounted (that is, the Mounted function we are in now. Note that because the transition in toast does not carry the appear attribute, the transition enter function will not be triggered, and thus the transition class will not be added) -> nextTick() -> Toast component update(v-show) -> transition(v-show triggers the enter function) -> toast dom adds the transition class name -> window.getComputedStyle(toast) to get toastDuration, which we can also get in nextTick. Since transition active is present throughout the animation process, and requestAnimationFrame belongs to the browser redraw (painter) hook function, it is executed later than the microtask, so we get it here.

show

• Gets an instance of Picker, which is the root element of the instance.
• Mark the Mounted attribute to indicate that it has been installed
• Monitor the show attribute and call the hide function when show is set to false
• Insert under the body

hide

• Reset the Mounted property to false
• Delete the teardown listening function defined in the show function to release memory
• Set the delayer as a hook function to delete the real DOM

Why use setTimeout to delete

There is a problem with using monitoring transitionend:

Vue itself listens to transitionend (or animationend) in the transition component child node
After the animation is completed, the transition class will be deleted, and the transition-property will disappear.
According to the documentation, the transition hook function will not be triggered after the transition-property disappears, and then it cannot be triggered
transitionend function, which may cause remove to fail to be called, leaving the previous ToastConainer

remove

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

updateChildrenComponent

After the Picker component is completed, it is found that the props in the component are not updated, so a function is written here to manually trigger the update of the component. The component vnode has 4 hook functions. Prepatch is called when updating. There are two values. The first is the last vnode, and the second is the changed vnode. Therefore, we prepatch the original vnode and Component in the PickerCommand function as the old vnode of the diff. Calling this function can update the component.

Conclusion

The Picker component is just an example, and more methods can be used to implement it. This is the end of this article about the global call implementation of Vue2.x Picker on mobile terminals. For more relevant Vue2.x Picker global call content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!