Vue项目实战六——热销推荐组件开发

时间:2019-02-19
本文章向大家介绍Vue项目实战六——热销推荐组件开发,主要包括Vue项目实战六——热销推荐组件开发使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

新建recommend组件,代码部分

注意点,在我们使用ellipsis()函数样式时,超出范围的字不会出现省略号,此时需要在item-info中加入min-width: 0,保证内容不超出外层容器,才会显示省略号

<template>
  <div>
    <div class="title">
      热销推荐
    </div>
    <ul>
      <li class="item" v-for="item of itemList" :key="item.id">
        <div class="item-img-wrapper">
          <img class="item-img" :src="item.imgUrl" :alt="item.title">
        </div>
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
          <button class="item-button">查看详情</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  data: function () {
    return {
      itemList: [{
        id: '0001',
        imgUrl: 'http://img1.qunarzz.com/sight/p0/1810/cc/cc47164357acbeb5a3.water.jpg_200x200_151f0405.jpg',
        title: '杭州云曼温泉',
        desc: '1127条评论'
      },
      {
        id: '0002',
        imgUrl: 'http://img1.qunarzz.com/sight/p0/1810/cc/cc47164357acbeb5a3.water.jpg_200x200_151f0405.jpg',
        title: '杭州云曼温泉',
        desc: '1127条评论'
      },
      {
        id: '0003',
        imgUrl: 'http://img1.qunarzz.com/sight/p0/1810/cc/cc47164357acbeb5a3.water.jpg_200x200_151f0405.jpg',
        title: '杭州云曼温泉',
        desc: '1127条评论'
      }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "~styles/mixins.styl"
  .title
    margin-top: 0.2rem
    height: 0.8rem
    line-height: 0.8rem
    background-color: #eee
  .item
    overflow: hidden
    display: flex
    height: 2.4rem
    //background-color: red
    .item-img
      width: 2.2rem
      height: 2.2rem
      padding: 0.1rem
    .item-info
      flex: 1
      box-sizing: border-box
      margin: .2rem
      min-width: 0  //保证内容不超出外层容器
      //background-color: green
      .item-title
        margin-top: .2rem
        font-size: .32rem
        line-height: .44rem
        ellipsis()
      .item-desc
        font-size: .26rem
        margin-top: .2rem
        ellipsis()
      .item-button
        margin-top: .2rem
        background-color: yellow
        border-radius: .1rem
        font-size: .26rem
        width: 1.2rem
        height: .45rem

</style>

最终效果