精华内容
下载资源
问答
  • vue实现评价星星功能

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

    2020-04-22 11:01:50
    rate.vue中的代码 封装好rate.vue之后在你需要的页面引入 星星评价组件支持参数如下:星星的间距,是否可点击,最大评分,当前评分,星星的大小,是否展示描述,是否展示评分,描述数组,评分数组,亮...

    在做商品评价星星时 发现没有特别适合自己项目的星星所以写了个评价星星的组件 很简单。

    代码如下

    rate.vue中的代码

    封装好rate.vue之后在你需要的页面引入

    星星评价组件支持参数如下:星星的间距,是否可点击,最大评分,当前评分,星星的大小,是否展示描述,是否展示评分,描述数组,评分数组,亮星星,暗星星(图片地址)

    https://download.csdn.net/download/qq_40342139/12350348这是下载地址 需要5积分 也可以直接复制当前的文章代码,创作不易,希望对你有所帮助。

     

    展开全文
  • vue 实现评价功能

    千次阅读 2019-05-18 18:39:09
    <div class="star-48" id="deliveryStar"> <span class="on" :id="'deliveryStar'+index" @click="setPF('deliveryStar',index)" v-for="(deliveryStar,index) in starCount" :key="'deliverySt...
    1. html 代码
    <div class="star-48" id="deliveryStar">
    		<span class="on" :id="'deliveryStar'+index" @click="setPF('deliveryStar',index)" v-for="(deliveryStar,index) in starCount" :key="'deliveryStar'+index"></span>
    </div>
    
    
    
    

     2.css

    .star-48 span {
    		/*大小为48的星星大小*/
    		display: inline-block;
    		width: 1.5rem;
    		height: 1.5rem;
    		margin-right: .4rem;
    	}
    	
    	.star-48 span:last-child {
    		margin-right: 0;
    	}
    	
    	.star-48 .on {
    		background: url("../../assets/images/icon/orderV_iocn_selected.png") no-repeat;
    		background-size: 1.5rem 1.5rem;
    	}
    	
    	.star-48 .off {
    		background: url("../../assets/images/icon/orderV_iocn_unselect@2x.png") no-repeat;
    		background-size: 1.5rem 1.5rem;
    	}

    3.js

    setPF(PFbox, val) {
    				var that = this; 
    				var curent_value = 0; //临时评分 由span的class='on' 确定分数
    				var allbox = document.getElementById(PFbox).getElementsByTagName('span'); //获取当前div下的所有的span				
    				var classfiy = document.getElementById(PFbox + val); //获取当前星星的状态		on 选中 off 未选中				
    				if(classfiy.className == 'on') { //当前星星状态 on 将当前星星之后的改为off
    					for(var i = 0, j = allbox.length; i < j; i++) {
    						if(i > val && i != 0) {
    							allbox[i].className = 'off'
    						}
    						if(allbox[i].className == 'on') {
    							curent_value++;
    						}
    					}
    				} else { //当前星星状态 off 将当前星星之前的改为on
    					for(var i = 0, j = allbox.length; i < j; i++) {
    						if(i < val || i == val) {
    							allbox[i].className = 'on'
    						}
    						if(allbox[i].className == 'on') {
    							curent_value++;
    						}
    					}
    				}
                    //设置分数
    				if(PFbox == 'shopStar') {
    					that.shopPoint = curent_value;
    				}
    				
    				
    			}

    4.图片

    星星 星星2

    可以用于一个界面多个评论项 (-_-)

    ps:眯眯眼的都是怪物

    展开全文
  • // 循环后台反的list数组,在每一个商品对象添加字段,用来存储用户对每个商品的评价信息 init() { this.axios.post("/api/mobile/index.php", { order_id: this.order_id }).then(res => ...

    商城对每个订单进行评价,但是订单商品数量不确定,根据后台接口反的数据渲染需要评价的商品信息

    创建存储变量

    // 循环后台反的list数组,在每一个商品对象中添加字段,用来存储用户对每个商品的评价信息
    init() {
    	this.axios.post("/api/mobile/index.php", {
    		order_id: this.order_id
    	}).then(res => {
    		console.log(res);
    		this.goods = res.data.evaluate_goods;
    		this.goods.forEach((item, index) => {
    			// 动态设置data  对象 字段名 字段值
    			this.$set(item, "text", ""); //存评价文字
    			this.$set(item, "loading", false); //是否显示上传图片的加载动画
    			this.$set(item, "imgs", 
    				{
    					img1: "",
    					img2: "",
    					img3: ""
    				}
    			); //存图片   //必须先定义对象中的变量名,之后才可以在方法中修改变量值
    		});
    	});
    },
    

    获取存储的评价信息,上传接口

    publish() {
    	//1.处理评价信息
    	let goodsArr = [];  //所有评价信息数组
    	this.goods.forEach((item, i) => {    //循环评价商品列表,组合每个商品信息对象,push进大数组
    		let good = {  //每个商品信息对象
    			comment: item.text,//评价内容
    			evaluate_image:[item.imgs.img1, item.imgs.img2, item.imgs.img3],//评价图片
    			geval_id: item.geval_id//评价的商品id
    		};
    		goodsArr.push(good);
    	});
    	
    	//2.评价信息上传
    	this.axios.post("/api/mobile/index.php", {
    		geval_orderid: this.order_id,
    		goods: goodsArr   
    	}).then(res => {
    		if (res.status == 1) {
    			this.$toast("评价成功");
    		}
    	});
    },
    
    
    展开全文
  • vue五星评价的案例

    2021-03-19 00:04:18
    效果图 html代码 <span v-for="(item, index) in star" :key="index" :class="index <= s_l?'el-icon-star-on':'el-icon-star-off'" @click="getStar(index)"></span> ... old_

    效果图
    在这里插入图片描述
    html代码

    <span v-for="(item, index) in star" :key="index" :class="index <= s_l?'el-icon-star-on':'el-icon-star-off'" @click="getStar(index)"></span>
    

    js代码

    export default {
    	data() {
    		return {
    			star: [0, 1, 2, 3, 4],
    			s_l: -1,
    			old_index: null
    		};
    	},
    	methods: {
    		//点亮星星
    		getStar(index) {
    			if (this.old_index == index) {
    				this.s_l = index - 1;
    				this.score--;
    				this.old_index--;
    				return;
    			}
    			this.s_l = index;
    			this.score = index + 1;
    			this.old_index = index;
    		}
    	}
    };
    
    展开全文
  • 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 商品星级评价

    2017-07-14 12:20:34
    vue 商品星级评价
  • 主要介绍了Vue实现星级评价效果的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue评价星星特效

    千次阅读 2018-09-27 17:38:53
     请输入备评价">  评价    export default {  name: "",  data() {  return {  list:[0,1,2,3,4],  stara:'../../../../static/tabbar/mine/star_a.png',//亮星星  starb:'../../../../...
  • 掌握成熟的框架,方便找工作(项目对接) 如: ...vue框架现在是否属于熟,这个谁评价一下 外企业要求会React,Angular的占比多少? 国内12306网站,并发最高的网站使用vuevue的文档齐全? ...
  • 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实现订单多商品评价 最近在开发简易版商城,其中有发表评价功能,涉及到一个订单多商品评价。项目使用vue结合vant组件开发。 文章目录vue实现订单多商品评价效果图前提template初始化获取订单详情上传图片after...
  • Vue实现星级评价

    2020-04-25 19:11:30
    3、主要实现了鼠标滑动改变样式,鼠标离开样式消失,鼠标点击对应的五角星样式被改变及完成评价; 4、本文章只是简单的实现了功能,仅做参考! <!doctype html> <html lang="en"> <head> <...
  • 正常vue做法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document...
  • 本篇文章我们进一步深入项目设计评价组件。01分析页面如图所示,点菜,评价,商家,为导航,我们点击评价的时候,直接跳转评价页面。评价页面由商家评分一栏,评论列表构成,评论列表支持:全部,有图,点评三种筛选...
  • 最近在写一个关于vue的商城项目,然后集成在移动端,开发需求有一界面,类似淘宝商城评价界面!接下来通过本文给大家分享vue实现类似淘宝商品评价页面星级评价及上传多张图片功能,需要的朋友参考下吧
  • 在很多项目,需要用到对商品、订单、服务等的评价功能,其中使用星级评价是一种快捷表现满意度的体现。接下来以VUE项目环境列举一个实例。具体样式的话,需要自己根据项目实际情况进行修改。 具体实现 // HTML <...
  • 使用vue实现类似电商的五星评价,如图: 下载两个图片:(on.png)和(off.png) 通过修改元素的class名来切换背景图 引用vue.js文件 <script src="js/vue.js" type="text/javascript" charset="utf-8"&...
  • Vue实现星级评价效果

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

    2021-08-03 16:55:40
    定义一个组件,然后监听滚动事件 小米8 概述 参数 用户评价 插槽用法 立即购买 123
  • 基于Vue的电商星星评价demo封装组件注册组件设计事件绑定事件 封装组件 首先需要封装星星评价组件,通常每个评分项为五个星组成,使用v-for循环...设计好组件样式先在vue实例注册组件,在html使用,检测是否符合
  • vue实现电商的五星评价 (通过修改元素的class名来切换背景图) 效果图如下: 这是两个图片,一个是空心一个是实心的:   绑定鼠标点击两个事件: 使用鼠标进入mouseenter 鼠标离开mouseleave,代码...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,268
精华内容 2,107
关键字:

vue中评价

vue 订阅