精华内容
下载资源
问答
  • 主要介绍了Vue实现星级评价效果的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue 商品星级评价

    2017-07-14 12:20:34
    vue 商品星级评价

    vue 商品星级评价

    template>
        <div id="shoplist">
            <p class="all" >
                <input type="radio" name="b" value="0"  v-model="inputdata"/>
                <span>★</span>
                <input type="radio" name="b" value="1" v-model="inputdata" />
                <span>★</span>
                <input type="radio" name="b" value="2" v-model="inputdata" />
                <span>★</span>
                <input type="radio" name="b" value="3" v-model="inputdata" />
                <span>★</span>
                <input type="radio" name="b" value="4" v-model="inputdata" />
                <span>★</span>
                <input type="radio" name="b" value="5" v-model="inputdata" />
                <span>★</span>
            </p>
        </div>
    </template>
    <script>
        export default {
            name:'shoplist',
            data(){
               return {
                   inputdata:'5'
               }
            },
            methods:{
            },
            watch: {
                inputdata(value) {
                    console.log(value)
                }
            }
        }
    </script>
    <style>
        .all>input{opacity:0;position:absolute;width:2em;height:2em;margin:0;}
        .all>input:nth-of-type(1),
        .all>span:nth-of-type(1){display:none;}
        .all>span{font-size:2em;color:gold;
            -webkit-transition:color .2s;
            transition:color .2s;
        }
        .all>input:checked~span{color:#666;}
        .all>input:checked+span{color:gold;}
    </style>


     
     
    展开全文
  • Vue实现星级评价

    2020-04-25 19:11:30
    3、主要实现了鼠标滑动改变样式,鼠标离开样式消失,鼠标点击对应的五角星样式被改变及完成评价; 4、本文章只是简单的实现了功能,仅做参考! <!doctype html> <html lang="en"> <head> <...

    1、本文五角星采用的阿里巴巴矢量图标库
    2、数据内容可根据实际需求进行改动;
    3、主要实现了鼠标滑动改变样式,鼠标离开样式消失,鼠标点击对应的五角星样式被改变及完成评价
    4、本文章只是简单的实现了功能,仅做参考!

    <!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>五星评价(Vue组件)</title>
    	<!-- 引入阿里矢量图标 -->
    	<link rel="stylesheet" href="./iconfont.css">
    	<!-- 引入vue -->
    	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    	
    	<style>
    		.box{
    			width:400px;
    			height: 100px;
    			border: 1px solid black;
    			margin:0 auto;
    		}
    		.box .icon-wjxb{
    			font-size:44px;
    			line-height: 100px;
    			color:grey;
    			padding: 0 10px;
    		}
    		.box  .active{
    			color:yellow;
    		}
    	</style>
    </head>
    <body>
    	<!-- 星级评价板块 -->
    	<div class="box">
    		<star></star>
    	</div>
    </body>
    <script>
    	// 创建局部组件
    	var star = {
    		// 子模版
    		template:`<div>
    					<span class="iconfont icon-wjxb" v-for="n in 5" @mouseenter="change(n)" @mouseleave="unchange" :class="{'active':activeIndex>=n}" @click="fix(n)"></span>
    				</div>`,
    		data(){
    			return {
    				activeIndex:-1,  // 用来判断什么时候改变样式
    				flag:false       // 用来验证用户是否点击过
    			}
    		},
    		methods:{
    			// 鼠标进入触发,接收参数
    			change(n){
    				// 判断用户是否点击过
    				if(!this.flag){
    					// 没有点击过,改变样式
    					this.activeIndex = n;
    				}
    			},
    			// 鼠标离开时触发
    			unchange(){
    				// 判断用户是否点击过
    				if(!this.flag){
    					// 没点击过,鼠标离开后样式消失
    					this.activeIndex = -1;
    				}
    			},
    			// 点击时触发,接收参数
    			fix(n){
    				// 赋值
    				this.activeIndex = n;
    				// 改变状态
    				this.flag = true;
    			}
    		}
    	}
    	new Vue({
    		// 挂载元素
    		el:".box",
    		// 注册组件
    		components:{
    			star:star
    		}
    	})	
    </script>
    </html>
    
    展开全文
  • Vue实现星级评价效果

    2019-12-29 21:33:22
    我们把星级评价单独做成一个Star组件,抽离出来,其中父组件中引入(传入的是评分的值) <div class="score"> <Star :score="poiInfo.wm_poi_score"></Star> </div> 初始Star.vue <...

    我们把星级评价单独做成一个Star组件,抽离出来,其中父组件中引入(传入的是评分的值)

    <div class="score">
        <Star :score="poiInfo.wm_poi_score"></Star>
    </div>
    

    初始Star.vue

    <template>
      <div>
          <div class="star">
              <span class="star-item"></span>
          </div>
          <span>{{ score }}</span>
      </div>
    </template>
    <script>
    export default {
        name: 'Star',
        props: {
            score: Number
        }
    }
    </script>
    

    首先我们把要做星级图片用类名为star-item的span标签循环出来,星级图片有三张,全星,半星,空星


    下面只罗列关键的css部分, 通过增加类区分图片

    .star-item.on {
        background-image: url(./img/star24_on@2x.png);
    }
    .star-item.half {
        background-image: url(./img/star24_half@2x.png);
    }
    .star-item.off {
        background-image: url(./img/star24_off@2x.png);
    }
    

    接下来修改Star.vue的代码

    <div class="star">
      <span 
        class="star-item" 
        v-for="(itemClass, index) in itemClasses"
        :key="index"
        :class="itemClass"
      >
      </span>
    </div>
    

    itemClasses值是通过计算属性获取的,思路:

    1. 通过computed返回一个长度为5的数组(显示5颗星)
    2. 数组的值是上述css取的不同星对应的类名,再通过绑定每一个循环添加的class,从而遍历星级。

    比如举例评分:

    • 4.7分对应的数组为[‘on’, ‘on’, ‘on’, ‘on’, ‘half’]
    • 3.4分对应的数组为[‘on’, ‘on’, ‘on’, ‘half’, ‘half’]

    JS部分的代码:

    // 星星长度 
    const LENGTH = 5
    
    // 星星的状态
    const CLS_ON = 'on'
    const CLS_HALF = 'half'
    const CLS_OFF = 'off'
    
    export default {
        name: 'Star',
        props: {
            score: Number
        },
        computed: {
            itemClasses () {
                let result = []
    
                let score = Math.floor(this.score * 2) / 2
    
                // 半星 (通过跟1取余判断是否为小数)
                let hasDecimal = score % 1 !== 0
    
                // 全星 (向下取整,获取全星部分)
                let integer = Math.floor(score)
    
                // 遍历全星
                for(let i = 0; i < integer; i++){
                    result.push(CLS_ON)
                }
    
                // 处理半星
                if(hasDecimal){
                    result.push(CLS_HALF)
                }
    
                // 补齐
                while(result.length < LENGTH){ // 到这里还不够五颗星,则凑空星
                    result.push(CLS_OFF)
                }
    
                return result
            }
        }
    }
    

    itemClasses最终是返回了一个长度为5的数组,需要注意的是

    let score = Math.floor(this.score * 2) / 2
    

    半星的划分:只有当小数第一位大于或等于5才可以算为半星,否则是空星。该计算是为了小数部分>=0.5的计算结果带有小数,从而再后面跟1取余判断是否为半星。一开始有点蒙,多试几个数想想就懂了。

    比如4.3分没有半星,4.5有半星出现

    结果:
    比如传入的值为4.7,则显示

    展开全文
  • 在很多项目中,需要用到对商品、订单、服务等的评价功能,其中使用星级评价是一种快捷表现满意度的体现。接下来以VUE项目环境列举一个实例。具体样式的话,需要自己根据项目实际情况进行修改。 具体实现 // HTML <...

    简介

    在很多项目中,需要用到对商品、订单、服务等的评价功能,其中使用星级评价是一种快捷表现满意度的体现。接下来以VUE项目环境列举一个实例。具体样式的话,需要自己根据项目实际情况进行修改。

    具体实现

    // HTML
    <div class="flexRowStartCenter effectAndAttitudeBox">
      <div class="standardTitle">疗效:</div>
      <div class="flexRowStartCenter">
        <img class="standardIcon" :src="index < curativeEffect ? xingIcon : xingIconBot" v-for="(item, index) in curativeEffectList" :key="index" @click="clickXingIconFun(index, 'curativeEffect')" />
      </div>
    </div>
    <div class="flexRowStartCenter effectAndAttitudeBox">
      <div class="standardTitle">服务:</div>
      <div class="flexRowStartCenter">
        <img class="standardIcon" :src="index < doctorAttitude ? xingIcon : xingIconBot" v-for="(item, index) in doctorAttitudeList" :key="index" @click="clickXingIconFun(index, 'doctorAttitude')" />
      </div>
    </div>
    
    // JS
    import xingIcon from "@/assets/image/order/xingIcon.png";
    import xingIconBot from "@/assets/image/order/xingIconBot.png";
    export default {
      data() {
        return {
          xingIcon: xingIcon, // 星级图标:亮色
          xingIconBot: xingIconBot, // 星级图标:灰色
          curativeEffect: 5, // 疗效初始星的颗数
          doctorAttitude: 5, // 服务初始星的颗数
          curativeEffectList: [{}, {}, {}, {}, {}], // 疗效星级列表初始数据
          doctorAttitudeList: [{}, {}, {}, {}, {}] // 服务星级列表初始数据
        }
      },
      method: {
        // 操作:点击星级
        clickXingIconFun(index, type) {
          if (type === "curativeEffect") {
            this.curativeEffect = index + 1;
          } else if (type === "doctorAttitude") {
            this.doctorAttitude = index + 1;
          }
        }
      }
    }
    
    // CSS
    .flexRowStartCenter {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
    }
    .effectAndAttitudeBox {
        margin-bottom: 0.5rem;
      }
    .standardTitle {
      font-size: 0.6rem;
      color: #242526;
      margin-right: 0.25rem;
    }
    .standardIcon {
      width: 0.6rem;
      height: 0.6rem;
      margin-right: 0.2rem;
    }
    

    最后

    觉得有用的朋友请用你的金手指点一下赞,或者评论留言一起探讨技术!

    展开全文
  • vue星级评论组件 明星评价 (vue-star-rating) A simple star rating component for vue projects. Vue项目的简单星级评定组件。 View Demo 查看演示 Download Source 下载源 特征 (Features) Counter 计数器 ...
  • 最近在写一个关于vue的商城项目,然后集成在移动端中,开发需求中有一界面,类似淘宝商城评价界面!接下来通过本文给大家分享vue实现类似淘宝商品评价页面星级评价及上传多张图片功能,需要的朋友参考下吧
  • vue实现星级评价效果

    2018-01-05 17:05:00
    希望对你们有用,已经自己试过可以的才发布出来的 效果如下: html: <template>...div class="evaStar">...li v-for="(itemClass,index) in itemClasses" :class="itemClass" class="st...
  • Vue 星级评分组件

    2020-05-28 21:03:38
    Vue 星级评分组件 描述:其实很早就有想做一个星级评分的组价了,并且想写一些组件的代码库,就是在自己没事的时候造一些轮子,在工作的时候直接 Ctrl + C 和 Ctrl + V。别人还在苦苦加班写东西的时候,你已经开开心...
  • 最近在写一个关于vue的商城项目,然后集成在移动端中,开发需求中有一界面,类似淘宝商城评价界面!实现效果图如下所示:   评价页   点击看大图,且可左右滑动 功能需求分析 默认为5颗星,为非常满意,...
  • vue 星级评论

    2018-09-05 18:13:54
    <template> <div id="shoplist"> <div v-for="(item,index) in 5" :key="index"> <input type="radio" :value="index+1" v-model="inputdata" /> <img src="....
  • 移动端 Vue 星级评分

    千次阅读 热门讨论 2018-09-10 21:59:21
    Vue 星级评分组件 描述:其实很早就有想做一个星级评分的组价了,并且想写一些组件的代码库,就是在自己没事的时候造一些轮子,在工作的时候直接 Ctrl + C 和 Ctrl + V。别人还在苦苦加班写东西的时候,你已经开开...
  • vue实现评价星星功能

    2020-10-15 04:30:57
    主要为大家详细介绍了vue实现评价星星功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 星级评价组件---VUE

    2018-07-06 19:51:10
    今天学习了写星级评价,记录一下,万一以后用得着呢&lt;template&gt; &lt;div id="star"&gt; &lt;span v-for="Class in starArrs" :class="Class" class=&...
  • 基于Vue星级打分功能,代码一共才70行,非常的简单易用,解压即可运行看效果 ,代码注释十分详细,思路都在!2020.06.22更新降低下载积分需求,我个人原意是免费下载的,奈何网站规则不允许!
  • vue.js: var vue= new Vue({ el: "#vue" , data:{ imgNum: 2 , srcStar: '../static/img/common/icon_star_big.jpg' , srcNoStar: '../static/img/common/icon_nostar_big.jpg' }, created: ...
  • 从浏览器的显示看,在5颗星星显示的位置有变化,但是高度为0显示不出来。设置的高度和宽度也不起作用,改变高度也没有效果。!...下面是我的代码: ``` <star :size="48" :score="seller.score"></star> ...
  • vue 五星评价插件

    2018-11-06 12:41:00
    <div class="starBox" ref="star1"> <div class="star" v-for="(item,index) in starArr1" :key="index" @click="starClick1(index)">...img :src="'../../static/images/'+item...
  • Vue评价星星特效

    千次阅读 2018-09-27 17:38:53
    <template> <div> <div class="star"> <span>星级评定</span> <div class="starXin" v-for="(item,index) in list" :key='index'> <div @...
  • vue实现评价星星功能(代码全)

    千次阅读 2019-06-26 11:40:04
    代码: ... (i,index) in list" :key="index" @click="clickStars(index)"> ... rateScoreDesc: ['非常不满意,各...更多技巧请查看vue专栏  https://blog.csdn.net/qq_42221334/column/info/27230/1  
  • 基于Vue星级评分

    2021-02-19 09:06:24
    年前的一个项目中做到一个星级评分功能,以前都是用jquery.raty.js这款插件来做的,这个插件确实封装的很方便也很好用,但是毕竟是一个函数库(考虑各种适配,健壮,可扩展),代码行数还是有一点的,所以这次自己写...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 177
精华内容 70
关键字:

vue星级评价

vue 订阅