小兔鲜UI组件库,基于Vue3开发,服务于电商平台小兔鲜儿。
基于:vue3 @vueuse/core axios vue-router less less-loader
yarn add erabbit-ui
<!-- index.html -->
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
import { createApp } from 'vue'
import App from './App.vue'
import ErabbitUI from 'erabbit-ui'
import 'erabbit-ui/packages/theme/index.less'
createApp(App).use(ErabbitUI).mount('#app')
xtx-bread
xtx-bread-item
props
名称 | 类型 | 默认值 |
---|---|---|
to | String, Object | 无 |
与router-link的to属性一致
xtx-button
名称 | 类型 | 可选值 | 默认值 |
---|---|---|---|
size | String | large/middle/small/mini | middle |
type | String | default/primary/plain/gray | default |
xtx-carousel
props
名称 | 类型 | 默认值 |
---|---|---|
sliders | Array | [] |
autoPlay | Boolean | false |
duration | Number | 3000毫秒 |
:sliders="[{imgUrl:'图片地址'}]"
xtx-checkbox
props
名称 | 类型 | 默认值 |
---|---|---|
v-model | Boolean | false |
xtx-city
props
名称 | 类型 | 默认值 |
---|---|---|
placeholder | String | '' |
fullLocaton | String | '' |
events
名称 | 触发时机 | 默认参 |
---|---|---|
change | 选择完成 | { fullLocaton, provinceCode, provinceName, cityCode, cityName, countyCode, countyName } |
xtx-dialog
props
名称 | 类型 | 默认值 |
---|---|---|
v-model:visible | Boolean | false |
组件名称:xtx-image-view
props
名称 | 类型 | 默认值 |
---|---|---|
images | Array | [] |
[] 图片数组
xtx-infinite-loading
props
名称 | 类型 | 默认值 |
---|---|---|
loading 加载中 | Boolean | false |
finished 全部数据加载完成 | Boolean | false |
events
名称 | 触发时机 | 默认参 |
---|---|---|
infinite | 进入可视区 | 无 |
xtx-more
props
名称 | 类型 | 默认值 |
---|---|---|
to | String, Object | 无 |
与router-link的to属性一致
xtx-numbox
props
名称 | 类型 | 默认值 |
---|---|---|
label | String | '' |
v-model | Number | 0 |
min | Number | 0 |
max | Number | 10 |
xtx-pagination
props
名称 | 类型 | 默认值 |
---|---|---|
total 总条数 | Number | 100 |
pageSize 每页条数 | Number | 10 |
currentPage 当前第几页 | Number | 1 |
events
名称 | 触发时机 | 默认参 |
---|---|---|
current-change | 改变分页页码 | 点击的页码 |
xtx-skeleton
props
名称 | 类型 | 默认值 |
---|---|---|
bg 背景 | Number | #efefef |
width 宽 | String | 100px |
height 高 | String | 100px |
animated 闪动画 | Boolean | false |
props
名称 | 类型 | 默认值 |
---|---|---|
goods | Object | { specs: [], skus: [] } |
skuId | String | '' |
events
名称 | 回调参数 |
---|---|
change | 完整的sku对象数据 (不完整时为空对象{}) |
{skuId,price,oldPrice,inventory,specsText}
xtx-steps
props
名称 | 类型 | 默认值 |
---|---|---|
active 当前到第几步 | Number | 1 |
xtx-steps-item
props
名称 | 类型 | 默认值 |
---|---|---|
title 标题 | String | '' |
desc 说明 | String | '' |
xtx-tabs
props
名称 | 类型 | 默认值 |
---|---|---|
v-model | String,Number | '' |
events
名称 | 触发时机 | 默认值 |
---|---|---|
tab-click | 点击选项卡 | { name, index } |
{name:'选项卡名称',index:'选项卡索引'}
xtx-tabs-item
props
名称 | 类型 | 默认值 |
---|---|---|
label 选项卡标题 | String | '' |
name 选项卡名称 | String | '' |
email: [email protected] github: https://github.com/zhousg