vue - 项目之评价星星组件的封装

最新推荐文章于 2024-06-18 10:20:00 发布
最新推荐文章于 2024-06-18 10:20:00 发布
阅读量178 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45381858/article/details/103456894
版权

vue - 项目之评价星星组件的封装*

1、封装star组件

在这里插入图片描述
2、样式文件（这里的样式是使用stylus来写的）
在这里插入图片描述
文件目录：
在这里插入图片描述
3、使用组件
在这里插入图片描述
4、实现情况如下图
在这里插入图片描述

梓萱123
关注
如何封装星星组件？
lcj529的博客
09-29 132
如何封装星星组件？ 子组件 <template> <div class="lcjbox"> <!-- 用于父子组件双向数据绑定 --> <input type="hidden" v-model="value" /> <!-- 不可点击的星星 --> <div v-if="readonly"> <!-- 满星 --> <img :src="full" v-for
Vue封装一个星星评分组件
Cousin__的博客
06-18 1036
<template> <div class="rate"> <span v-if="showText" class="text">{{curScore||score}}分</span> <div class="star-wrap"> <i v-for="(i, index) in 5" :key="index" @mouseenter="disabled ? '.
vue封装星星组件
dgq2739710006的博客
05-29 292
效果图： <template> <div> <div class="star mb-10" :class="starType"> <span class="star-item" v-for="itemClass in itemClassess" :class="itemClass" track-by="$index" ></span> &l
Vue封装五星好评
三季雨
01-03 534
创建starXIng.vue <template> <div class="statBox"> <div v-for="(item, index) in starArr" :class="item" :key="index"></div> </div> </template> <script> export default { props: { star: String, }, com.
vue组件列表
lb812383331的专栏
07-08 1639
基于Vue的组件库 https://github.com/ElemeFE/element" element 饿了么出品的Vue2的web UI工具套件 https://github.com/airyland/vux" Vux 基于Vue和WeUI的组件库 https://github.com/ElemeFE/mint-ui" mint-ui Vue 2的移动UI元素 https://github.com/iview/iview" iview 基于 Vuejs 的开源 UI 组件库 https...
vue--创建组件配置路由（二）
qq_40693615的博客
05-19 1219
有关于组件和路由： 组件是我们根据需求封装出来的HTML页面 路由是一个项目中的枢纽，调配我们创建的各个组件，让不同的页面可以进行切换 模块化组件 就是把多个功能拆分成一个一个的vue文件，让他们自己有一定的独立性 使用组件 -> 先注册组件 template -> 编写组件 组件模块化之后创建的组件都只需要挂载到App.vue中 我们要做的是在template标签集中编写文件。 在component/common 的文件夹下创建 Home.vue文件 写一下home.vue的页面
最新Vue2.0+组件开源项目库集合
熊大小哥哥
10-11 773
UI组件element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 iview ★5801 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★5517 - Vue 2的移动UI元素 vue-material ★2790 - 通过Vue Material和Vue 2建立精美的app应用 muse-ui ★2...
vue 星星评分组件
知行
04-10 1061
评分插件在购物的应用中经常可以看得到，但是用着别人的总是没有自己写的顺手，正好趁着这段时间做一个移动端应用的时候写了一个基于VUE的评分组件，功能没有写全 主体结构： .scoreLayer(v-show="isShowScore" @click="hideScoreLayer($event)") .center-box .star-box.flex-between ul...
用vue 封装一个五星好评
weixin_48929490的博客
02-29 706
传值数存在半星的状态下,通过取整,用去传值数减去取证的数,剩下的沦为半星使用,这里可以作为一个判断使用,判断这个有值的话,就往数组里填写一个半星,没有的话,跳出判断,继续往后补上空星。传值数是整数,通过 取整 循环 将星星循环到一个数组里,剩下的星星用空星替补上,一个五星评价就弄好了。在用这个组件的时候,只需要给这个组件传值即可。
基于Vue如何封装分页组件
08-31
使用Vue做双向绑定的时候，可能经常会用到分页功能，接下来通过本文给大家分享一个封装分页组件的方法，一起看看吧
【vue2.0/3.0 封装UI组件库之业务必备】五星好评
马云
12-06 491
文章目录vue2.0实现搭建UI组件库并引入五星好评组件业务逻辑开发vue3.0实现`Stars.vue``hooks` vue2.0实现 搭建UI组件库并引入 在main.js中引入组件并使用 import myUI from './libs/myUI'; Vue.use(myUI) 创建组件 实现组件的出口 index.jsimport Stars from './components/Stars'; const myUI = {}; // UI组件池 const componentPoo
Vue移动端五星好评组件封装（精确到0.1）
weixin_45170083的博客
04-13 794
我说的五星好评是大家平时很常见的，类似于美团评价那些，不过要精确到0.1的效果展现，的确项目中遇到了，当时也没太注意，很快写了一个，但是最后项目经理又要求不能是全星的评价，要精确到小数点后一位，相对来说是不太难的，但是短暂蒙x了。 其实大致逻辑就是准备两种星星图片，一张用于底板，一张用于显示的颜色，在根据评分的多少（显示星星的个数）/底板的长度=得到想要的星星评分范围。 之前也在网上扒了很多，相对...
vue实现五星评价（vue小应用）
weixin_30914981的博客
07-27 675
使用vue实现类似电商的五星评价，如图： 下载两个图片：（on.png）和（off.png） 通过修改元素的class名来切换背景图 引用vue.js文件 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> html代码： 绑定鼠标进入、鼠标离开、鼠标点击事...
AntDesignVue Rate 评分 实现五星好评功能
最新发布
Python私教
06-18 975
支持给出四星半，三星半之类的半颗星的评价。
Vue处理五星评分
10-18 1604
DOM &amp;lt;p class=&quot;col-12 c-fl c-mt-24 c-container&quot;&amp;gt; &amp;lt;span class=&quot;c-block c-fl c-mr-24&quot;&amp;gt;星级评价&amp;lt;/span&amp;gt; &amp;lt;span class=&quot;star c-fl
vue封装星星组件评分
weixin_47224517的博客
06-15 460
<template> <div class="home"> <span v-for="(v,i) in starArrs" :key="i" :class="`${v}`" class="span"></span><p>当前品分数为：{{pay}}</p> </div> </template> <script> export default { name: 'Star',
Vue框架实现简单版五星评价
MengRui2333的博客
10-18 1088
运行效果截图： 以下为源码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8" /&gt;     &lt;title&gt;Document&lt;/title&gt;     &lt;script src="js/vue.js
评分算法(五星好评为例-vue)
Machangzhi_1115的博客
04-22 4289
整体思路就是把所有的亮星,半星以及暗星放进一个数组 一般的评分后台仅仅只是返回一个数据,需要我们处理这个数据之后在前台显示出来图形化的星星. 首先定义常量: //星星的最大长度 const LENGTH = 5 //亮星 const CLS_ON = 'on' //半星 const CLS_HALF = 'half' //暗星 const CLS_OFF = 'of...
Vue2.0+Element-UI+Echarts组件封装实战教程
"这篇文章主要介绍了如何在Vue2.0项目中结合Element-UI和Echarts进行组件封装，通过实例展示了如何使用封装后的组件来展示数据，包括柱状图和折线图，同时提供了表格和图表之间的切换功能。" 在Vue2.0中，为了提高...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值