共计 1426 个字符，预计需要花费 4 分钟才能阅读完成。
用 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…
