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

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

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

评分组件详解

Rate组件结构

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

结构也非常简单使用Rate 组件，然后用v-model来绑定组件选中之后的值。

Rate组件属性

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

guiplan快捷使用Rate

分析评分结构之后，我们在使用中还是要写很多的代码，如：

我们可以看到既要写html代码\,还要在下方写数据代码value1:3。
有什么办法省略这些代码呢？这时我们就可以用guiplan软件来自动生成这些代码，来提高工作效率。
软件不仅能帮我们去写这些代码，而且还支持可视化布局，拖拽，快捷键等就能轻松绘制好页面。

Rate组件添加

我们只需要在软件中点击“iview组件”，然后点击“其他”这个组件分类，再点击“评分”，这样一个评分组件就添加进来，可以看到如下图

除了上面的data数据，v-modal双向绑定以外，还可以自己创建method方法，以及v-show显示,v-for循环遍历绑定等，都可以在软件中可视化的制作交互

Rate属性添加

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

可以看到下图左边有很多的属性

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

视频演示

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