0
0

从零开始打造vue---购物车案例

购物车案例

1. 案例效果

2. 实现步骤

  • ① 初始化项目基本结构
  • ② 封装 EsHeader 组件
  • ③ 基于 axios 请求商品列表数据
  • ④ 封装 EsFooter 组件
  • ⑤ 封装 EsGoods 组件
  • ⑥ 封装 EsCounter 组件

1. 初始化项目结构

运行如下的命令，初始化 vite 项目：

npm init vite-app code-cart
cd code-cart
npm install
  1. 清理项目结构：
  • 把 bootstrap 相关的文件放入 src/assets 目录下
  • 在 main.js 中导入 bootstrap.css
  • 清空 App.vue 组件
  • 删除 components 目录下的 HelloWorld.vue 组件
  1. 为组件的样式启用 less 语法
npm i less -D

4.初始化 index.css 全局样式如下：

:root {
 font-size: 12px;
 }

2. **封装 **es-header 组件

2.1 **创建并注册 **EsHeader **组件 **

  1. 在 src/components/es-header/ 目录下新建 EsHeader.vue 组件：
<template>
 <div>EsHeader 组件</div>
</template> <script>
export default {
 name: 'EsHeader', }
</script> <style lang="less" scoped></style>
  1. 在 App.vue 组件中导入并注册 EsHeader.vue 组件：
// 导入 header 组件
import EsHeader from './components/es-header/EsHeader.vue'
export default {
 name: 'MyApp',
 components: {
 // 注册 header 组件
 EsHeader,
 },
}
  1. 在 App.vue 的 template 模板结构中使用 EsHeader 组件：\
    <template>
 <div>
 <h1>App 根组件</h1>
 <!-- 使用 es-header 组件 -->
 <es-header></es-header>
 </div>
</template>

2.2 **封装 **es-header **组件 **

  1. 封装需求：
  • 允许用户自定义 title 标题内容
  • 允许用户自定义 color 文字颜色
  • 允许用户自定义 bgcolor 背景颜色
  • 允许用户自定义 fsize 字体大小
  • es-header 组件必须固定定位到页面顶部的位置，高度为 45px，文本居中，z-index 为 999
  1. 在 es-header 组件中封装以下的 props 属性：
export default {
 name: 'EsHeader',
 props: {
 title: { // 标题内容
 type: String,
 default: 'es-header',
 },
 bgcolor: { // 背景颜色
 type: String,
 default: '#007BFF',
 },
 color: { // 文字颜色
 type: String,
 default: '#ffffff',
 },
 fsize: { // 文字大小
 type: Number,
 default: 12,
 },
 },
}
  1. 渲染标题内容，并动态为 DOM 元素绑定行内的 style 样式对象：
<template>
 <div :style="{ color: color, backgroundColor: bgcolor, fontSize:
fsize + 'px' }">{{ title }}</div>
</template>
  1. 为 DOM 节点添加 header-container 类名，进一步美化 es-header 组件的样式：
<template> 
 <div class="header-container" :style="{ color: color,
backgroundColor: bgcolor, fontSize: fsize + 'px' }">
 {{ title }}
 </div>
</template> <style lang="less" scoped>
.header-container {
 height: 45px;
 line-height: 45px;
 text-align: center;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 999;
}
</style>
  1. 在 App 根组件中使用 es-header 组件时，通过 title 属性 指定 标题内容
<template>
 <div class="app-container">
 <h1>App 根组件</h1>
 
 <!-- 为 es-header 组件指定 title 属性的值 -->
 <es-header title="购物车案例"></es-header>
 </div>
</template>

3. **基于 **axios **请求商品列表数据 **

1.运行如下的命令安装 axios

npm i axios -S

2.在 main.js 入口文件中导入并全局配置 axios： 

import { createApp } from 'vue'
import App from './App.vue'
import './assets/css/bootstrap.css'
import './index.css'
// 导入 axios
import axios from 'axios'
const app = createApp(App)
// 配置请求的根路径
axios.defaults.baseURL = 'https://www.escook.cn'
// 将 axios 挂载为全局的 $http 自定义属性
app.config.globalProperties.$http = axios
app.mount('#app')

3.2 **请求商品列表数据 **

  1. 在 App.vue 根组件中声明如下的 data 数据：
data() {
 return {
 // 商品列表的数据
 goodslist: [],
 }
},
  1. 在 App.vue 根组件的 created 生命周期函数中，**预调用 **获取商品列表数据 的 methods 方法
/ 组件实例创建完毕之后的生命周期函数
created() {
 // 调用 methods 中的 getGoodsList 方法，请求商品列表的数据
 this.getGoodsList()
},
  1. 在 Ap.vue 根组件的 methods 节点中，声明刚才预调用的 getGoodsList 方法：
methods: {
 // 请求商品列表的数据
 async getGoodsList() {
 // 1. 通过组件实例 this 访问到全局挂载的 $http 属性，并发起
Ajax 数据请求
 const { data: res } = await this.$http.get('/api/cart')
 // 2. 判断请求是否成功
 if (res.status !== 200) return alert('请求商品列表数据失败！')
 // 3. 将请求到的数据存储到 data 中，供页面渲染期间使用
 this.goodslist = res.list
 },
},

4. **封装 **es-footer 组件

4.1 **创建并注册 **EsFooter **组件 **

1.在 src/components/es-footer/ 目录下新建 EsFooter.vue 组件： 

<template>
 <div>EsFooter 组件</div>
</template> <script>
export default {
 name: 'EsFooter', }
</script> <style lang="less" scoped></style>
  1. 在 App.vue 组件中导入并注册 EsFooter.vue 组件：
// 导入 header 组件
import EsHeader from './components/es-header/EsHeader.vue'
// 导入 footer 组件
import EsFooter from './components/es-footer/EsFooter.vue'
export default {
 name: 'MyApp',
 components: {
 // 注册 header 组件
 EsHeader,
 // 注册 footer 组件
 EsFooter,
 },
} 6
  1. 在 App.vue 的 template 模板结构中使用 EsFooter 组件：
    <template>
 <div>
 <h1>App 根组件</h1>
 <!-- 使用 es-header 组件 -->
 <es-header></es-header>
 <!-- 使用 es-footer 组件 -->
 <es-footer></es-footer>
 </div>
</template>

4.2 **封装 **es-footer **组件 **

  • es-footer 组件必须固定定位到 页面底部 的位置 高度为 50px **内容两端贴边对齐 **z-index :999
  • 允许用户自定义 amount 总价格（单位是元），并在渲染时 保留两位小数
  • 允许用户自定义 total 总数量 并渲染到 结算按钮中 如果要结算的商品数为0 则 禁用结算按钮
  • 允许用户自定义 isfull 全选按钮的选中状态
  • 允许用户通过 自定义事件 的形式，监听全选按钮 选中状态的变化 并获取到 最新的选中状态
<!-- Footer 组件 -->
<my-footer :isfull="false" :total="1" :amount="98"
@fullChange="onFullStateChange"></my-footer>

4.2.1 **渲染组件的基础布局 **

  1. 将 EsFooter.vue 组件在页面底部进行固定定位
<template>
 <div class="footer-container">EsFooter 组件</div>
</template> <script>
export default {
 name: 'EsFooter', }
</script> <style lang="less" scoped>
.footer-container {
 // 设置宽度和高度
 height: 50px;
 width: 100%;
 // 设置背景颜色和顶边框颜色
 background-color: white;
 border-top: 1px solid #efefef;
 // 底部固定定位
 position: fixed;
 bottom: 0;
 left: 0;
 // 内部元素的对齐方式
 display: flex;
 justify-content: space-between;
 align-items: center;
 // 设置左右 padding
 padding: 0 10px; }
</style>
  1. 根据 bootstrap 提供的 Checkboxes https://v4.bootcss.com/docs/components/forms/#check

boxes 渲染左侧的 全选 按钮： 

<template>
 <div class="footer-container">
 <!-- 全选按钮 -->
 <div class="custom-control custom-checkbox">
 <input type="checkbox" class="custom-control-input"
id="fullCheck" />
 <label class="custom-control-label" for="fullCheck">全选
</label>
 </div>
 </div>
</template>

并在全局样式表 index.css 中覆盖 全选 按钮的圆角样式： 

.custom-checkbox .custom-control-label::before {
 border-radius: 10px; }
  1. 渲染合计对应的价格区域：
<template>
 <div class="footer-container">
 <!-- 全选按钮 -->
 <div class="custom-control custom-checkbox">
 <input type="checkbox" class="custom-control-input"
id="fullCheck" />
 <label class="custom-control-label" for="fullCheck">全选
</label>
 </div>
 <!-- 合计 -->
 <div>
 <span>合计：</span>
 <span class="amount">￥0.00</span>
 </div>
 </div>
</template>

并在当前组件的 <style> 节点中美化总价格的样式

.amount {
 color: red;
 font-weight: bold; }

4.根据 bootstrap 提供的渲染结算按钮：

Buttons https://v4.bootcss.com/docs/components/buttons/#examples 

<template>
 <div class="footer-container">
 <!-- 全选按钮 -->
 <div class="custom-control custom-checkbox">
 <input type="checkbox" class="custom-control-input"
id="fullCheck" />
 <label class="custom-control-label" for="fullCheck">全选
</label>
 </div>
 <!-- 合计 -->
 <div>
 <span>合计：</span>
 <span class="amount">￥0.00</span>
 </div>
 <!-- 结算按钮 -->
 <button type="button" class="btn btn-primary">结算(0)</button>
 </div>
</template>

并在当前组件的 <style> 节点中美化结算按钮的样式

.btn-primary {
 // 设置固定高度
 height: 38px;
 // 设置圆角效果
 border-radius: 19px;
 // 设置最小宽度
 min-width: 90px; }

4.2.2 **封装自定义属性 **amount

amount 是已勾选商品的总价格

  1. 在 EsFooter.vue 组件的 props 节点中，声明如下的自定义属性
export default {
 name: 'EsFooter',
 props: {
 // 已勾选商品的总价格
 amount: {
 type: Number,
 default: 0,
 },
 },
}
  1. 在 EsFooter.vue 组件的 DOM 结构中渲染 amount 的值：
<!-- 合计 -->
<div>
 <span>合计：</span>
 <!-- 将 amount 的值保留两位小数 -->
 <span class="amount">￥{{ amount.toFixed(2) }}</span>
</div>

4.2.3 **封装自定义属性 **total

total 为已勾选商品的总数量

  1. 在 EsFooter.vue 组件的 props 节点中，声明如下的自定义属性
export default {
 name: 'EsFooter',
 props: {
 // 已勾选商品的总价格
 amount: {
 type: Number,
 default: 0,
 },
 // 已勾选商品的总数量
 total: {
 type: Number,
 default: 0,
 },
 },
}
  1. 在 EsFooter.vue 组件的 DOM 结构中渲染 total 的值
<!-- 结算按钮 -->
<button type="button" class="btn btn-primary">结算({{total}})
</button>
  1. 动态控制结算按钮的禁用状态：
<!-- disabled 的值为 true，表示禁用按钮 -->
<button type="button" class="btn btn-primary" :disabled="total ===
0">结算({{ total }})</button>

4.2.4 **封装自定义属性 **isfull

isfull 是全选按钮的选中状态，true 表示选中，false 表示未选中

  1. 在 EsFooter.vue 组件的 props 节点中，声明如下的自定义属性：
export default {
 name: 'EsFooter',
 props: {
 // 已勾选商品的总价格
 amount: {
 type: Number,
 default: 0,
 },
 // 已勾选商品的总数量
 total: {
 type: Number,
 default: 0,
 },
 // 全选按钮的选中状态
 isfull: {
 type: Boolean,
 default: false,
 },
 },
}
  1. 为复选框动态绑定 ckecked 属性的值：
<!-- 全选按钮 -->
<div class="custom-control custom-checkbox">
 <input type="checkbox" class="custom-control-input"
id="fullCheck" :checked="isfull" />
 <label class="custom-control-label" for="fullCheck">全选</label>
</div>

4.2.5 **封装自定义事件 **fullChange

通过自定义事件 fullChange，把最新的选中状态传递给组件的使用者

  1. 监听复选框选中状态变化的 change 事件：
<!-- 全选按钮 -->
<div class="custom-control custom-checkbox">
 <input type="checkbox" class="custom-control-input"
id="fullCheck" :checked="isfull" @change="onCheckBoxChange" />
 <label class="custom-control-label" for="fullCheck">全选</label>
</div>
  1. 在 methods 中声明 onCheckBoxChange ，并通过事件对象 e 获取到最新的选中状态：
methods: {
 // 监听复选框选中状态的变化
 onCheckBoxChange(e) {
 // e.target.checked 是复选框最新的选中状态
 console.log(e.target.checked)
 },
},
  1. 在 emits 中声明自定义事件：
// 声明自定义事件
emits: ['fullChange'],

在 onCheckBoxChange 事件处理函数中，通过 $emit() 触发自定义事件，把最新的选中

状态传递给当前组件的使用者： 

methods: {
 onCheckBoxChange(e) {
 // 触发自定义事件
 this.$emit('fullChange', e.target.checked)
 },
},
  1. 在 App.vue 根组件中测试 EsFooter.vue 组件：
<!-- 使用 footer 组件 -->
<es-footer :total="0" :amount="0" @fullChange="onFullStateChange">
</es-footer>

并在 methods 中声明 onFullStateChange 处理函数，通过形参获取到全选按钮最新的

选中状态： 

methods: {
 // 监听全选按钮状态的变化
 onFullStateChange(isFull) {
 // 打印全选按钮最新的选中状态
 console.log(isFull)
 },
},

5. **封装 **es-goods 组件

5.1 **创建并注册 **EsGoods **组件 **

  1. 在 src/components/es-goods/ 目录下新建 EsGoods.vue 组件：
<template>
 <div>EsGoods 组件</div>
</template> <script>
export default {
 name: 'EsGoods', }
</script> <style lang="less" scoped></style>
  1. 在 App.vue 组件中导入并注册 EsGoods.vue 组件：
// 导入 header 组件
import EsHeader from './components/es-header/EsHeader.vue'
// 导入 footer 组件
import EsFooter from './components/es-footer/EsFooter.vue'
// 导入 goods 组件
import EsGoods from './components/es-goods/EsGoods.vue'
export default {
 name: 'MyApp',
 components: {
 // 注册 header 组件
 EsHeader,
 // 注册 footer 组件
 EsFooter,
 // 注册 goods 组件
 EsGoods,
 },
}
  1. 在 App.vue 的 template 模板结构中使用 EsGoods 组件
<template>
 <div class="app-container">
 <!-- 使用 header 组件 -->
 <es-header title="购物车案例"></es-header>
 <!-- 使用 goods 组件 -->
 <es-goods></es-goods>
 <!-- 使用 footer 组件 -->
 <es-footer :total="0" :amount="0"
@fullChange="onFullStateChange"></es-footer>
 </div>
</template>

5.2 **封装 **es-goods **组件 **

5.2.0 **封装需求 **

    1. 实现 EsGoods 组件的基础布局
    1. 封装组件的 6 个自定义属性（id, thumb，title，price，count，checked）
    1. 封装组件的自定义事件 stateChange ，允许外界监听组件选中状态的变
<!-- 使用 goods 组件 -->
<es-goods
 v-for="item in goodslist"
 :key="item.id"
 :id="item.id"
 :thumb="item.goods_img"
 :title="item.goods_name"
 :price="item.goods_price"
 :count="item.goods_count"
 :checked="item.goods_state"
 @stateChange="onGoodsStateChange"
></es-goods>

5.2.1 **渲染组件的基础布局 **

  1. 渲染 EsGoods 组件的基础 DOM 结构：
<template>
  <div class="goods-container">
    <!-- 左侧图片区域 -->
    <div class="left">
      <!-- 商品的缩略图 -->
      <img src="" alt="商品图片" class="thumb" />
    </div>
    <!-- 右侧信息区域 -->
    <div class="right">
      <!-- 商品名称 -->
      <div class="top">xxxx</div>
      <div class="bottom">
        <!-- 商品价格 -->
        <div class="price">￥0.00</div>
        <!-- 商品数量 -->
        <div class="count">数量</div>
      </div>
    </div>
  </div>
</template>
  1. 美化组件的布局样式
.goods-container {
  display: flex;
  padding: 50px,10px;
  // 左侧图片的样式
  .left {
    margin-right: 10px;
    // 商品图片
    .thumb {
      display: block;
      width: 100px;
      height: 100px;
      background-color: #efefef;
    }
  }
  // 右侧商品名称、单价、数量的样式
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    .top {
      font-weight: bold;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .price {
        color: red;
        font-weight: bold;
      }
    }
  }
}

在商品缩略图之外包裹复选框( https://v4.bootcss.com/docs/components/forms/#checkboxes ) 

<!-- 左侧图片和复选框区域 -->
<div class="left">
 <!-- 复选框 -->
 <div class="custom-control custom-checkbox">
 <input type="checkbox" class="custom-control-input"
id="customCheck1" />
 <!-- 将商品图片包裹于 label 之中，点击图片可以切换“复选框”的选
中状态 -->
 <label class="custom-control-label" for="customCheck1">
 <img src="" alt="商品图片" class="thumb" />
 </label>
 </div>
 <!-- <img src="" alt="商品图片" class="thumb" /> -->
</div>
  1. 覆盖复选框的默认样式：
.custom-control-label::before,
.custom-control-label::after {
 top: 3.4rem; }
  1. 在 App.vue 组件中循环渲染 EsGoods.vue 组件
<!-- 使用 goods 组件 -->
<es-goods v-for="item in goodslist" :key="item.id"></es-goods> 12
  1. 为 EsGoods.vue 添加顶边框：
.goods-container {
 display: flex;
 padding: 10px;
 // 最终生成的选择器为 .goods-container + .goods-container
 // 在 css 中，（+）是“相邻兄弟选择器”，表示：选择紧连着另一元素后
的元素，二者具有相同的父元素。
 + .goods-container {
 border-top: 1px solid #efefef;
 }
 // ...省略其他样式
}

5.2.2 **封装自定义属性 **id

id 是每件商品的唯一标识符

  1. 在 EsGoods.vue 组件的 props 节点中，声明如下的自定义属性：
export default {
 name: 'EsGoods',
 props: {
 // 唯一的 key 值
 id: {
 type: [String, Number], // id 的值可以是“字符串”也可以是“数 值”
 required: true,
 },
 },
}
  1. 在渲染复选框时动态绑定 input 的 id 属性和 label 的 for 属性值
<!-- 复选框 -->
<div class="custom-control custom-checkbox">
 <input type="checkbox" class="custom-control-input" :id="id" />
 <label class="custom-control-label" :for="id">
 <img src="" alt="商品图片" class="thumb" />
 </label>
</div>
  1. 在 App.vue 中使用 EsGoods.vue 组件时，动态绑定 id 属性的值：
<!-- 使用 goods 组件 -->
<es-goods v-for="item in goodslist" :id="item.id"></es-goods> 12

5.2.3 封装其它属性

除了 id 属性之外，EsGoods 组件还需要封装：

缩略图（thumb）、商品名称（title）、单价（price）、数量（count）、**勾选状态 **

（checked）这 5 个属性

  1. 在 EsGoods.vue 组件的 props 节点中，声明如下的自定义属性：
export default {
 name: 'EsGoods',
 props: {
 // 唯一的 key 值
 id: {
 type: [String, Number],
 required: true,
 },
 // 1. 商品的缩略图
 thumb: {
 type: String,
 required: true,
 },
 // 2. 商品的名称
 title: {
 type: String,
 required: true,
 },
 // 3. 单价
 price: {
type: Number,
 required: true,
 },
 // 4. 数量
 count: {
 type: Number,
 required: true,
 },
 // 5. 商品的勾选状态
 checked: {
 type: Boolean,
 required: true,
 },
 },
}
  1. 在 EsGoods.vue 组件的 DOM 结构中渲染商品的信息数据：
<template>
 <div class="goods-container">
 <!-- 左侧图片和复选框区域 -->
 <div class="left">
 <!-- 复选框 -->
 <div class="custom-control custom-checkbox">
 <input type="checkbox" class="custom-control-input"
:id="id" :checked="checked" />
 <label class="custom-control-label" :for="id">
 <img :src="thumb" alt="商品图片" class="thumb" />
 </label>
 </div>
 </div>
 <!-- 右侧信息区域 -->
 <div class="right">
 <!-- 商品名称 -->
 <div class="top">{{ title }}</div>
 <div class="bottom">
 <!-- 商品价格 -->
 <div class="price">￥{{ price.toFixed(2) }}</div>
 <!-- 商品数量 -->
 <div class="count">数量：{{ count }}</div>
 </div>
 </div>
 </div> 
</template>

在 App.vue 组件中使用 EsGoods.vue 组件时，动态绑定对应属性的值：

<!-- 使用 goods 组件 -->
<es-goods
 v-for="item in goodslist"
 :key="item.id"
 :id="item.id"
 :thumb="item.goods_img"
 :title="item.goods_name"
 :price="item.goods_price"
 :count="item.goods_count"
 :checked="item.goods_state"
></es-goods> 123456789
10
11

5.2.4 **封装自定义事件 **stateChange

点击复选框时，可以把最新的勾选状态，通过自定义事件的方式传递给组件的使用者

  1. 在 EsGoods.vue 组件中，监听 checkbox 选中状态变化的事件：
<!-- 监听复选框的 change 事件 -->
<input type="checkbox" class="custom-control-input" :id="id"
:checked="checked" @change="onCheckBoxChange" />
  1. 在 EsGoods.vue 组件的 methods 中声明对应的事件处理函数
methods: {
 // 监听复选框选中状态变化的事件
 onCheckBoxChange(e) {
 // e.target.checked 是最新的勾选状态
 console.log(e.target.checked)
 },
},
1234567

在 EsGoods.vue 组件中声明自定义事件：

emits: ['stateChange'],
  1. 完善 onCheckBoxChange 函数的处理逻辑，调用 $emit() 函数触发自定义事件
methods: {
 // 监听复选框选中状态变化的事件
 onCheckBoxChange(e) {
 // 向外发送的数据是一个对象，包含了 { id, value } 两个属性
 this.$emit('stateChange', {
 id: this.id,
 value: e.target.checked,
 })
 },
},
  1. 在 App.vue 根组件中使用 EsGoods.vue 组件时，监听它的 stateChange 事件：
<!-- 使用 goods 组件 -->
<es-goods
 v-for="item in goodslist"
 :key="item.id"
 :id="item.id"
 :thumb="item.goods_img"
 :title="item.goods_name"
 :price="item.goods_price"
 :count="item.goods_count"
 :checked="item.goods_state"
 @stateChange="onGoodsStateChange"
></es-goods>

并在 App.vue 的 methods 中声明如下的事件处理函数

methods: {
 // 监听商品选中状态变化的事件
 onGoodsStateChange(e) {
 // 1. 根据 id 进行查找（注意：e 是一个对象，包含了 id 和 value
两个属性）
 const findResult = this.goodslist.find(x => x.id === e.id)
 // 2. 找到了对应的商品，则更新其选中状态
 if (findResult) {
 findResult.goods_state = e.value
 }
 },
}

实现合计、结算数量、全选功能

6.1 动态统计已勾选商品的总价格

需求分析： 合计的商品总价格，依赖于 goodslist 数组中每一件商品信息的变化，此场景下适合使用**计算属 **性。

  1. 在 App.vue 中声明如下的计算属性：
computed: {
 // 已勾选商品的总价
 amount() {
 // 1. 定义商品总价格
 let a = 0
 // 2. 循环累加商品总价格
 this.goodslist
 .filter(x => x.goods_state)
 .forEach(x => {
 a += x.goods_price * x.goods_count
 })
 // 3. 返回累加的结果
 return a
 },
},
  1. 在 App.vue 中使用 EsFooter.vue 组件时，动态绑定已勾选商品的总价格：
<!-- 使用 footer 组件 -->
<es-footer :total="0" :amount="amount"
@fullChange="onFullStateChange"></es-footer> 1

6.2 动态统计已勾选商品的总数量

需求分析：

已勾选商品的总数量依赖项 goodslist 中商品勾选状态的变化，此场景下适合使用计算属性。

  1. 在 App.vue 中声明如下的计算属性：
computed: {
 // 已勾选商品的总数量
 total() {
 // 1. 定义已勾选的商品总数量
 let t = 0
 // 2. 循环累加
 this.goodslist
 .filter(x => x.goods_state)
 .forEach(x => (t += x.goods_count))
 // 3. 返回计算的结果
 return t
 },
},
  1. 在 App.vue 中使用 EsFooter.vue 组件时，动态绑定已勾选商品的总数量：
<!-- 使用 footer 组件 -->
<es-footer :total="total" :amount="amount"
@fullChange="onFullStateChange"></es-footer>

6.3 **实现全选功能 **

  1. 在 App.vue 组件中监听到 EsFooter.vue 组件的选中状态发生变化时，立即更新 goodslist 中每件商品的选中状态即可：
<!-- 使用 footer 组件 -->
<es-footer :total="total" :amount="amount"
@fullChange="onFullStateChange"></es-footer>
  1. 在 onFullStateChange 的事件处理函数中修改每件商品的选中状态：
methods: {
 // 监听全选按钮状态的变化
 onFullStateChange(isFull) {
 this.goodslist.forEach(x => x.goods_state = isFull)
 },
}

7. **封装 **es-counter 组件

7.1 **创建并注册 **EsCounter **组件 **

在 src/components/es-counter/ 目录下新建 EsCounter.vue 组件

<template>
 <div>EsCounter 组件</div>
</template> <script>
export default {
 name: 'EsCounter',
}
</script> <style lang="less" scoped></style>
  1. 在 EsGoods.vue 组件中导入并注册 EsCounter.vue 组件
// 导入 counter 组件
import EsCounter from '../es-counter/EsCounter.vue'
export default {
 name: 'EsGoods',
 components: {
 // 注册 counter 组件
 EsCounter,
 }
}
  1. 在 EsGoods.vue 的 template 模板结构中使用 EsCounter.vue 组件：
<div class="bottom">
 <!-- 商品价格 -->
 <div class="price">￥{{ price.toFixed(2) }}</div>
 <!-- 商品数量 -->
 <div class="count">
 <!-- 使用 es-counter 组件 -->
 <es-counter></es-counter>
 </div>
</div>

7.2 **封装 **es-counter 组件

7.2.0 **封装需求 **

    1. 渲染组件的 基础布局
    1. 实现数量值的 加减操作
    1. 处理 min 最小值
    1. 使用 watch 侦听器处理文本框输入的结果
    1. 封装 numChange 自定义事件
1 <es-counter :num="count" :min="1" @numChange="getNumber"></es-counter>

7.2.1 **渲染组件的基础布局 **

  1. 基于 bootstrap 提供的 Buttons https://v4.bootcss.com/docs/components/buttons/#exampl

es 和 form-control 渲染组件的基础布局： 

<template>
 <div class="counter-container">
 <!-- 数量 -1 按钮 -->
 <button type="button" class="btn btn-light btn-sm">-</button>
 <!-- 输入框 -->
 <input type="number" class="form-control form-control-sm ipt-num" />
 <!-- 数量 +1 按钮 -->
 <button type="button" class="btn btn-light btn-sm">+</button>
 </div>
</template>
  1. 美化当前组件的样式：
counter-container {
 display: flex;
 // 按钮的样式
 .btn {
 width: 25px;
 }
 // 输入框的样式
 .ipt-num {
 width: 34px;
 text-align: center;
 margin: 0 4px;
 }
}

7.2.2 实现数值的渲染及加减操作

思路分析：

    1. 加减操作需要依赖于 EsCounter 组件的 data 数据
    1. 初始数据依赖于父组件通过 props 传递进来 将父组件传递进来的 props 初始值转存到 data 中，形成 EsCounter 组件的内部状态！
  1. 在 EsCounter.vue 组件中声明如下的 props：
props: {
 // 数量值
 num: {
 type: Number,
 default: 0,
 },
},
  1. 在 EsGoods.vue 组件中通过属性绑定的形式，将数据传递到 EsCounter.vue 组件中：
<!-- 商品数量 -->
<div class="count">
 <es-counter :num="count"></es-counter>
</div> 1234

注意：不要直接把 num 通过 v-model 指令双向绑定到 input 输入框，因为 vue 规定：props 的值只读的！例如下面的做法是错误的：

<!-- Warning 警告：不要模仿下面的操作 -->
<input type="number" class="form-control form-control-sm ipt-num"
v-model.number="num" />
  1. 正确的做法：将 props 的初始值转存到 data 中，因为 data 中的数据是可读可写的！示例代

码如下：

export default {
 name: 'EsCounter',
 props: {
 // 初始数量值【只读数据】
 num: {
 type: Number,
 default: 0,
 },
 },
 data() {
 return {
 // 内部状态值【可读可写的数据】
 // 通过 this 可以访问到 props 中的初始值
 number: this.num,
 }
 },
}

并且把 data 中的 number 双向绑定到 input 输入框：

<input type="number" class="form-control form-control-sm ipt-num"
v-model.number="number" />
  1. 为 -1 和 +1 按钮绑定响应的点击事件处理函数：
<button type="button" class="btn btn-light btn-sm"
@click="onSubClick">-</button> <input type="number" class="form-control form-control-sm ipt-num"
v-model.number="number" />
<button type="button" class="btn btn-light btn-sm"
@click="onAddClick">+</button>

并在 methods 中声明对应的事件处理函数如下

methods: {
 // -1 按钮的事件处理函数
 onSubClick() {
 this.number -= 1
 },
 // +1 按钮的事件处理函数
 onAddClick() {
 this.number += 1
 },
},

7.2.3 **实现 **min 最小值的处理

需求分析：

购买商品时，购买的数量最小值为 1

  1. 在 EsCounter.vue 组件中封装如下的 props：
export default {
 name: 'EsCounter',
 props: {
 // 数量值
 num: {
 type: Number,
 default: 0,
 },
 // 最小值
 min: {
 type: Number,
 // min 属性的值默认为 NaN，表示不限制最小值
 default: NaN,
 },
 },
}

在 -1 按钮的事件处理函数中，对 min 的值进行判断和处理：

methods: {
 // -1 按钮的事件处理函数
 onSubClick() {
 // 判断条件：min 的值存在，且 number - 1 之后小于 min
 if (!isNaN(this.min) && this.number - 1 < this.min) return
 this.number -= 1
 },
}
  1. 在 EsGoods.vue 组件中使用 EsCounter.vue 组件时指定 min 最小值：
<!-- 商品数量 -->
<div class="count">
 <!-- 指定数量的最小值为 1 -->
 <es-counter :num="count" :min="1"></es-counter>
</div> 12345

7.2.4 处理输入框的输入结果

思路分析：

    1. 将输入的新值转化为整数
    1. 如果转换的结果不是数字，或小于1，则强制 number 的值等于1
    1. 如果新值为小数，则把转换的结果赋值给 number
  1. 为输入框的 v-model 指令添加 .lazy 修饰符（当输入框触发 change 事件时更新 v

model 所绑定到的数据源）： 

<input type="number" class="form-control form-control-sm ipt-num"
v-model.number.lazy="number" />
  1. 通过 watch 侦听器监听 number 数值的变化，并按照分析的步骤实现代码
export default {
 name: 'EsCounter',
 watch: {
 // 监听 number 数值的变化
 number(newVal) {
 // 1. 将输入的新值转化为整数
 const parseResult = parseInt(newVal)
 // 2. 如果转换的结果不是数字，或小于1，则强制 number 的值等于
if (isNaN(parseResult) || parseResult < 1) {
 this.number = 1
 return
 }
 // 3. 如果新值为小数，则把转换的结果赋值给 number
 if (String(newVal).indexOf('.') !== -1) {
 this.number = parseResult
 return
 }
 console.log(this.number)
 },
 },
}

7.2.5 把最新的数据传递给使用者

需求分析：

当 EsGoods 组件使用 EsCounter 组件时，期望能够监听到商品数量的变化，此时需要使用**自定 **

义事件的方式，把最新的数据传递给组件的使用者。

在 EsCounter.vue 组件中声明自定义事件如下：

emits: ['numChange'],

  1. 在 EsCounter.vue 组件的 watch 侦听器中触发自定义事件：
watch: {
 number(newVal) {
 // 1. 将输入的新值转化为整数
 const parseResult = parseInt(newVal)
 // 2. 如果转换的结果不是数字，或小于1，则强制 number 的值等于1
 if (isNaN(parseResult) || parseResult < 1) {
 this.number = 1
 return
 }
 // 3. 如果新值为小数，则把转换的结果赋值给 number
 if (String(newVal).indexOf('.') !== -1) {
 this.number = parseResult
 return
 }
 // 触发自定义事件，把最新的 number 数值传递给组件的使用者
 this.$emit('numChange', this.number) 
 },
},
  1. 在 EsGoods.vue 组件中监听 EsCounter.vue 组件的自定义事件：
<!-- 商品数量 -->
<div class="count">
 <es-counter :num="count" :min="1" @numChange="getNumber"></escounter>
</div> 1234

并声明对应的事件处理函数如下： 

methods: {
 // 监听数量变化的事件
 getNumber(num) {
 console.log(num)
 },
}

7.2.6 **更新购物车中商品的数量 **

思路分析：

    1. 在 EsGoods 组件中**获取到最新的商品数量 **
    1. 在 EsGoods 组件中声明自定义事件
    1. 在 EsGoods 组件中触发自定义事件，向外传递数据对象 { id, value }
    1. 在 App 根组件中监听 EsGoods 组件的自定义事件，并根据 id 更新对应商品的数量
  1. 在 EsGoods.vue 组件中声明自定义事件 countChange ：

emits: ['stateChange', 'countChange'],

  1. 在 EsCounter.vue 组件的 numChange 事件处理函数中，触发步骤1声明的自定义事件
<es-counter :num="count" :min="1" @numChange="getNumber"></escounter>
methods: {
 // 监听数量变化的事件
 getNumber(num) {
 // 触发自定义事件，向外传递数据对象 { id, value }
 this.$emit('countChange', {
// 商品的 id
 id: this.id,
 // 最新的数量
 value: num,
 })
 },
}

在 App.vue 根组件中使用 EsGoods.vue 组件时，监听它的自定义事件 countChange 

<!-- 使用 goods 组件 -->
<es-goods
 v-for="item in goodslist"
 :key="item.id"
 :id="item.id"
 :thumb="item.goods_img"
 :title="item.goods_name"
 :price="item.goods_price"
 :count="item.goods_count"
 :checked="item.goods_state"
 @stateChange="onGoodsStateChange"
 @countChange="onGoodsCountChange"
></es-goods>

并在 methods 中声明对应的事件处理函数：

 // 监听商品数量变化的事件
 onGoodsCountChange(e) {
 // 根据 id 进行查找
 const findResult = this.goodslist.find(x => x.id === e.id)
 // 找到了对应的商品，则更新其数量
 if (findResult) {
 findResult.goods_count = e.value
 }
 }
}
标签： vue.js bootstrap javascript
本文转载自: https://blog.csdn.net/qq_63358859/article/details/122759838
版权归原作者 前端 贾公子 所有， 如有侵权，请联系我们删除。
登录后发布评论

“从零开始打造vue---购物车案例”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航