通用组件语法

附录

• ActionBtn：图标按钮组合组件
• CarItem：购物车单行组件
• Container：容器组件
• CouponTag：优惠劵标签组件
• Divider：分割线组件
• InputNumber：数字输入框组件
• SafeArea：安全区组件
• Section：块组件
• SpecRadio：规格单选框组件
• SpecRadioGroup：规格单选框组合
• GoodsCard: 商品卡片
• InfoCell：详细内容展示组件

案例

ActionBtn：图标按钮组合组件

截图

案例

<ActionBtn
  icon="edit"
  title="收藏"
  :size="10"
  :icon-size="14"
/>

参数

| 参数 | 说明 | 类型 | 默认 | | ------------- | ---------------- | -------------------------- | -------- | | direction | 可选项，排列方向 | 'horizontal' | 'vertical' | vertical | | selected | 可选项，选中状态 | boolean | - | | color | 可选项，颜色 | string | - | | selectedColor | 可选项，选中颜色 | string | - | | icon | 必选项，图标 | string | - | | iconSize | 可选项，图标大小 | number | 14 | | title | 可选项，标题 | string | - | | size | 可选项，大小 | number | 14 | | gutter | 可选项，间隔距离 | number | 4 |

事件

| 事件 | 说明 | 类型 | | ----- | -------- | ---------- | | click | 点击事件 | () => void |

CarItem：购物车单行组件

截图

案例

    <CarItem
      v-for="goods in records || []"
      :key="goods.goodsId"
      :check="carCheck(goods)"
      :thumb="goods.thumb"
      :title="goods.goodsName"
      :tag="goods.specifications"
      :price="goods.price"
      :amount="goods.amount"
      @check-change="checkChange($event, goods)"
      @amount-change="amountChange($event, goods)"
      @extra-click="extraClick"
    />

参数

| 参数 | 说明 | 类型 | 默认 | | ------ | ------------------ | ------- | ----- | | check | 可选项，选中状态 | boolean | false | | thumb | 必选项，商品缩略图 | string | - | | title | 必选项，商品标题 | string | - | | tag | 必选项，商品标签 | string | - | | price | 必选项，商品价格 | number | - | | amount | 必选项，商品数量 | number | - |

事件

| 事件 | 说明 | 类型 | | ------------ | --------------------------------------------- | ---------------------------------------- | | extraClick | 点击操作事件 (collection：收藏，delete：删除) | (type: 'collection' | 'delete') => void | | checkChange | 选中切换事件 | (state: boolean) => void | | amountChange | 数量改变事件 | (state: number) => void |

Container：容器组件

截图

案例

    <Container :gutter="[15, 10]">
      <GoodsCardHeader
        title="问大家"
        desc="(344)"
        arrow
        arrow-text="查看全部"
        @arrow-click="handleArrowClick"
      />
    </Container>

参数

| 参数 | 说明 | 类型 | 默认 | | ------ | ------------------------------------------------------------ | ------------------ | ---- | | gutter | 可选项，间隔距离，（内边距）第一参数horizontal，第二参数vertical | number | number[] | 0 |

Section：块组件

截图

案例

<Section :padding="[0, 0, 10, 0]">
  <GoodsCarousel :active="carouselActive" :items="carousels" />
</Section>
<Section :padding="[0, 10, 10, 10]">
  <GoodsInfoCard />
</Section>
<Section :padding="[0, 10, 10, 10]">
  <GoodsInfoGrid :items="data.cells" />
</Section>
<Section :padding="[0, 10, 10, 10]">
  <GoodsComment />
</Section>
<Section :padding="10">
  <GoodsAskFamily />
</Section>

参数

| 参数 | 说明 | 类型 | 默认 | | ------- | ------------------------------------- | ------------------ | ---- | | padding | 可选项，内边距，可缩写，与css效果一致 | number | number[] | - | | margin | 可选项，外边距，可缩写，与css效果一致 | number | number[] | - |

CouponTag：优惠劵标签组件

截图

案例

<CouponTag :price="8" size="mini" />
<CouponTag prefix="惠" :price="8" size="mini" />

参数

| 参数 | 说明 | 类型 | 默认 | | ------ | ------------ | ----------------- | ----- | | prefix | 可选项，前缀 | string | 劵 | | price | 必选项，价格 | number | - | | size | 可选项，尺寸 | 'mini' | 'small' | small |

Divider：分割线组件

截图

案例

<Divider title="商品详情" />

参数

| 参数 | 说明 | 类型 | 默认 | | ----- | ------------ | ------ | ---- | | title | 必选项，标题 | string | - |

SafeArea：安全区组件

截图

案例

<SafeArea position="both">
  ...
</SafeArea>

// 或者
<SafeArea position="bottom" />

参数

| 参数 | 说明 | 类型 | 默认 | | -------- | ------------------ | --------------------------- | ---- | | position | 可选项，安全区位置 | 'both' | 'top' | 'bottom' | both |

GoodsCard：商品卡片组件

截图

案例

<GoodsCard 
   v-for="item in goodsList"
   :thumb="item.url"
>
  <template #top>top</template>
  <template #center>content</template>
  <template #bottom>bottom</template>
</GoodsCard>

参数

| 参数 | 说明 | 类型 | 默认 | | ----- | ----------------------------------------- | -------- | -------- | | thumb | 必选项，图片路径 | string | - | | size | 可选项，图片大小。对应图片[width, height] | number[] | [88, 88] |

插槽

| slots | 说明 | | ------ | ---------------------- | | top | 对应截图案例中商品名称 | | center | 对应截图案例中商品数量 | | bottom | 对应截图案例中商品规格 |

InfoCell：详细内容展示组件

截图

案例

<InfoCell :list="list" :data="refundData" :bottom="'12px'" />

const list: listItem[] = [
  { label: '退款原因：', key: 'remark' },
  { label: '退款金额：', key: 'totalPrice', type: 'price' },
  { label: '申请时间：', key: 'time' },
  { label: '退款编号：', key: 'refundSn' },
];

const refundData = {
  remark: '多拍/拍错/不想要',
  totalPrice: '499.00',
  time: '2022-04-03  11:57:56',
  refundSn: '1654654646',
}

listItem

| 参数 | 说明 | 类型 | 默认 | | -------- | -------------------------------------- | -------- | ----- | | key | 必填项，后端对应的字段 | string | - | | label | 必填项，需要渲染的标题 | string | - | | template | 选填项，是否开启插槽 | boolean | false | | type | 选填项，需要特殊展示字段, 可以自行扩展 | itemType | - |

参数

| 参数 | 说明 | 类型 | 默认 | | ---------- | ---------------------- | ------------------- | -------- | | list | 必填项，需要渲染的内容 | listItem[] | - | | data | 必填项，后端返回的数据 | Record<string, any> | - | | labelColor | 选填项，label颜色 | string | #9A9A9A | | labelWidth | 选填项，label宽度 | string | 70px | | color | 选填项，颜色 | string | #9A9A9A | | bottom | 选填项，下边距 | string | 10px | | size | 选填项，字体大小 | string | 14px | | layout | 选填项，对齐方式 | start | end | start |

插槽

| slots | 说明 | | ----- | ------------------- | | [key] | 对应listItem中的key |