No.25 Vue-element-admin learn to use (twenty) CountTo count, BackToTop returns to the top
This is the 25th day of my participation in the August Genwen Challenge.More challenges in August
CountTo is a counting component written by the author, based on vue-count-to
It looks like nothing, but it is not completely useless, for example, in some activity pages, in order to cheat customers, display traffic of what, may be used, or take a look.
The official demo has some configuration items that are very clearly named, start value, end value, time, precision, delimiters, prefixes, suffixes, which are properties of the count component
Compute the return value of the property and display it on the page for the user to preview
I then wrote a bunch of styles, leaving the vue-count-to component behind.
The back to top component in @/components/BackToTop is mainly back-to-top, which receives a user-defined style, visible height, and only displays the back to top button when sliding to this height.
el-tooltip placement="top" content="tooltip" back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" / /el-tooltip Copy the code
The custom style looks like this
These parameters are received internally by the component and have a default style
Mounted Adds a scroll listener to the page to monitor the height of the scroll. BeforeDestroy this listener to avoid affecting other components
The most core method is the backToTop method, which uses isMoving judgment to avoid continuous clicking, calculates the corresponding distance, and scrolls over. The parameter of setInterval is the time spent scrolling over, which can be adjusted according to your own needs.
To be honest, I refuse to read the following method, hahaha, only to know that it is to achieve the effect of slowly sliding past, so when used directly copy.