【组件分享】商品列表组件-最佳实践

原创

已于 2025-01-22 16:42:12 修改 · 448 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2025-01-22 16:05:12 首次发布

商品列表组件

商品列表组件用于展示商品信息列表，支持多种布局方式和自定义配置。
在这里插入图片描述

基础用法

<template>
  <ProGoodsList :goods-list="goodsList" :layout="layout" @item-click="handleItemClick" />
</template>

<script setup>
import { ref } from 'vue';

const layout = ref('grid'); // 'grid' | 'list'
const goodsList = ref([
  {
    id: 1,
    name: '商品名称',
    price: 99.99,
    image: 'https://example.com/image.jpg',
    description: '商品描述',
  },
]);

const handleItemClick = (item) => {
  console.log('点击商品:', item);
};
</script>

API

Props

参数	说明	类型	默认值
goodsList	商品列表数据	Array	[]
layout	布局方式	String	‘grid’
showPrice	是否显示价格	Boolean	true
showDescription	是否显示描述	Boolean	true

Events

事件名称	说明	回调参数
item-click	点击商品项时触发	(item: Object)
load-more	加载更多时触发	-

Slots

名称	说明
item	自定义商品项内容
empty	自定义空状态内容

主题定制

组件支持通过 CSS 变量进行主题定制：

.pro-goods-list {
   
   
  --goods-item-bg: #ffffff;
  --goods-item-padding: 16px;
  --goods-item-radius: 8px;
  --goods-item-gap: 16px;
  --goods-price-color: #ff6b6b;
}

布局示例

网格布局

<template>
  <ProGoodsList :goods-list="goodsList" layout="grid" />
</template>

列表布局

<template>
  <ProGoodsList :goods-list="goodsList" layout="list" />
</template>

商品列表组件

<template>
  <view class="goods">
    <view v-if="list.length > 0" class="scroll-wrapper">
      <scroll-view
        :scroll-top="scrollTop"
        :scroll-y="scrollY"
        :class="scrollY && 'scroll-Y'"
        @scrolltolower="onScrolltolower"
      >
        <view class="goods-card-wrapper">
          <view
            v-for="(item, index) in list"
            :key="index"
            @click.stop="itemClick(item)"
            class="card-item"
          >
            <view class="pro-good-card">
              <view class="img-wrapper-A" :class="cardType === 'B' && 'img-wrapper-B'">
                <image class="pro-good-img" mode="widthFix" :src="item.picUrl" alt="" />
              </view>
              <view class="pro-good-info">
                <view class="first-title">
                  {
   
   {
   
    item.name }}
                </view>
                <view
                  v-if="item.goodsDes"
                  class="sec-title-A"
                  :class="cardType === 'B' && 'sec-title-A'"
                >
                  {
   
   {
   
    item.goodsDes }}
                </view>
                <view class="pro-good-price-A" :class="cardType === 'B' && 'pro-good-price-B'">
                  <view>
                    <text v-if="priceInfo.unit" class="price-unit">{
   
   {
   
    priceInfo.unit }}</text>