Meixioacomponent-next-mobile NPM

通用组件语法

附录

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：购物车单行组件

截图

car-item

案例

    <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

案例

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

参数

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

Section：块组件

截图

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：优惠劵标签组件

截图

coupon-tag

案例

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

参数

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

Divider：分割线组件

截图

divider

案例

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

参数

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

SafeArea：安全区组件

截图

divider

案例

<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