前端实习日记D7

今日做了轮播图和购物车

实现遇到的困难 

安装swiper，网上copy的代码有误，没有下less，导致lang="less"无法使用，下载不成功

自己新建的vue项目，配置啥的有点乱，改了main.js和index.html

在v-for中{pic: 'src/assets/img1.jpeg '} 才可以，路径不能用..('../assets/img1.jpeg'),这是因为:src是动态渲染和<img src="../assets/img1.jpeg">静态不太一样 

轮播图的组件最后实现如下：

<template>
    <!-- 轮播图 -->
    <div id="swipercom">
        <div class="swiper-container" id="swiperIndex">
            <div class="swiper-wrapper">

                <div class="swiper-slide" v-for="(item,i) in imgs" :key="i">
                    <img :src="item.pic" alt="">
                </div>
                <!-- <img src="../assets/img1.jpeg" alt=""> -->
            </div>
            //换页器
            <div class="swiper-pagination">

            </div>
            //前进后退
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            //滚动条
            <div class="swiper-scrollbar"></div>
        </div>
    </div>
</template>

<script>
// import 'swiper/less/mixins.less'
    import 'swiper/css/swiper.min.css'  //引入swiper样式
    import Swiper from 'swiper';	//引入swiper
    export default {
        name: "swiper",
        data(){
            return{
                imgs:[
                    // {pic:'../assets/img1.jpeg'},
                    // {pic:import('../assets/img2.jpeg')},
                    // {pic:import('../assets/img3.jpeg')}
                    { pic: 'src/assets/img1.jpeg '},  
                    { pic: 'src/assets/img2.jpeg' },  
                    { pic: 'src/assets/img3.jpeg' }  
                ]
            }
        },
        mounted() {
                var mySwiper = new Swiper('#swiperIndex', {  
                loop: true,  
                pagination: {  
                    el: '.swiper-pagination',  
                    clickable: true  
                },  
                navigation: {  
                    nextEl: '.swiper-button-next',  
                    prevEl: '.swiper-button-prev',  
                },  
                scrollbar: {  
                    el: '.swiper-scrollbar',  
                },  
                slidesPerView: 'auto', // 根据需要设置，如果你想要自动调整宽度  
                // 如果需要动态内容，确保在 Swiper 初始化前 DOM 已完全渲染  
                observer: true,  
                observeParents: true  
            });              
        }

    }
</script>

<style>
#swipercom {  
    width: 100%; /* 或者使用具体的像素值，但考虑到响应式，使用百分比更好 */  
    max-width: 47.5rem; /* 如果需要限制最大宽度 */  
    margin: auto; /* 居中显示 */  
}  
  
.swiper-container {  
    width: 100%; /* 宽度100%以适应父容器 */  
    height: 32.6rem;  
    border-radius: 0.1rem;  
    overflow: hidden; /* 确保超出容器的部分不会显示 */  
}  
  
.swiper-slide img {  
    width: 100%; /* 宽度100%以填满幻灯片 */  
    /* 移除 width: 700px; 这一行，因为它会覆盖上面的 width: 100%; */  
    height: auto; /* 保持图片原始宽高比 */  
    display: block; /* 移除图片下方的默认间隙 */  
    object-fit: cover; /* 确保图片覆盖整个幻灯片区域，可能需要根据需要调整 */  
}  
  
.swiper-pagination-bullet-active {  
    background-color: orangered; /* 激活的分页器颜色 */  
    opacity: 1; /* 确保激活的分页器是可见的（如果Swiper默认设置了透明度） */  
}  
  
/* 可选：添加一些额外的样式来美化分页器和按钮 */  
.swiper-pagination-bullet {  
    width: 10px;  
    height: 10px;  
    background-color: #fff; /* 分页器的默认颜色 */  
    opacity: 0.7; /* 分页器的透明度 */  
    border-radius: 50%; /* 圆形分页器 */  
}  
  
.swiper-button-next, .swiper-button-prev {  
    background-image: none; /* 移除默认的背景图片 */  
    color: #fff; /* 按钮文本颜色（如果使用了文本）*/  
    background-color: rgba(0, 0, 0, 0.5); /* 按钮背景颜色，半透明黑色 */  
    border-radius: 50%; /* 圆形按钮 */  
    width: 30px; /* 按钮宽度 */  
    height: 30px; /* 按钮高度 */  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    /* 如果需要图标，可以使用伪元素或字体图标库 */  
}  
  
.swiper-button-next::after {  
    content: '>'; /* 示例文本，实际使用中可能需要替换为图标 */  
    font-size: 16px; /* 图标或文本大小 */  
}  
  
.swiper-button-prev::after {  
    content: '<'; /* 示例文本，实际使用中可能需要替换为图标 */  
    font-size: 16px; /* 图标或文本大小 */  
}
</style>

购物车：根据黑马

// 购物车
<template>
  <div class="cart-container">
    <div  class="cart-list">
      <table>
        <td></td>
        <td>商品</td>
        <td>价格</td>
        <td>数量</td>
        <td>总价</td>
        <td>操作</td>        
        <tr v-for="(item,index) in cartList" :key="item.id">
          <td><input type="checkbox" v-model="item.isCheck"></td>
          <td><div >{{ item.name }}</div></td>
          <td><div>{{ item.price.toFixed(2) }}</div></td>
          <td>
          <button @click="change(index,-1)" :disabled="item.num<=1">-</button>
          <!-- disabled="disabled"  -->
          <div>{{ item.num }}</div>
          <button @click="change(index,1)" >+</button>          
          </td>
          <td>{{ item.num*item.price }}</td>
          <td><button @click="del(item.id)">删除</button></td>
        </tr>       
      </table>
      <div><input type="checkbox" v-model="isAll">全选</div>
      <div>选中数量：{{ totalcount }}</div>
      <div>总金额:{{ totalprice }}</div>
    </div>
  </div>
</template>

<script>
  export default{
    name:'gowuche',
    data(){
      return{
          cartList: [  
            { id: 1, isCheck: false, name: '苹果', num: 2, price: 5.99 },  
            { id: 2, isCheck: true, name: '香蕉', num: 5, price: 2.49 },  
            { id: 3, isCheck: false, name: '橙子', num: 3, price: 3.99 },  
            { id: 4, isCheck: true, name: '葡萄', num: 1, price: 12.99 },  
            { id: 5, isCheck: false, name: '西瓜', num: 1, price: 8.99 }  
          ]  
      }
    },
    methods:{
      change(index,flag){
        if(this.cartList[index].num+flag>0){
          this.cartList[index].num+=flag;
        }
      },
      del(index){
        this. cartList=this. cartList.filter(item => item.id!=index)
      },

    },
    computed:{
      isAll:{
        get(){
          return this.cartList.every(item => item.isCheck)
        },
        set(value){
          return this. cartList.forEach(item => item.isCheck=value)
        }      
      },
        totalcount(){
          return this.cartList.reduce((sum,item)=>{
            if(item.isCheck) return sum + item.num
            else return sum
          },0)
      },
        totalprice(){
          return this.cartList.reduce((sump,item)=>{
            if(item.isCheck) return sump+item.num*item.price
            else return sump
          },0)
      },
    }
  }
</script>

<style scoped>
.cart-list table {  
  width: 100%;  
  border-collapse: collapse;  
}  
  
.cart-list td {  
  border: 1px solid #ccc;  
  padding: 8px;  
  width:50px;
  text-align: center;  
}  
</style>

怎么实现在主页面中点击相关链接跳转到对应组件的页面中：

要用到路由。明天解决