小兔鲜儿基础UI库

传智播客-广州-小兔鲜儿UI组件库,提供基础UI供学生使用

使用方式:

1. 使用 npm 安装

npm i xtxbase

2. 在项目 main.ts 中引进和使用

import XtxUI from 'xtxbase'
//  必须在组件实例化完成后才能使用
//  const app = createApp(App);
app.use(XtxUI);


// 或者不想全局引进，可以如下
import {
  XtxButton,
  XtxSkeleton
  // ...
} from 'xtxbase'

app.component('XtxButton', XtxButton);
app.component('XtxSkeleton', XtxSkeleton);

组件使用(简要介绍)

骨架屏

组件名称：XtxSkeleton

props

| 名称 | 类型 | 默认值 | | ------ | ------ | ------ | | width | Number | 100 | | height | Number | 60 | | bg | String | #ccc |

轮播图

组件名称：XtxSlider

props

| 名称 | 类型 | 默认值 | | -------- | ------- | ------ | | sliders | Array | [] | | autoPlay | Boolean | true |

图片预览组件

组件名称：XtxImageView

props

| 名称 | 类型 | 默认值 | | --------- | ----- | ------ | | imageList | Array | [] |

商品规格组件

组件名称：XtxGoodSku

props

| 名称 | 类型 | 默认值 | | ----- | ------ | ----------------------- | | goods | Object | { specs: [], skus: [] } |

events

| 名称 | 回调参数 | | ------ | ---------------------------------------- | | change | 完整的sku对象数据 （不完整时为空对象{}） |

按钮组件

组件名称：XtxButton

| 名称 | 类型 | 可选值 | 默认值 | | ---- | ------ | -------------------------- | ------- | | size | String | large/middle/small/mini | middle | | type | String | default/primary/plain/gray | default |