tangq_ui

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

license: MIT

反馈地址：[email protected]

使用方式

下载安装

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重写等。