erabbit-ui v0.2.14
小兔鲜组件库
小兔鲜UI组件库，基于Vue3开发，服务于电商平台小兔鲜儿。
Installation
基于：vue3 @vueuse/core axios vue-router less less-loader
yarn add erabbit-uiUsage
<!-- 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')Docs
面包屑
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 |
sku组件
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 | '' |
tab栏
xtx-tabs
props
| 名称 | 类型 | 默认值 |
|---|---|---|
| v-model | String,Number | '' |
events
| 名称 | 触发时机 | 默认值 |
|---|---|---|
| tab-click | 点击选项卡 | { name, index } |
{name:'选项卡名称',index:'选项卡索引'}
xtx-tabs-item
props
| 名称 | 类型 | 默认值 |
|---|---|---|
| label 选项卡标题 | String | '' |
| name 选项卡名称 | String | '' |
about
email: zhoushugang@itcast.cn github: https://github.com/zhousg
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago