用iview框架制做一个商家的评分功能

用iview框架制做一个商家的评分功能

点击评分，下面的星星内容会自动变化

评分组件详解

Rate组件结构

在官网中咱们能够看到iview有一个Rate组件，调用组件代码便可使用评分功能

结构也很是简单使用Rate 组件，而后用v-model来绑定组件选中以后的值。

Rate组件属性

除了使用Rate之外，咱们能够看到上图中有show-text这么一个属性，也就是添加了这个属性以后图左边评分的时候会自动显示文字结果，如上图左边的3星。固然还有其余的属性以下：

如属性count则表示总分数，好比这里的count值为10，咱们能够看到以下图，评分的总数变为了10

guiplan快捷使用Rate

分析评分结构以后，咱们在使用中仍是要写不少的代码，如：

<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>

咱们能够看到既要写html代码\<Rate clearable v-model="value1" />,还要在下方写数据代码value1:3。
有什么办法省略这些代码呢？这时咱们就能够用guiplan软件来自动生成这些代码，来提升工做效率。
软件不只能帮咱们去写这些代码，并且还支持可视化布局，拖拽，快捷键等就能轻松绘制好页面。

Rate组件添加

咱们只须要在软件中点击“iview组件”，而后点击“其余”这个组件分类，再点击“评分”，这样一个评分组件就添加进来，能够看到以下图

咱们能够在样式与交互修改中看到，这里自动生成了数据代码，以及属性代码，就连v-modal绑定也所有生成好了。咱们几乎一个代码都没写，这个评分组件就自动添加进来了。


固然也有人以为这个自动生成的字段名，我不喜欢。实际项目运用过程当中，对命名也是有要求的。咱们还能够批量修改字段名，以下图将rateData字段改成rateTest

而后点击替换，这里会自动将该组件用到的rateData字段所有替换为rateTest,包括已v-modal绑定好的字段等。
最后咱们点击保存直接查看vue源代码
这里咱们能够看到html代码中，Rate组件添加进来了

data数据中也自动建立了rateTest字段

除了上面的data数据，v-modal双向绑定之外，还能够本身建立method方法，以及v-show显示,v-for循环遍历绑定等，均可以在软件中可视化的制做交互

Rate属性添加

了解了Rate是如何快不须要敲代码就能自动插入到页面中以后，咱们还要进行对Rate评分进行一些修改，固然大部分功能也是不须要敲代码的。
好比我要将评分的星星改成字母A
咱们能够点击当前元素属性右边的编辑按钮

能够看到下图左边有不少的属性

在自定义字符属性下方文本框里输入本身要替换的字符A,而后点击手动插入，便可自动将这个属性插入进来。点击保存以后能够看到以前的评分是星星图标，如今变为的字母A

而若是不用guiplan工具，咱们就只能手写character = “A” 代码，并且还要担忧这个单词会不会写错，还要去官网查有没有这个属性等诸多的繁琐操做，这里只需一键搞定。

视频演示

最后献上完整的视频教程供参考
https://www.bilibili.com/vide...