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