1.0.0 • Published 3 years ago
xtxbase v1.0.0
小兔鲜儿基础UI库
传智播客-广州-小兔鲜儿UI组件库,提供基础UI供学生使用
使用方式:
- 使用 npm 安装
npm i xtxbase- 在项目 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 |
1.0.0
3 years ago