Vue商城项目(三)

今天主要完成的首页上一个组件的封装
在这里插入图片描述
主要完成的就是最下方的那个组件的封装，这个内容，我并没有再重复写以便，主要的就是放了一张图片，然后点击跳转一个链接，仅此而已，虽然这么简单，但是也不能直接写在首页里面，所以也简单做了一个封装！
在home文件夹下新建了一个FeatureView.vue文件用于它的封装
整体的思路非常简单，就是外层套了一个a标签链接，里面放了一个span放图片，虽然很简单，但也是一个独立的模块，所以也做了个封装
FeatureView.vue

<template>
  <div class="feature">
    <a href="https://act.mogujie.com/zzlx67">
      <img src="~assets/img/home/recommend_bg.jpg" alt="">
    </a>
  </div>
</template>

<script>
export default {
  name:"FeatureView",
  data(){
    return {
    }
  },
  methods:{},
  props:{},
  components:{},
  watch:{},
  computed:{},
  created(){},
  mounted(){}
}
</script>
<style scoped>
  .feature img{
    width: 100%;
  }
</style>

然后在home.vue中注册使用就可以了。

接着又对一个首页的控制栏做了一个封装
在这里插入图片描述

这么一个东西看似很简单，但是不可能只在首页中进行使用，也会在分类中进行使用，所以也做了一个封装！
但是这个组件很可能只在这一个项目中进行使用，在其他项目中可能就不再使用了，所以在components文件夹下的content文件夹中建立一个vue文件，这样布局文件而并不是随意放置文件，会为后期的维护节省很多时间，不然后期可能会相当头疼！
新建一个tabControl文件夹，里面放了一个TabControl.vue文件

TabControl.vue

<template>
  <div class="tab-control">
    <div v-for="(item,index) in titles" :key="item.background" 
          class="tab-control-item" :class="{active:index===currentIndex}" @click="itemClick(index)">
      <span>{{item}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name:"TabControl",
  data(){
    return {
      currentIndex:0,
    }
  },
  methods:{
    itemClick(index){
      this.currentIndex = index;
    }
  },
  props:{
    titles:{
      type:Array,
      default(){
        return [];
      }
    }
  },
  components:{},
  watch:{},
  computed:{},
  created(){},
  mounted(){}
}
</script>
<style scoped>
  .tab-control{
    display: flex;
    font-size: 14px;
    text-align: center;
    background-color: rgb(222, 241, 228);
  }

  .tab-control-item{
    flex: 1;
    height: 40px;
    line-height: 40px;
  }
  .tab-control-item span{
    padding: 5px;
  }

  .active{
    color: var(--color-high-text);
  }
  .active span{
    border-bottom: 3px solid var(--color-tint);
  }
</style>

在这里我在props中设置了一个titles，是一个数组！你可能会有所疑惑为社么不用插槽呢？这个我考虑了一下，主要是我在做这个的时候发现其实只有文字不一样，而不像导航栏那样图标和数量都不一样，所以我在props中传入了一个数组，这样只需要用户传入文字就可以了，而没有必要去使用插槽了！这里我同样采用了flex布局，使得他们均匀分布，简单调整了一下样式！
当我点击到哪一个样式的时候，我希望文字变成红色，就是说，点击流行的时候，流行变成红色，点击精选的时候，精选变成红色，所以设置了
“<div v-for="(item,index) in titles" :key=“item.background”
class=“tab-control-item” :class="{active:index===currentIndex}" @click=“itemClick(index)”>”
data中currentIndex初始值为0，就是下标值为0，这样我们只需要一个ItemClick这个函数来传入点击的index即可，然后动态绑定了class，点击哪一个标题时，哪一个就变红！

.tab-control{
    /* 会根据top的值，自动将position的值改为fixed 移动端适用很好，但是ie这些就不兼容了 */
    position: sticky;
    top: 44px;
  }

我这里为什么要这么设置一下样式呢？
看下面的样式，当我们向下滑动的时候，我希望“流行，新款，精选”可以置顶
在这里插入图片描述

在这里插入图片描述
所以我就设置了这么个属性，当top达到44px的时候，position的值会自动改为fixed，当然这么容易就实现了就会产生很难顶的兼容性问题，兼容霸王IE，毫无疑问，IE是不支持这个属性的，但是就不专门针对它做适配了！
接着下面就需要展示“流行，新款，精选”里面的内容了！
这个里面的数据我们是需要从后端拿到的，这里面的数据当然是非常复杂的!
所以进行了简单的设计，goods里面中保存了三类数据（流行，新款，精选）goods中保留了三个对象，‘pop' 'news','sell',在每一个对象中有page，默认为1，表示第一页，有一个list数组用于放数据

data(){
    return {
      goods:{
        'pop':{page:0,list:[]},
        'news':{page:0,list:[]},
        'sellnp':{page:0,list:[]},
      }
    }
  },

每个对象的数据都可能是不同的，所以需要每个都单独进行设置！

猜你喜欢