Vue微型项目（七）—— 评分组件

最新推荐文章于 2024-09-04 17:18:19 发布
最新推荐文章于 2024-09-04 17:18:19 发布
阅读量479 收藏
点赞数 3
分类专栏： JS技术 node.js vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/claire_moon/article/details/100127886
版权
本文介绍如何在Vue项目中创建评分组件Rating.vue，包括从iconfont获取五角星图标，实现组件样式，并在父组件Prolist.vue中使用。通过这个过程，深入理解父子组件间的值传递。
摘要由CSDN通过智能技术生成

在前面的几篇文章中，我们实现的基本效果如下
在这里插入图片描述
接下来，我们添加项目中的其他组件，先来看看评分组件怎么添加吧

添加评分组件

一. 抽离评分组件Rating.vue

考虑到评分这个部分，在以后的项目文件中应该经常用到，所以我们在这里把评分组件抽离出来，为Rating.vue

1. iconfont库中找“五角星”

在这里插入图片描述
将新生成的代码，替换掉 /public/index.vue 中的 link 标签
在这里插入图片描述

2. 实现评分组件样式
  • 在 src/components/ 文件夹中添加 Rating.vue 组件
    在这里插入图片描述
  • 在 父
最低0.47元/天 解锁文章
Claire小柒
关注
专栏目录
vue 星星评分组件
知行
04-10 1049
评分插件在购物的应用中经常可以看得到，但是用着别人的总是没有自己写的顺手，正好趁着这段时间做一个移动端应用的时候写了一个基于VUE的评分组件，功能没有写全 主体结构： .scoreLayer(v-show="isShowScore" @click="hideScoreLayer($event)") .center-box .star-box.flex-between ul...
vue-star评星组件开发
xiaowei的博客
06-06 5622
star文件夹下建立Star.vue，及相关的图片信息。便于组件的就近维护 Star.vue：<template> <div class="star" :class="starSize"> <span v-for="(itemClass,key) in itemClasses" :class="itemClass" class="star-item"></span>
推荐项目：Vue.js Comment Grid —— 打造动态评论区的神器
gitblog_00394的博客
08-23 342
推荐项目：Vue.js Comment Grid —— 打造动态评论区的神器 vue-comment-grid???? Responsive Vue.js comment system plugin that built with CSS Grid and Firebase REST API + Authentication. https://tugayyaldiz.github.io/vue-com...
Vue 星级评分组件
weixin_43294092的博客
05-28 1641
Vue 星级评分组件 描述：其实很早就有想做一个星级评分的组价了，并且想写一些组件的代码库，就是在自己没事的时候造一些轮子，在工作的时候直接 Ctrl + C 和 Ctrl + V。别人还在苦苦加班写东西的时候，你已经开开心心下班，该干嘛干嘛去了...
vue自定义评分组件
m0_62835220的博客
06-08 555
element评分组件con没有合适，自己写了一个评分组件。
vue星级评分组件
weixin_30399821的博客
07-02 156
<template> <div class="Rating-gray"> <i v-for="(item,index) in itemClasses" :key="index" class="fa" :class="item"></i> </div> </template> <script> /...
vue组件化开发——动态组件
weixin_47450807的博客
02-10 1144
一、案例引入 我们在引入动态组件的时候，首先先看一个例子：如图所示 我们想要实现上面点击button按钮实现tab栏切换，可以通过如下两种方式： 第一个是使用v-if进行判断,代码如图所示： 我们通过一个变量当前的值是否为某一个字符串，来确定是否需要展示某一个组件。但是明显存在一个缺点就是代码过于繁琐。 第二个方法:采用动态组件的形式 动态组件component是一个全局注册的组件，其中存在一个属性为is,值为组件名，并且兼容大小写。 二、参数传入 如果想要在component上向某一个组件上传递属
vue-form-maker:Vue 表单生成器——动态生成表单组件
05-02
Vue 动态生成表单组件，可以根据数据配置表单，使用的UI库是。 有问题或BUG欢迎提 表单组件 Input 输入框 Button 按钮 Radio 单选框 Checkbox 多选框 Icon 图标 Switch 开关 Select 选择器 Slider 滑块 DatePicker ...
Vue开发项目入门——Vue脚手架
热门推荐
m0_67495466的博客
04-12 3万+
Vue脚手架是Vue官方提供的标准化开发工具（开发平台），它提供命令行和UI界面，方便创建vue工程、配置第三方依赖、编译vue工程。
Vue组件通信——父子组件通信的四种方法
weixin_44001906的博客
07-13 1万+
引入组件 全局引入 在main.js文件中引入并注册 import ChildrenDemo from '@/views/components/ChildrenDemo' Vue.component('ChildrenDemo',ChildrenDemo)// 第一个参数 全局组件的名字(字符串类型)，第二个参数：引入的组件名（一般都与组件名保持一致） 之后就可以全局使用组件了 局部引入 在父组件中引入 import ChildrenDemo from '@/views/components/Ch
vue评论组件，_基于vue3的UI组件，主要功能有评论，聊天，搜索，锚点.zip
04-03
vue评论组件，_基于vue3的UI组件，主要功能有评论，聊天，搜索，锚点.zip
vue实现简单的星级评分组件
10-17
主要介绍了vue星级评分组件源码,代码简单易懂非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue星星评分组件_一个简单且高度可定制的Vue星级评分组件
cuk5239的博客
07-26 2602
vue星星评分组件 Vue 2.x的星级评定组件 (Star Rating Component for Vue 2.x) Need more than stars? Check out vue-rate-it with hundreds of different raters built in! 需要更多星星吗？ 查看vue-rate-it，其中内置了数百种不同的评估者！ A simple, ...
vue评分组件|awesome-vue-star-rating
delmarks的博客
02-13 910
awesome-vue-star-rating是一款纯vue评分插件，它可以自定义的评分和评分说明，自定义的星数等，简单易用。
简单易用评分组件vue-stars
最新发布
mopmgerg54mo的博客
09-04 613
类型：Vue.js组件功能：实现星级评分、满意度评价等特点：高度可定制化，支持v-model双向绑定，支持自定义图标样式vue-stars是一个功能强大、易于使用且高度可定制化的Vue.js评分控制组件。它支持v-model双向绑定和自定义图标样式等特性，可以方便地实现星级评分、满意度评价等功能。在开发过程中，开发者可以根据实际需求进行定制和扩展，以满足不同的应用场景需求。
VUE星星评分插件
程序员劝退师的博客
01-06 1090
这篇文章算得上是完善同行的文章，原文中代码没问题，但是缺少依赖，导致无法出现星星评分效果！完善后的效果如下！ 原作者文章链接vue 星星(共5分)评分，还有一篇文章估计也是同样的问题vue 星星评分组件这篇文章功能更强大一些，我这里只对第一篇文章做了完善，第二篇应该也是同样的问题！代码复制上去后无法显示星星，lou了一眼代码发现使用了fa-star这些玩意！顺个藤摸个瓜到了这里 ok，到了这里就明白了！ 编写星星评分组件 <template> <div class="Ratin
基于vue编写的一个星星评分组件
hejianghaoswu的博客
08-25 1101
由于在写一个项目时候，遇到了要给服务进行评分的需求，所以写了一个星星评分组件，其效果如下： 实现代码如图所示： <template> <div> <ul ref="star"> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li&
Vue精简代码实现评分组件
Jerry的博客
06-10 1553
写在前面 组件还是自己写来的好，网上的一些评分组件都太过复杂，自己写的代码很精简，就能达到想要的功能，可以点击也可以禁止点击，可以展示全星、灰星、半星！ 效果图 组件代码 <template> <div class="star"> // 用于父子组件双向绑定 <input type="hidden" v-model="value"> ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值