<script > export default { props:['books'], name: "booklist", components: {}, data() { return { drawer: false, form: { num: 1, }, nowBook:null, bookList:[], }; }, methods:{ addToCart(id){ let data={goodsId:id,num:this.form.num}; this.axios.post("shopCar/addToShopCar",this.qs.stringify(data)).then((res)=>{ if(res.data.code!=200) { this.$message({ message:res.data.msg, type:"error", }); } else { this.$message({ message:"加入成功", type:"success", }); } this.closeDrawer(); }) }, handleClose() { this.form.num=1; } } }; </script> <style> .bottom { margin-top: 13px; line-height: 12px; display: flex; justify-content: space-between; align-items: center; } .button { padding: 0; min-height: auto; } .image { width: 100%; min-height: 290px; max-height: 290px; display: block; } .el-card{ border-radius: 15px; } .bookBox{ background-color: white; margin-top: 20px; border-radius: 0 0 10px 10px; }

这是一个 Vue.js 组件的代码片段，包含了一个名为 "booklist" 的组件。组件中包含了一些数据和方法，其中 props 属性接收了一个名为 "books" 的参数，用于展示一组图书列表。组件中还使用了 ElementUI 组件库中的 el-card 组件和一些自定义的样式。方法中的 addToCart 方法用于将图书加入购物车中，handleClose 方法用于处理关闭弹出框时的逻辑。