1.0.2 • Published 2 years ago
tangq-ui v1.0.2
tangq_ui
tangq_ui为vue3组件库，支持版本vue>=3.0，是作者基于平日开发所写的一个VUE3组件库，供自己学习使用，欢迎共同学习or指正错误
license: MIT
反馈地址：tangqiang152@gmail.com
使用方式
下载安装
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重写等。