tangq_ui

tangq_ui为vue3组件库，支持版本vue>=3.0，是作者基于平日开发所写的一个VUE3组件库，供自己学习使用，欢迎共同学习or指正错误

license: MIT

反馈地址：[e-mail]

使用方式

下载安装

npm i tangq-ui

使用

在index.html中引入图标

<!-- index.html -->
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">

在index.js中引入样式

import { createApp } from 'vue'
import App from './App.vue'

import TangQUI from 'tangq-ui' // 引入下载后的组件
import 'tangq-ui/index.css' // 引入组件样式

createApp(App).use(TangQUI).mount('#app')

组件介绍

按钮

xtx-button

名称	类型	可选值	默认值
size	String	large/middle/small/mini	middle
type	String	default/primary/plain/gray	default

数量选择

xtx-numbox

props

名称	类型	默认值
label	String	''
v-model	Number	0
min	Number	0
max	Number	10

复选框

xtx-checkbox

props

名称	类型	默认值
v-model	Boolean	false

面包屑

xtx-bread

xtx-bread-item

props

名称	类型	默认值
to	String, Object	无

与router-link的to属性一致

轮播图

xtx-carousel

props

名称	类型	默认值
sliders	Array	[]
autoPlay	Boolean	false
duration	Number	3000毫秒

:sliders="[{imgUrl:'图片地址'}]"

分页组件

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`

地区选择

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-infinite-loading

props

名称	类型	默认值
loading 加载中	Boolean	false
finished 全部数据加载完成	Boolean	false

events

名称	触发时机	默认参
infinite	进入可视区	无

更多组件

xtx-more

props

名称	类型	默认值
to	String, Object	无

与router-link的to属性一致

步骤条

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	''

TODO LIST

完成组件库的展示及详细使用文档。

加入测试模块及测试代码，使用TS重写等。