使用iview框架制作商户评分功能

使用iview框架制作商户评分功能点击评分，下方星星内容会自动更改评分组件Rate组件结构详解官网，我们可以看到iview有一个Rate组件，调用组件代码就可以使用评分功能。结构也很简单。使用Rate组件，然后在组件选中后使用v-model绑定值。除了使用Rate组件属性外，我们还可以看到上图中还有一个show-text属性，即添加该属性后，在图的左侧打分时会自动显示文本结果，比如上图左边的3颗星。当然还有其他的属性如下：比如属性count表示总分。比如这里的count值是10，我们可以看到下图，总分数变成了10，guiplan快速使用Rate分析评分结构后，我们还是用它写了很多代码，如：可以看到需要写html代码\，在value1:3下面写数据代码。有没有办法省略这些代码？这时候我们可以使用guiplan软件自动生成这些代码，提高工作效率。软件不仅可以帮助我们编写这些代码，还支持可视化布局、拖拽、快捷键等方式轻松绘制页面。添加评分组件，我们只需要在软件中点击“iview组件”，然后点击“其他”组件类别，再点击“评分”，这样就会添加一个评分组件，如图下图，我们可以在样式和交互上进行修改，可以看到，这里自动生成了数据代码和属性代码，连v-modal绑定都生成了。我们没有写一行代码，评分组件是自动添加的。当然也有人觉得这种自动生成的字段名，我不喜欢。在实际项目申请过程中，对命名也有要求。我们也可以批量修改字段名，如下图，将rateData字段改为rateTest，点击Replace。这里，组件使用的所有rateData字段都会自动替换为rateTest，包括v-modal绑定的字段。最后我们点击保存，直接查看Vue源码。在这里我们可以看到，在HTML代码中，Rate组件被添加到data数据中，并且自动创建了rateTest字段。除了上面的data数据和v-modal双向绑定，你还可以自己创建method方法，还有v-show展示，v-for循环遍历绑定等等，都可以在可视化中产生软件。添加交互式Rate属性。在了解了Rate可以多快自动插入页面而不需要敲代码之后，我们还需要对Ratescore做一些修改。当然，大多数功能不需要输入代码。比如我想把评分星改成字母A，我们可以点击当前元素属性右侧的编辑按钮，可以看到下图左侧有很多属性。在自定义字符属性下方的文本框中输入要替换的字符A，然后点击手动插入即可自动插入该属性。点击保存后，可以看到之前的评分是一个星标，现在是字母A。如果不使用guiplan工具，我们只能手写字符=“A”的代码，而我们还要担心会不会写错字。去官网查看是否有这个属性等很多繁琐的操作在这里一键搞定。视频演示最后奉上完整的视频教程，供参考https://www.bilibili.com/video...