This is the sixth day of my participation in the August More text Challenge. For details, see:August is more challenging

Preface ๐Ÿ‘‹

  • The user is god, standing in god’s point of view is to stand in the user’s point of view to view components.
  • I’ve used a lot of good onesUILibrary, with the time of joy, it is their turn to build component library when often go to reference others source code.
  • After reading the source code suddenly understand oh! Originally you can write like this, but the heart will inevitably have doubts how others come up with this solution? ๐Ÿคณ
  • This series of articles is mainly for students who do not understand or have doubts, so the relatively basic, let us stand in the user’s point of view to think about the structure, see if there is a change in another way to write code?

About the Rate component โญ

Why do we use Rate

As the user ๐Ÿ‘จ๐Ÿ’ผ

  • Before also said many times, users pay more attention to the visual impact mainly for convenience, think of giving a product or food score you will choose hand input90 100I still want something to click on, and I think most people will choose the second one.
  • Therefore, whether it is mobile terminal or PC terminal, more and more scoring buttons appear in front of our eyes, not only for beauty but also to meet our needsThe lazy psychology

As a component library consumer ๐Ÿ‘จ๐Ÿ’ป

  • We can see that there are many component librariesRate.RateTranslated into Chinese, it means ratio, grade.
  • When we put the component libraryRateWhat do we want the component to look like on our page?
    • Have bright color contrast
    • Can meet the basic selection requirements
    • The selected score can be shown as a percentage (e.g.Half a star Decimal point score)
    • Basic requirements can be customized to add functionality (e.g.Color attribute disable Add text or not ๏ผ‰
  • In one respect,RateThe appearance of the page also let us give the user in the production of the page in addition to select the drop-down box, switches have other options, in a word, to make the page more colorful and not so monotonous.

Building components โš’๏ธ

Next may use as little code as possible with element source code structure, with element Rate source food more delicious oh

Basic shelf ๐Ÿ”จ

  • I want to design something like thisRateIt’s not hard, we’re going to need five containers and let’s say it’s empty, it’s going to fill when we mouse over it, and it’s going to stay one last time when we mouse over it and all the boxes are filledThe container numberWhen we mouse away it will return to the state before the original click.
  • All told, it’s only4A point
    • Prepare an external five initial elements
    • Prepare a mouse touch event, a mouse click event, and a mouse away from the container event
    • The effects of various events are compounded by a hundred million points of transition
    • Bidirectional binding of values outside the component and values of child components

<template>
  <div class="zl-rate">
    <span
      v-for="(item, key) in max"
      :key="key"
      class="zl-rate__item"
    >
      <i class="zl-icon-aixin_shixin"></i>
    </span>
  </div>
</template>
Copy the code
  • The above iselementThe most simplerateStructure, you can see that the child component accepts onemaxTo control the number of ICONS and thenspanI’m just going to go through it. I passed it in v-modelvalue, how to use the specific I will explain in the following, here my personal components with personal love icon ~โค๏ธ specific style can seeElement style
  • Of course this is just a shelf and we need to add touch events and click events to fill it up

Setting events ๐Ÿงจ

  • Fill is just changing the color, so first we’re going to have two colors one for empty and one for fill
  • Because our hearts are created by traversal we can use them by moving the mouse over the elementcurrentValueTo record the elementitemwhencurrentValueGreater than or equal toitem“Then we have passed the heart so it should be the color of the fill, through this idea can dynamically switch our color style
  • In setting a mouseover event when we mouseover the heart to clear all back to the original state, here to clear when letcurrentValueBack to the outsidevalueValue, and thisvalueHow does the value come from? I believe those of you who have read my previous two articles are familiar with itv-modelThe syntax of sugar is automatically generated.
template ... <span v-for="(item, key) in max" :key="key" class="zl-rate__item" @mousemove="setCurrentValue(item, $event)" @mouseleave="resetCurrentValue" > <i class="zl-icon-aixin_shixin " :class="[{ 'hover': hoverIndex === item }]" :style="getIconStyle(item)" ></i> </span> ... script ... props:{ value: { type: Number, default: 0 }, max: { type: Number, default: 5 }, }, data(){ return{ currentValue:0, hoverIndex: -1, voidColor:'#C6D1DE', activeColor:'red' }; }, methods:{ setCurrentValue(value) { this.currentValue = value; this.hoverIndex = value; }, resetCurrentValue() {// clear the color this.currentValue = this.value; this.hoverIndex = -1; }, getIconStyle(item) { const voidColor = this.voidColor; Return {// Whether the value is less than the selected value, if yes, fill the color; otherwise, the default color: item <= this.currentValue? this.activeColor : voidColor }; }}...Copy the code

Bidirectional binding ๐ŸŽถ

  • Now our hearts can move and move with the mouse to control the style
  • But we can’t just change the color, we need to record the value of the click, so we need to use the outsidev-modelthe
  • In the parent component we usev-modelA value is passed in, andv-modelThe sugar will treat this value aspropsthevalueTo the child component, the child component just passes$emitTime changes externallyinputEvents will do.
ยทยทยท <span v-for="(item, key) in Max ":key="key" class="zl-rate__item" @mousemove="setCurrentValue(item, $event)" @mouseleave="resetCurrentValue" @click="selectValue(item)" > <i class="zl-icon-aixin_shixin " :class="[{ 'hover': ">< span style=" "style=" "style=" "style=" "style=" "style=" "style=" "style=" "style=" "style=" "style=" "style=" "style=" "> value); },...Copy the code
  • Here we add a mouse click event, so that when we click on the love we record the current value to the parent component, the parent component can do some logic based on the value, and the inner child component because the mouse moved out of the eventMake a child componentcurrentValueAutomatically received externalvalueLet the love be visually filled.
  • So that’s one of our simplestrateAnd we’re done.

For more information ๐Ÿงฎ

  • A simple shelf is set up and then we can customize our components.
  • For example, disable ah, add text ah, I believe you have been very familiar with, nothing more than through the slot to get throughpropsImplement dynamic style switch.
  • Of course,elementtheRateAlso do half magnitude operation, this component structure to share here, more implementation can refer toportalTo learn ~

Put it at the end ๐Ÿ‘‹

  • On the wholeRateComponent is relatively simple compared to other complex components, the difficulty is how to control half magnitude style operation.
  • As for the building of the component library, I am also slowly exploring. What I talk about is all my own sharing, so it may be relatively basic for the big guy, but I believe that my continuous output can help some students who have doubts.
  • If you think this article is helpful to your words might as well ๐Ÿ‰ attention + thumbs up + favorites + comments + forwarding ๐Ÿ‰ support yo ~~๐Ÿ˜›

Past highlights ๐ŸŒ…

How to write an elegant component example using Vuepress (above) ๐Ÿ‘ˆ

How to write an elegant component example using Vuepress (2) ๐Ÿ‘ˆ

“In God’s eyes” talk about the Element component structure -Switch

Talk about the Element component structure “from god’s perspective” -Radio