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