创建两个组件

home-categroy.vue 分类菜单 home-banner.vue 轮播图

  1. <template>
  2.   <div class="home-category">
  3.     <ul class="menu">
  4.       <li v-for="item in list" :key="item.id">
  5.         <RouterLink to="/">{{item.name}}</RouterLink>
  7.          <!--
  8.           v-for 和 v-if 不能一起用
  9.          -->
  10.         <template v-if="item.children.length > 0">
  11.           <RouterLink v-for="i in item.children" :key="i.id" to="/">{{i.name}}</RouterLink>
  12.         </template>
  13.         <!-- 弹层layer位置 -->
  14.       </li>
  15.     </ul>
  16.   </div>
  17. </template>
  19. <script>
  20. // 数据：使用的vuex category中的数据 只不过需要把chilren中的前俩项数据筛选出来
  21. // 基于某些现有的响应式数据经过一定的计算得到新的数据 -> 计算属性
  22. import { computed } from 'vue'
  23. import { useStore } from 'vuex'
  24. export default {
  25.   name: 'HomeCategory',
  26.   setup () {
  27.     const store = useStore()
  28.     const list = computed(() => {
  29.       // 基于vuex中的数据  截取children中的前俩项
  30.       // 基于一个数组 针对于数据的每一项都做处理 然后返回一个全新的数组 map
  31.       return store.state.category.list.map((item) => {
  32.         return {
  33.           id: item.id,
  34.           name: item.name,
  35.           children: item.children.slice(0, 2),
  36.           goods: item.goods
  37.         }
  38.       })
  39.     })
  40.     return {
  41.       list
  42.     }
  43.   }
  44. }
  45. </script>
  46. <style scoped lang='less'>
  47. .home-category {
  48.   width: 250px;
  49.   height: 500px;
  50.   background: rgba(0, 0, 0, 0.8);
  51.   position: relative;
  52.   z-index: 99;
  53.   .menu {
  54.     li {
  55.       padding-left: 40px;
  56.       height: 55px;
  57.       line-height: 55px;
  58.       &:hover {
  59.         background: @xtxColor;
  60.       }
  61.       a {
  62.         margin-right: 4px;
  63.         color: #fff;
  64.         &:first-child {
  65.           font-size: 16px;
  66.         }
  67.       }
  68.       .layer {
  69.         width: 990px;
  70.         height: 500px;
  71.         background: rgba(255, 255, 255, 1);
  72.         position: absolute;
  73.         left: 250px;
  74.         top: 0;
  75.         display: none;
  76.         padding: 0 15px;
  77.         h4 {
  78.           font-size: 20px;
  79.           font-weight: normal;
  80.           line-height: 80px;
  81.           small {
  82.             font-size: 16px;
  83.             color: #666;
  84.           }
  85.         }
  86.         ul {
  87.           display: flex;
  88.           flex-wrap: wrap;
  89.           li {
  90.             width: 310px;
  91.             height: 120px;
  92.             margin-right: 15px;
  93.             margin-bottom: 15px;
  94.             border: 1px solid #eee;
  95.             border-radius: 4px;
  96.             background: #fff;
  97.             &:nth-child(3n) {
  98.               margin-right: 0;
  99.             }
  100.             a {
  101.               display: flex;
  102.               width: 100%;
  103.               height: 100%;
  104.               align-items: center;
  105.               padding: 10px;
  106.               &:hover {
  107.                 background: #e3f9f4;
  108.               }
  109.               img {
  110.                 width: 95px;
  111.                 height: 95px;
  112.               }
  113.               .info {
  114.                 padding-left: 10px;
  115.                 line-height: 24px;
  116.                 overflow: hidden;
  117.                 .name {
  118.                   font-size: 16px;
  119.                   color: #666;
  120.                 }
  121.                 .desc {
  122.                   color: #999;
  123.                 }
  124.                 .price {
  125.                   font-size: 22px;
  126.                   color: @priceColor;
  127.                   i {
  128.                     font-size: 16px;
  129.                   }
  130.                 }
  131.               }
  132.             }
  133.           }
  134.         }
  135.       }
  136.       &:hover {
  137.         .layer {
  138.           display: block;
  139.         }
  140.       }
  141.     }
  142.   }
  143. }
  144. </style>
  1. <template>
  2.   <div class="home-banner">
  3.     banner
  4.   </div>
  5. </template>
  7. <script>
  8. export default {
  9.   name: 'HomeBanner'
  10. }
  11. </script>
  13. <style scoped lang='less'>
  14. .home-banner {
  15.   width: 1240px;
  16.   height: 500px;
  17.   position: absolute;
  18.   left: 0;
  19.   top: 0;
  20.   z-index: 98;
  21. }
  22. </style>

导入首页

  1. <template>
  2.   <div class="page-home">
  3.     <div class="home-entry">
  4.       <div class="container">
  5.         <!-- 左侧分类 -->
  6.         <HomeCategory />
  7.         <!-- banner轮播图 -->
  8.         <HomeBanner/>
  9.       </div>
  10.     </div>
  11.   </div>
  12. </template>
  14. <script>
  15. import HomeBanner from './components/home-banner.vue'
  16. import HomeCategory from './components/home-categroy.vue'
  17. export default {
  18.   name: 'PageHome',
  19.   components: {
  20.     HomeBanner,
  21.     HomeCategory
  22.   }
  24. }
  25. </script>
  27. <style>
  29. </style>

分类

分类弹层组件

  1. <<!-- 弹层layer位置 -->
  2. <div class="layer">
  3.     <h4>分类推荐 <small>根据您的购买或浏览记录推荐</small></h4>
  4.     <ul>
  5.       <li v-for="i in item.goods" :key="i.id">
  6.         <RouterLink to="/">
  7.           <img :src="i.picture" alt="" />
  8.           <div class="info">
  9.             <p class="name ellipsis-2">
  10.               {{ i.name }}
  11.             </p>
  12.             <p class="desc ellipsis">{{ i.desc }}</p>
  13.             <p class="price"><i>¥</i>{{ i.price }}</p>
  14.           </div>
  15.         </RouterLink>
  16.       </li>
  17.     </ul>
  18. </div>

loading效果

骨架屏组件

  1. <template>
  2.   <!-- 决定组件的宽高 -->
  3.   <div class="xtx-skeleton shan" :style="{ width: width + 'px', height: height + 'px' }">
  4.     <!-- 决定组件的背景色 -->
  5.     <div class="block" :style="{ backgroundColor: bg}"></div>
  6.   </div>
  7. </template>
  8. <script>
  9. export default {
  10.   name: 'XtxSkeleton',
  11.   props: {
  12.     // 宽度定制
  13.     width: {
  14.       type: Number,
  15.       default: 100
  16.     },
  17.     // 高度定制
  18.     height: {
  19.       type: Number,
  20.       default: 60
  21.     },
  22.     // 背景颜色定制
  23.     bg: {
  24.       type: String,
  25.       default: '#ccc'
  26.     }
  27.   }
  28. }
  29. </script>
  30. <style scoped lang="less">
  31. .xtx-skeleton {
  32.   display: inline-block;
  33.   position: relative;
  34.   overflow: hidden;
  35.   vertical-align: middle;
  36.   .block {
  37.     width: 100%;
  38.     height: 100%;
  39.     border-radius: 2px;
  40.   }
  41. }
  42. .shan {
  43.   &::after {
  44.     content: "";
  45.     position: absolute;
  46.     animation: shan 1.5s ease 0s infinite;
  47.     top: 0;
  48.     width: 50%;
  49.     height: 100%;
  50.     background: linear-gradient(
  51.       to left,
  52.       rgba(255, 255, 255, 0) 0,
  53.       rgba(255, 255, 255, 0.3) 50%,
  54.       rgba(255, 255, 255, 0) 100%
  55.     );
  56.     transform: skewX(-45deg);
  57.   }
  58. }
  59. @keyframes shan {
  60.   0% {
  61.     left: -100%;
  62.   }
  63.   100% {
  64.     left: 120%;
  65.   }
  66. }
  67. </style>

封装插件

  1. import Skeleton from './Skeleton/index.vue'
  2. export default {
  3.   install (app) {
  4.     app.component('Skeleton', Skeleton)
  5.   }
  6. }
  1. // 插件
  2. import ComponentsPlugin from '@/components/index'
  4. const app = createApp(App)
  5. app.use(ComponentsPlugin).use(store).use(router).mount('#app')

轮播图

  1. <template>
  2. <div class="box" style="height: 500px">
  3.   <div class="xtx-slider" @mouseenter="clearTimer" @mouseleave="startTimer">
  4.     <!-- 图片列表 -->
  5.     <ul class="slider-body" >
  6.       <!--
  7.           fade: 当fade类名存在 当前图片就显示 不存在就不显示
  8.          -->
  9.       <li
  10.           class="slider-item"
  11.           v-for="(item, i) in sliders"
  12.           :key="i"
  13.           :class="{ fade: curIndex === i }"
  14.           >
  15.         <img :src="item.imgUrl" alt="" />
  16.   </li>
  17.   </ul>
  18.     <!-- 圆圈切换按钮 -->
  19.     <div class="slider-indicator">
  20.       <span
  21.             v-for="(item, index) in sliders"
  22.             :key="index"
  23.             @click="curIndex = index"
  24.             :class="{ active: curIndex === index }"
  25.             ></span>
  26.   </div>
  27.   </div>
  28.   </div>
  29. </template>
  31. <script>
  32.   /**
  33.   目标：点击圆圈按钮 实现对应图片的切换
  34.   思路：
  35.   1. 图片和圆圈按钮数量是一样的 下标值是对应的
  36.   2. 记录一下当前点击的是哪一项
  37.   3. 需要根据记录下来的下标值 去配合:class 控制fade这个类名是否应该显示
  38.   */
  40.   /**
  41.   目标：图片的自动轮播功能
  42.   思路：哪个数据变化决定了图片切换？ 从之前手动修改curIndex的值 变成一个自动修改 每隔几秒修改一下
  43.   计时器  setInterval
  45.   */
  47.   /**
  48.   目标：鼠标移入暂停播放 鼠标移除再次开启
  49.   思路：暂停 - 清除定时器  定时器id  开启 - 再执行一次定时器
  51.   */
  52.   import { onMounted, onUnmounted, ref } from 'vue'
  53.   export default {
  54.     name: 'XtxSlider',
  55.     props: {
  56.       // 数据列表
  57.       sliders: {
  58.         type: Array,
  59.         default: () => {
  60.           return []
  61.         }
  62.       },
  63.       autoPlay: {
  64.         type: Boolean,
  65.         default: true
  66.       }
  67.     },
  68.     setup (props) {
  69.       const curIndex = ref(0)
  70.       // 声明一个存放定时器的数据
  71.       const timer = ref(null)
  72.       function clearTimer () {
  73.         clearInterval(timer.value)
  74.       }
  75.       function startTimer () {
  76.         // 开启定时器  每隔2s中修改一下curIndex的值
  77.         initLoop()
  78.       }
  80.       function initLoop () {
  81.         if (!props.autoPlay) {
  82.           return false
  83.         }
  84.         // 开启定时器  每隔2s中修改一下curIndex的值
  85.         timer.value = window.setInterval(() => {
  86.           // 最大能到多大
  87.           // 图片总数为4 length - 1为3 只要我发现你大于3了
  88.           // 我就会重新赋值为 0 ,永远不能到达4 最大只能等于3
  89.           curIndex.value++
  90.           if (curIndex.value > props.sliders.length - 1) {
  91.             curIndex.value = 0
  92.           }
  93.         }, 2000)
  94.       }
  95.       onMounted(() => {
  96.         initLoop()
  97.       })
  98.       onUnmounted(() => {
  99.         // 清理工作
  100.         clearInterval(timer.value)
  101.       })
  102.       return {
  103.         curIndex,
  104.         clearTimer,
  105.         startTimer
  106.       }
  107.     }
  108.   }
  109. </script>
  111. <style scoped lang='less'>
  112.   .xtx-slider {
  113.     width: 100%;
  114.     height: 100%;
  115.     min-width: 300px;
  116.     min-height: 150px;
  117.     position: relative;
  118.     .slider {
  119.       &-body {
  120.         width: 100%;
  121.         height: 100%;
  122.       }
  123.       &-item {
  124.         width: 100%;
  125.         height: 100%;
  126.         position: absolute;
  127.         left: 0;
  128.         top: 0;
  129.         opacity: 0;
  130.         transition: opacity 0.5s linear;
  131.         &.fade {
  132.           opacity: 1;
  133.           z-index: 1;
  134.         }
  135.         img {
  136.           width: 100%;
  137.           height: 100%;
  138.         }
  139.       }
  140.       &-indicator {
  141.         position: absolute;
  142.         left: 0;
  143.         bottom: 20px;
  144.         z-index: 2;
  145.         width: 100%;
  146.         text-align: center;
  147.         span {
  148.           display: inline-block;
  149.           width: 12px;
  150.           height: 12px;
  151.           background: rgba(0, 0, 0, 0.2);
  152.           border-radius: 50%;
  153.           cursor: pointer;
  154.           ~ span {
  155.             margin-left: 12px;
  156.           }
  157.           &.active {
  158.             background: #fff;
  159.           }
  160.         }
  161.       }
  162.       &-btn {
  163.         width: 44px;
  164.         height: 44px;
  165.         background: rgba(0, 0, 0, 0.2);
  166.         color: #fff;
  167.         border-radius: 50%;
  168.         position: absolute;
  169.         top: 228px;
  170.         z-index: 2;
  171.         text-align: center;
  172.         line-height: 44px;
  173.         opacity: 0;
  174.         transition: all 0.5s;
  175.         &.prev {
  176.           left: 20px;
  177.         }
  178.         &.next {
  179.           right: 20px;
  180.         }
  181.       }
  182.     }
  183.     &:hover {
  184.       .slider-btn {
  185.         opacity: 1;
  186.       }
  187.     }
  188.   }
  189. </style>

注册后使用

数据懒加载

computed
当依赖项不变的时候会有缓存
不支持异步的操作
不能直接改变值
改值get set

watch
不支持缓存
支持异步操作
属性 deep 深度监听
使用场景