Use the iView framework to create a business rating function

Click on the score and the stars below will automatically change

Details of scoring components

Rate component structure

From the official website, we can see that iView has a Rate component, and the scoring function can be used by calling the component codeThe structure is also very simple using the Rate component and then using the V-Model to bind the selected value of the component.

Rate Component Properties

In addition to using Rate, we can see that there is such an attribute as show-text in the figure above, which means that after adding this attribute, text results will be automatically displayed when scoring on the left side of the figure, such as the 3 stars on the left side of the figure above. Of course, there are other attributes as follows:For example, the count attribute represents the total score. For example, here the count value is 10. As you can see in the figure below, the total score has changed to 10

Guiplan uses Rate quickly

After analyzing the scoring structure, we still need to write a lot of code in use, such as:

<template>
    <Rate clearable v-model="value1" /> clearable: true
    <Rate v-model="value2" /> clearable: false
</template>
<script>
    export default {
        data () {
            return {
                value1: 3,
                value2: 3
            }
        }
    }
</script>
Copy the code

We can see the HTML code <Rate clearable V-model =”value1″ /> and the data code value1:3 below. Is there any way to omit this code? We can use guiPlan to automatically generate this code to improve productivity. Not only does the software help us write the code, but it also allows visual layout, drag-and-drop, keyboard shortcuts, and so on to easily draw the page.

Rate component Adding

We just need to click “iView component” in the software, then click “Other” to classify the component, then click “Rating”, and a rating component will be added, as shown in the picture belowAs you can see in the style and interaction changes, the data code is automatically generated, the property code is automatically generated, even the V-Modal binding is generated. The scoring component was added automatically without us writing a single piece of code. Of course, some people feel that this automatically generated field name, I do not like. In the actual project application process, there are also requirements for naming. We can also batch change the field name by changing the rateData field to rateTest as shown belowThen click Replace, which will automatically replace all rateData fields used by the component with rateTest, including v-Modal bound fields. And then finally we hit Save to go directly to the Vue source code and here we can see that the Rate component has been added to the HTML codeThe rateTest field is also automatically created in the dataIn addition to the above data data, V-Modal two-way binding, you can also create your own method method, v-show display, V-for loop traversal binding, etc., which can be visualized in the software to make interaction

Rate attribute Adding

Now that we know how fast the Rate is inserted into the page automatically without any typing, we need to make some changes to the Rate rating, and of course most of the features are also non-typing. For example, if I want to change the rated star to the letter A, I can click on the edit button to the right of the current element property

You can see that there are many properties on the left side of the figure belowEnter the character A you want to replace in the text box below the custom character property, and then click Manual Insert to automatically insert the property. After clicking Save, you can see that the rating was A star icon, but now it is the letter AIf we didn’t use guiplan, we would have to write character = “A” code by hand and worry about whether the word is spelled incorrectly. We would have to check the official website for the property and so on.

Video presentation

Finally offer complete video tutorials for reference www.bilibili.com/video/BV1Ci…