【Vue-cli】组件化实现购物车，包括单选按钮全选按钮联动
代码实例
App.vue
<template>
<div id="app">
<index></index>
</div>
</template>
<script>
// 引⼊主页index
import Index from'./pages/Index';
export default{
name:'App',
components:{
Index
}
};
</script>
<style>
*{
margin:0;
padding:0;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
color:#333333;
}
em{
font-style: normal;
}
</style>
Pages/Index.vue
<template>
<div id="wrap">
<s-header></s-header>
<s-main
:list="cartList"
@changestate="handleCheck"
@addnum="addNumber"
@reducenum="reduceNumber"
@delete="deleteItem"
>
</s-main>
<s-pay :list="cartList" @change="checkAll"></s-pay> <s-footer></s-footer>
</div>
</template>
<script>
// 引⼊头部⽂件, 主页⽂件, 底部⽂件
import SHeader from'./components/Header';
import SMain from'./components/Main';
import SPay from'./components/Pay';
import SFooter from'./components/Footer';
export default{
components:{
SHeader,
SMain,
SPay,
SFooter
},
data(){
return{
cartList:[
{
id:1,
img:'/static/images/product1.jpg',
name:'左右鞋店春夏爆款凉拖',
color:'粉',
size:'35',
price:149,
number:1,
checked:true
},
{
id:2,
img:'/static/images/product2.jpg',
name:'左右鞋店春夏爆款福利',
color:'⿊',
size:'35',
price:169,
number:1,
checked:true
},
{
id:3,
img:'/static/images/product3.jpg',
name:'左右鞋店春夏2021爆款男⼠包',
color:'⿊',
size:'XL',
price:499,
number:1,
checked:true
}
]
};
},
methods:{
handleCheck(id){
// console.log(id)
const selectedGood =this.cartList.find((item)=> item.id === id);      selectedGood.checked = selectedGood.checked;
// console.log(selectedGood.checked)
},
checkAll(state){
// console.log(state)
// 全选控制每⼀项单选
this.cartList.map((item)=>{
item.checked = state;
});
},
addNumber(id){
// console.log(id)
const selectedGood =this.cartList.find((item)=> item.id === id);      selectedGood.number++;
},
reduceNumber(id){
// console.log(id)
const selectedGood =this.cartList.find((item)=> item.id === id);
if(selectedGood.number >1) selectedGood.number--;
},
deleteItem(id){
if(confirm('确定要删除吗?')){
// 删除id对应的数据
const index =this.cartList.findIndex((item)=> item.id === id);
this.cartList.splice(index,1);
}
}
}
};
</script>
<style scoped>
#wrap {
max-width:750px;
width:7.5rem;
height:15rem;
border:1px solid #333;
margin:0 auto;
}
</style>
Pages/Components/Header.vue
<template>
<div class="header">购物车</div>
</template>
<script>
export default{};
</script>
<style scoped>
.header {
width:100%;
height:1rem;
background: #ff5e46;
color: #ffffff;
font:0.45rem/1rem "微软雅⿊";
text-align: center;
}
</style>
Pages/Components/Main.vue
<template>
<div class="main">
<ul class="list">
<li v-for="item of list":key="item.id":item="item">
<input
type="checkbox"
id="checkbox"
v-model="item.checked"
@change="changeState(item.id)"
/>
<label for="checkbox"></label>
<div class="img">
<img :src="item.img"/>
</div>
<div class="desc">
<h4>{{ item.name }}</h4>
<div class="spec">
<span>{{ lor }}</span>
<span>{{ item.size }}</span>
<span class="iconfont icon-icon1"></span>
</div>
<p class="price">￥{{ Fixed(2)}}</p>
<div class="shoppingnum">
<span
class="iconfont icon-jian minus"
class="iconfont icon-jian minus"
@click="reduceNumber(item.id)"
></span>
<span class="num">{{ item.number }}</span>
<span
class="iconfont icon-hao plus"
@click="addNumber(item.id)"
></span>
</div>
</div>
<div class="del" @click="deleteItem(item.id)">删除</div> </li>
</ul>
</div>
</template>
<script>
export default{
// 接收cartList属性
props:{
list:{
type: Array,
required:true
}
},
methods:{
changeState(id){
// console.log(id)
this.$emit('changestate', id);
},
// 通知⽗组件修改处理
addNumber(id){
/
/ console.log(id)
this.$emit('addnum', id);
},
reduceNumber(id){
this.$emit('reducenum', id);
},
deleteItem(id){
this.$emit('delete', id);
}
},
// ⽣命周期
mounted(){
console.log(this.list);
}
};
</script>
<style scoped>
.list li {
width:7.5rem;
height:2.4rem;
display: flex;
align-items: center;
justify-content: space-between;
}
li > input[type="checkbox"]{
width:0.25rem;
height:0.25rem;
outline: none;
-webkit-appearance: none;/*清除默认样式 */
border:0.01rem solid #ff5e46;
border-radius:50%;
网页购物车代码margin:00.2rem 00.2rem;
}

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