This is the 25th day of my participation in the August Genwen Challenge.More challenges in August

CountTo

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.

BackToTop

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.