erabbit-ui

小兔鲜组件库

小兔鲜UI组件库，基于Vue3开发，服务于电商平台小兔鲜儿。

Installation

基于：vue3 @vueuse/core axios vue-router less less-loader

yarn add erabbit-ui

Usage

<!-- 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: [e-mail] github: https://github.com/zhousg