Vue ( 五 ) food 组件开发

简介: 思路:用户点击商品时商品详情页出现,所以需要 父组件中点击商品时调用子组件一个方法来控制 商品详情页的 显示 隐藏。

一、父组件调用子组件的方法

思路:用户点击商品时商品详情页出现,所以需要 父组件中点击商品时调用子组件一个方法来控制 商品详情页的 显示 隐藏。

food组件

<template>
	<div class="food" v-show="foodtoShow">		
	</div>
</template>

<script>
	export default{
		props: {
	      selcurfood: { //  用户选择的商品
	        type: Object
	      }
	   },
	   data(){
	   	return {
	   		foodtoShow :false //  定义商品详情页的初始状态   开始 隐藏
	   	 }
	   },
	   methods:{
	   	  foodinforshow(){   //  待父组件 触发了点击事件,调用 foodinforshow 方法,显示商品详情页
	   	  	this.foodtoShow = true
	   	  }
	   }
		
	}
</script>

父组件goods组件
此处省略 引入、注册...
1.绑定事件

<li @click='selectFood(food,$event)' v-for="food in item.foods" class="food-item">...

2.应用组件

<food :selcurfood='selectedfoods' ref="food"></food>

selectedfoods 代表用户当前点击的商品
3.建立一个接受用户选择商品的对象

data (){
 	return {
 		goods: [],//  goods json  数组
        listHeight: [],// 存放 foods 内部的每一块的高度
        scrollY:0,
        selectedfoods:{} // 接收用户点击的商品
 	}
 },

4.点击事件

selectFood(food,event){
    	if (!event._constructed) {// 阻止浏览器的原生 click 事件
	        return;
	      }
    	this.selectedfoods=food// 传入用户选择的商品,存在selectedfoods 对象里
    	this.$refs.food.foodinforshow() //利用 ref 属性 来调用 子组件的方法
    }

到这里 就和商品详情页相关联了!继续...

二、实现详情页内容的滚动

1.实现滚动需要better-scroll,所以需要dom绑定,异步加载bscroll

<template>
  <transition name="move">
  <!-- v-show 控制显示详情页 ref 实现dom 绑定-->
  <div class="food" v-show="foodtoShow" ref='foodDetail'>
  </div>
  </transition>
</template>
  import BScroll from 'better-scroll';
  export default {
    props: {
	      selcurfood: { //  用户选择的商品
	        type: Object
	      }
	   },
    data(){
      return {
        foodtoShow :false, //  定义商品详情页的初始状态   开始 隐藏
      }
    },
    methods: {
      show(){
        this.showFlag = true; 
        this.$nextTick( () => { //  接口   保证dom 渲染完毕    异步添加滚动绑定
   	  		if(!this.scroll){
   	  			this.scroll=new BScroll(this.$refs.foodDetail,{
   	  				click:true
   	  			})
   	  		}else{
   	  			this.scroll.refresh()
   	  		}
   	  	})
      },
      foodtoHide(){ // 点击返回 图标   商品详情消失
   	  	this.foodtoShow = false
   	  },
  }

注意:better-scroll 作用在 ref 下的 所有内容。所以要有foodcontent 来 包裹内容,否则better-scroll 不起作用,附上部分代码。

<div class="food" v-show="foodtoShow" ref='foodDetail'>
	<div class="foodcontent">
		<div class="image-header">
		    <img :src="selcurfood.image" alt="" />
			<div class="back" @click="foodtoHide">
				<i class="icon-arrow_lift"></i>
			</div>
	    </div>	
		<div class="content">
			<h1 class="title">{{selcurfood.name}}</h1>
			<div class="detail">
			  <span class="sell-count">月售{{selcurfood.sellCount}}</span>	
			  <span class="rating">好评率{{selcurfood.rating}}</span>
			</div>
			<div class="price">
			    <span class="newPrice">¥{{selcurfood.price}}</span>
			    <span  class="oldPrice"v-show='selcurfood.oldPrice'>¥{{selcurfood.oldPrice}}</span>
			</div>
			<!--引入cartcontrol组件,并且用一个div包裹他-->
			<div class="cartcontrol-wrapper">
        	   <cart-control :foodsele='selcurfood' @add="addFood"></cart-control>
            </div>
            <transition name='fade'>
            	<!--使用.stop.prevent阻止冒泡和默认事件,避免穿透-->
            	<div class="buy" v-show="!selcurfood.count || selcurfood.count===0" @click.stop.prevent="ballshow">
            	加入购物车
               </div>
            </transition>
		</div>	
		<split-line v-show="selcurfood.info"></split-line>
	  	<div class="info" v-show="selcurfood.info">
			<h1 class="title">商品信息</h1>
			<p class="text">{{selcurfood.info}}</p>
		</div>
		<split-line ></split-line>
		<div class="rating">
			<h1 class="title">商品评价</h1>
			<ratingselect 
				:selectType="selectType"
				:onlyContent="onlyContent" :desc="desc"
                :ratings="selcurfood.ratings" >
				
			</ratingselect>
		</div>
	</div>
</div>

三、购物车按钮问题

问题:点击加入购物车,出现小球,做抛物线动画的位置从屏幕上方运动,而不是从点击购物车处开始做运动
分析:当点击加入购物车的按钮时候(ballshow),food.count被添加了数据Vue.set(this.selcurfood, 'count', 1),所以加入购物车按钮会被隐藏(v-show的display:none),但同时会执行this.$emit('add', event.target);,只不过这个是异步执行的,并且这个被异步执行的方法add是抛物线小球动画计算初始目标高度的地方,所以当传入的购物车按钮被设置为display:none的时候,动画的目标初始高度无法计算,就会去使用父层div的高度,从而影响了抛物线小球动画效果.
解决办法: 给点击购物车这个按钮消失时加一个动画,从而vue有足够的时间将数据传递到异步执行的方法,这样就不会影响抛物线小球的动画初始目标计算了。

<transition name='fade'>
	<!--使用.stop.prevent阻止冒泡和默认事件,避免穿透-->
	<div class="buy" v-show="!selcurfood.count || selcurfood.count===0" @click.stop.prevent="ballshow">
	加入购物车
   </div>
</transition>

点击出现小球

<!--引入cartcontrol组件,并且用一个div包裹他-->
<div class="cartcontrol-wrapper">
   <cart-control :foodsele='selcurfood' @add="addFood"></cart-control>
</div>
ballshow(event){ //  点击加入购物车按钮,传入事件,小球出现    
     	 if (!event._constructed) {// pc 点击    因为购物车按钮在bscroll里面,所以需要处理掉bscroll的事件类型
          return;
        }
     	  // 抛物线小球动画
        this.$emit('add', event.target); //触发当前实例food上的事件add(在goods组件上绑定在food组件的add方法)
        Vue.set(this.selcurfood, 'count', 1);
     },
     addFood(target) { //跟add关联的addFood方法
        this.$emit('add', event.target); // 触发当前实例food上的事件add(在goods组件上绑定在food组件的add方法)
    }

引用解释:两次触发当前实例的事件add是因为两个操作都是同一个动作,这个动作是绑定在food组件上的add方法,而food组件会在goods组件中被导<food :selcurfood='selectedfoods' @add="addFood" ref="food"></food>,而在goods组件里面,addFood方法就会指向当前goods组件的方法_drop,继而使用shopcart的小球抛物线动画this.$refs.shopcart.drop(target);,这样就是实现了使用跨组件调用方法的效果.

四、商品评价

(1) 评价类型选择


<ratingselect  
    :selectType="usrseleType"
    :onlyContent="isonlyContent" 
    :curdesc="foodDesc"
    :ratings="selcurfood.ratings"
    @usrselect='usrseleRating'
    @toggleSwitch='toggleContent' >						
</ratingselect>

data(){
   return {
   	foodtoShow :false,   //  定义商品详情页的初始状态   开始 隐藏
   	usrseleType: ALL,    //  默认类型
    isonlyContent: true, //  是否只看有内容的评价 默认 不看
    foodDesc: {          //  类型  对象
      all: '全部',
      positive: '推荐',
      negative: '吐槽'
    }
  }
}
 usrseleRating (type){ // 子组件 传过来的事件
      this.usrseleType = type
      this.$nextTick(() => { // 每更改一次类型,dom 异步刷新一次
      this.scroll.refresh();
     });
    },
  toggleContent(){ //  切换显示是否有内容的评价
      this.isonlyContent=!this.isonlyContent
      this.$nextTick(() => { //切换的时候需要重新刷新bscroll
      this.scroll.refresh();
        });
    },
  needShow(type,txt) { 
    if (this.isonlyContent && !txt) { // //只显示有内容的 并且 没有内容就返回false
      return false;
    }
    if (this.usrseleType === ALL) { //显示全部类型的评价
      return true;
    } else { // 显示对应的类型的评价
      return type === this.usrseleType;
    }
  }

usrseleRating和toggleContent使用异步$nextTick是因为vue是异步更新dom的,当改变了vue属性时候,当前的dom不是立即更新的(会导致页面的高度变化了,但是bscroll来不及更新,影响滚动体验),而是会放进去异步更新队列里面等候更新,即使这个队列的等待时间不长,但是也来不及马上更新dom,所以使用$nextTick强制刷新这个队列
在food.vue组件使用usrseleRating和toggleContent来更新food.vue组件的属性,而不能在子组件ratingSelect里面更新,因为vue限制了子组件不能更改父组件的属性,所以通过使用类似this.$emit('select', type);来调用父组件的方法来更改

(2) 评价时间转换

使用了vue 的过滤器
<div class="time">{{rating.time | formatDate}}</div>
filters: {
  formatDate(time) { 
    let date = new Date(time); 
    //调用curTime模块的formatDate函数来解析时间
    return formatDate(date, 'yyyy-MM-dd hh:mm');
  }
}
//在es6下,export 函数function的导入需要这样写
import { formatDate } from '../../common/js/date'; //导入自定义的date模块
formatDate.js是一个自定义的js组件,不是vue组件,目录位于:src/common/js,这种写法是为了练习js的模块化编程
将单独的一个函数写成一个模块
通过export导出函数
通过import导入函数

export function formatDate(date, fmt) { //在es6下导出一个函数
//对一个或多个y进行匹配,匹配到就进行年的替换(年有四位,所以需要特殊处理)
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  let o = {
    'M+': date.getMonth() + 1, //js的月是从0开始算,所以要加1
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  };
  //对月,日,时,分,秒进行匹配替换(这些都是两位,可以一起处理)
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) { //匹配到key例如MM
      let str = o[k] + ''; //然后o['MM'] 就是date.getMonth() + 1
      
      //如果匹配到的时间是1位数,例如是M,那么就直接使用date.getMonth() + 1的值,
      //如果是两位数,那么就在前面补0,使用padLeftZero函数
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)); 
    }
  }
  return fmt;
};

//先加两个0,然后再根据长度截取(因为最长也就2个0的长度)
function padLeftZero(str) {
  return ('00' + str).substr(str.length);
}

food组件到此差不多了。


原文发布时间为:2018年02月12日
原文作者:前端喵 

本文来源:开源中国 如需转载请联系原作者

目录
相关文章
|
12天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
28 1
vue学习第四章
|
12天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
26 1
vue学习第九章(v-model)
|
12天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
27 1
vue学习第十章(组件开发)
|
18天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
18天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
18天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
18天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
17天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
26 3
|
19天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
17天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
36 2