vue实现div多选全选功能_vue项目评价组件的设计与实现(3.3)

a3cea10cbd21cfcf7e9488df94256abc.gif

在上篇文章我们将项目头部模块进行了编写与数据渲染。
本篇文章我们进一步深入项目设计评价组件。

369daaae882cc47298fbd93038ff6d64.png

0 1分析页面


如图所示,点菜,评价,商家,为导航,我们点击评价的时候,直接跳转评价页面。
评价页面由商家评分一栏,评论列表构成,评论列表支持:全部,有图,点评三种筛选。
综上我们现在开始设计评论组件:

0 2建立组件文件夹

1.css图片的存放6efd0bf16fd73c32cf324ce288d7ce6c.png

针对组件引用的图片可能产生变动性,我们将组件内的图片放入组件文件夹内,进行引用。使得组件更加便于维护。2.路径配置
build/webpack.base.conf.js内:

alias: {

通过alias重命名设置对组件导入模块时进行了重命名。
实际在导入需要的组件写法:

// 举个例子,导入Ratings组价可以写成


图片存放,路径配置完成以后我们建立Ratings文件夹并进入:
根据分析页面结构整理以后所以我们先把页面结构搭建出来:
在Ratings.vue中:

//设置容器存放评论组件
<template>
    <div class="ratings" ref='ratingView'>
        <div class="ratings-wrapper">
            //细化我们组件
        div>
    div>
template>


现在我们设计商家评分,口味,包装,等结构如下图:7ca12e1b519beaa8cf7b331e7089dd0f.png

<div class="overview">


实现评论中选项卡(全部,有图,点评),列表页面:

8355a48ac405ba0f03ab0a7dcb1e7ec2.png

<div class="content">


结构搭建完成,下面我们为组件传入对应的数据。

0 3父子组件通信


Ratings.vue
导入依赖的子组件:

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值