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

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

点击评分,下面的星星内容会自动变化
用iview框架制作一个商家的评分功能_第1张图片

评分组件详解

Rate组件结构

在官网中我们可以看到iview有一个Rate组件,调用组件代码即可使用评分功能
用iview框架制作一个商家的评分功能_第2张图片
结构也非常简单使用Rate 组件,然后用v-model来绑定组件选中之后的值。

Rate组件属性

除了使用Rate以外,我们可以看到上图中有show-text这么一个属性,也就是添加了这个属性之后图左边评分的时候会自动显示文字结果,如上图左边的3星。当然还有其他的属性如下:
用iview框架制作一个商家的评分功能_第3张图片

guiplan快捷使用Rate

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


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

Rate组件添加

我们只需要在软件中点击“iview组件”,然后点击“其他”这个组件分类,再点击“评分”,这样一个评分组件就添加进来,可以看到如下图
用iview框架制作一个商家的评分功能_第4张图片
除了上面的data数据,v-modal双向绑定以外,还可以自己创建method方法,以及v-show显示,v-for循环遍历绑定等,都可以在软件中可视化的制作交互

Rate属性添加

了解了Rate是如何快不需要敲代码就能自动插入到页面中之后,我们还要进行对Rate评分进行一些修改,当然大部分功能也是不需要敲代码的。
比如我要将评分的星星改为字母A
我们可以点击当前元素属性右边的编辑按钮
用iview框架制作一个商家的评分功能_第5张图片

可以看到下图左边有很多的属性
用iview框架制作一个商家的评分功能_第6张图片
而如果不用guiplan工具,我们就只能手写character = “A” 代码,而且还要担心这个单词会不会写错,还要去官网查有没有这个属性等诸多的繁琐操作,这里只需一键搞定。

视频演示

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

你可能感兴趣的:(前端,vue.js,html5,node.js,javascript)