Shopcart组件是Goods组件的子组件，在Shopcart组件初始化的时候我们可以传入给其参数poiInfo selectFoods.
请求数据，声明方法与计算属性
定义商品组件的样式
.goods {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
top: 190px;
bottom: 51px;
overflow: hidden;
width: 100%;
}
.goods .menu-wrapper {
-webkit-box-flex: 0;
-ms-flex: 0 0 85px;
flex: 0 0 85px;
background: #f4f4f4;
}
.goods .menu-wrapper .menu-item {
padding: 16px 23px 15px 10px;
border-bottom: 1px solid #e4e4e4;
position: relative;
}
.goods .menu-wrapper .menu-item.current {
background: white;
font-weight: bold;
margin-top: -1px;
}
.goods .menu-wrapper .menu-item:first-child.current {
margin-top: 1px;
}
.goods .menu-wrapper .menu-item .text {
font-size: 13px;
color: #333333;
line-height: 17px;
vertical-align: middle;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.goods .menu-wrapper .menu-item .text .icon {
width: 15px;
height: 15px;
vertical-align: middle;
}
.goods .menu-wrapper .menu-item .num {
position: absolute;
right: 5px;
top: 5px;
width: 13px;
height: 13px;
border-radius: 50%;
color: white;
background: red;
text-align: center;
font-size: 7px;
line-height: 13px;
}
.goods .foods-wrapper {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
/* background: blue; */
}
.goods .foods-wrapper .container-list {
padding: 11px 11px 0 11px;
border-bottom: 1px solid #e4e4e4;
}
.goods .foods-wrapper .container-list img {
width: 100%;
margin-bottom: 11px;
border-radius: 5px;
}
.goods .foods-wrapper .food-list {
padding: 11px;
}
.goods .foods-wrapper .food-list .title {
height: 13px;
font-size: 13px;
background: url(btn_yellow_highlighted@2x.png) no-repeat left center;
background-size: 2px 10px;
padding-left: 7px;
margin-bottom: 12px;
}
.goods .foods-wrapper .food-list .food-item {
display: flex;
margin-bottom: 25px;
position: relative;
}
.goods .foods-wrapper .food-list .food-item .icon {
flex: 0 0 63px;
background-position: center;
background-size: 120% 100%;
background-repeat: no-repeat;
margin-right: 11px;
height: 75px;
}
.goods .foods-wrapper .food-list .food-item .content {
flex: 1;
}
.goods .foods-wrapper .food-list .food-item .content .name {
font-size: 16px;
line-height: 21px;
color: #333333;
margin-bottom: 10px;
padding-right: 27px;
}
.goods .foods-wrapper .food-list .food-item .content .desc {
font-size: 10px;
line-height: 19px;
color: #bfbfbf;
margin-bottom: 8px;
/* 超出部分显示省略号*/
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.goods .foods-wrapper .food-list .food-item .content .extra {
font-size: 10px;
color: #bfbfbf;
margin-bottom: 7px;
}
.goods .foods-wrapper .food-list .food-item .content .extra .saled {
margin-right: 14px;
}
.goods .foods-wrapper .food-list .food-item .content .product {
height: 15px;
margin-bottom: 6px;
}
.goods .foods-wrapper .food-list .food-item .content .price {
font-size: 0;
}
.goods .foods-wrapper .food-list .food-item .content .price .text {
font-size: 14px;
color: #fb4e44;
}
.goods .foods-wrapper .food-list .food-item .content .price .unit {
font-size: 12px;
color: #bfbfbf;
}
商品数量控制组件
这里用了vue动画
cart-decrease类为商品数量减少结构。 使用指令v-show控制其显隐。有商品数量的时候会按照规定动画进行显示，反之则隐藏。
cart-count类为选中的商品数量。
cart-add类为商品数量增加结构。
通过vue全局api set进行第一次点击增加商品按钮时候的设置。
https://cn.vuejs.org/v2/api/#...
{{food.count}}
.cartcontrol {
font-size: 0;
}
.cartcontrol .cart-decrease {
display: inline-block;
width: 26px;
height: 26px;
font-size: 26px;
color: #b4b4b4;
}
.cartcontrol .cart-count {
display: inline-block;
width: 25px;
text-align: center;
font-size: 12px;
line-height: 26px;
vertical-align: top;
}
.cartcontrol .cart-add {
display: inline-block;
width: 26px;
height: 26px;
font-size: 26px;
color: #ffd161;
position: relative;
}
.cartcontrol .cart-add .bg {
width: 20px;
height: 20px;
border-radius: 50%;
background: black;
position: absolute;
left: 3px;
top: 3px;
z-index: -1;
}
.move-enter-active,
.move-leave-active {
transition: all 0.5s linear;
}
.move-enter,
.move-leave-to {
transform: translateX(20px) rotate(180deg);
}
购物车组件
我们现在创建shopcart购物车组件。
0}">
0}">
0}">
{{totalCount}}
￥{{totalPrice}}
0}">另需{{shipping_fee_tip}}
0}">{{payStr}}
感谢各位的阅读！关于“Vue商品控件与购物车联动效果怎么实现”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
网页名称：Vue商品控件与购物车联动效果怎么实现
文章链接：http://cxhlcq.com/article/ghcigp.html
-
在线咨询
微信咨询
电话咨询
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回顶部
重庆分公司
重庆分公司
