vue--实现购物车案例
最终效果图：
这⾥我们将头部区域、列表区域、以及列表⾥的增加和减少商品数量的区域、以及底部计算区域分别单独封装为⼀个组件，如下：
⼤致实现步骤如下：
1. 安装项⽬所需的第三⽅包
通过 npm install bootstrap@4.6.0  --save 安装 bootstrap
通过 npm install less less-loader@5.0.0 --save 安装 less
main.js – 引⼊bootstrap样式：
import 'bootstrap/dist/css/bootstrap.css'
2.根据上⾯的分析在 components ⾥分别创建 MyHeader 、MyFooter 、MyGoods 、MyCount 组件
完成每个组件的结构和样式 ，然后在 App.vue ⾥引⼊注册和使⽤注意：MyCount 组件应该在 MyGoods  ⾥引⼊注册和使⽤App.vue，
<template>
<div id="app">
<MyHeader></MyHeader>
<div class="main">
<MyGoods></MyGoods>
</div>
<MyFooter></MyFooter>
</div>
</template>
<script>
import MyHeader from './components/MyHeader'
import MyGoods from './components/MyGoods'
import MyFooter from './components/MyFooter'
export default {
name: 'App',
components: {
MyHeader,
MyGoods,
MyFooter
}
}
</script>
<style scoped lang='less'>
.main {
padding: 45px 0 50px 0;
}
</style>
MyHeader.vue，
<template>
<div class="my-header">购物车案例</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.my-header {
height: 45px;
line-height: 45px;
text-align: center;
background-color: #1d7bff;
color: #fff;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 2;
}
</style>
MyGoods.vue，
<template>
<div class="my-goods-item">
<div class="left">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="input"
>
<label class="custom-control-label" for="input">
<img src="fuss10.elemecdn/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="">        </label>
</div>
</div>
<div class="right">
<div class="top">商品名字</div>
<div class="bottom">
<span class="price">¥ 100</span>
<span>
<MyCount></MyCount>
</span>
</div>
</div>
</div>
</template>
<script>
import MyCount from './MyCount'
export default {
components: {
MyCount
}
}
</script>
<style lang="less" scoped>
.my-goods-item {
display: flex;
padding: 10px;
border-bottom: 1px solid #ccc;
border-bottom: 1px solid #ccc;
overflow: hidden;
.left {
img {
width: 120px;
height: 120px;
margin-right: 8px;
border-radius: 10px;
}
.custom-control-label::before,    .custom-control-label::after {
top: 50px;
}
}
.right {
flex: 1;
display: flex;
js购物车结算代码flex-direction: column;
justify-content: space-between;    .top{
font-size: 14px;
font-weight: 700;
}
.
bottom {
display: flex;
justify-content: space-between;      padding: 5px 0;
align-items: center;
.price {
color: red;
font-weight: bold;
}
}
}
}
</style>
MyCount.vue，
<template>
<div class="my-counter">
<button type="button" class="btn btn-light" >-</button>    <input type="number" class="form-control inp" >
<button type="button" class="btn btn-light">+</button>  </div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.my-counter {
display: flex;
.inp {
width: 45px;
text-align: center;
margin: 0 10px;
}
.btn, .inp{
transform: scale(0.9);
}
}
</style>
MyFooter.vue，

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。