uui
🖖 A vue-cli 3.0 + vue + typeScript 💬 微信交流: xiaoda0423⚡ 👉 如果你有问题
我的工作:
- 写什么样的代码:技术分享
- 思考如何写代码:技术思考
- 熟悉业务:业务思考
- 熟悉工作流程:优化工作流程(从需求-开发-联调-测试-上线)
- 提升效率
- 加班
我的学习:
- 明确学习目标,找到适合的学习方式(看书,视频,文档,社区,Github)
- 站在巨人的肩膀上
- 不断积累,技术分享
npm install da-uui -S
or
yarn add da-uui
- 在项目根目录下配置.gitlab-ci.yml文件 - .gitlab-ci的所有流程都是可视化的
- intall => eslint检查 => 编译 => 部署服务器的流程
- GitLab CI/CD 是一个内置在GitLab中的工具
- Continuous Integration (CI) 持续集成
- Continuous Delivery (CD) 持续交付
Continuous Deployment (CD) 持续部署
参数 |
说明 |
类型 |
可选值 |
默认值 |
height |
走马灯的高度 |
string |
— |
— |
initial-index |
初始状态激活的幻灯片的索引,从 0 开始 |
number |
— |
0 |
autoplay |
是否自动切换 |
boolean |
— |
true |
interval |
自动切换的时间间隔,单位为毫秒 |
number |
— |
3000 |
arrow |
切换箭头的显示时机 |
string |
always/hover/never |
hover |
type |
走马灯的类型 |
string |
card |
— |
loop |
是否循环显示 |
boolean |
- |
true |
事件名称 |
说明 |
回调参数 |
change |
幻灯片切换时触发 |
目前激活的幻灯片的索引,原幻灯片的索引 |
pagination Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
small |
是否使用小型分页样式 |
boolean |
— |
false |
background |
是否为分页按钮添加背景色 |
boolean |
— |
false |
page-size |
每页显示条目个数,支持 .sync 修饰符 |
number |
— |
10 |
total |
总条目数 |
number |
— |
— |
page-count |
总页数,total 和 page-count 设置任意一个就可以达到显示页码的功能;如果要支持 page-sizes 的更改,则需要使用 total 属性 |
Number |
— |
— |
pager-count |
页码按钮的数量,当总页数超过该值时会折叠 |
number |
大于等于 5 且小于等于 21 的奇数 |
7 |
current-page |
当前页数,支持 .sync 修饰符 |
number |
— |
1 |
page-sizes |
每页显示个数选择器的选项设置 |
number[] |
— |
[10, 20, 30, 40, 50, 100] |
disabled |
是否禁用 |
boolean |
— |
false |
hide-on-single-page |
只有一页时是否隐藏 |
boolean |
— |
- |
事件名称 |
说明 |
回调参数 |
size-change |
pageSize 改变时会触发 |
每页条数 |
current-change |
currentPage 改变时会触发 |
当前页 |
name |
说明 |
— |
自定义内容,需要在 layout 中列出 slot |
参数 |
说明 |
类型 |
可选值 |
默认值 |
trigger |
触发方式 |
String |
click/focus/hover/manual |
click |
title |
标题 |
String |
— |
— |
content |
显示的内容,也可以通过 slot 传入 DOM |
String |
— |
— |
width |
宽度 |
String, Number |
— |
最小宽度 150px |
placement |
出现位置 |
String |
top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |
bottom |
disabled |
Popover 是否可用 |
Boolean |
— |
false |
value / v-model |
状态是否可见 |
Boolean |
— |
false |
参数 |
说明 |
— |
Popover 内嵌 HTML 文本 |
reference |
触发 Popover 显示的 HTML 元素 |
事件名称 |
说明 |
回调参数 |
show |
显示时触发 |
— |
after-enter |
显示动画播放完毕后触发 |
— |
hide |
隐藏时触发 |
— |
after-leave |
隐藏动画播放完毕后触发 |
— |
参数 |
说明 |
类型 |
可选值 |
默认值 |
value / v-model |
绑定值 |
date(DatePicker) / array(DateRangePicker) |
— |
— |
参数 |
说明 |
类型 |
可选值 |
默认值 |
percentage |
百分比(必填) |
number |
0-100 |
0 |
format |
进度条文字 |
function |
— |
— |
status |
进度条当前状态 |
string |
success/exception/warning |
— |
color |
进度条背景色(会覆盖 status 状态颜色) |
string/function/array |
— |
'' |
参数 |
说明 |
类型 |
可选值 |
默认值 |
infinite-scroll-disabled |
是否禁用 |
boolean |
- |
false |
infinite-scroll-delay |
节流时延,单位为 ms |
number |
- |
200 |
infinite-scroll-distance |
触发加载的距离阈值,单位为 px |
number |
- |
0 |
infinite-scroll-immediate |
是否立即执行加载方法,以防初始状态下内容无法撑满容器。 |
boolean |
- |
true |
参数 |
说明 |
类型 |
可选值 |
默认值 |
gutter |
栅格间隔 |
number |
— |
0 |
type |
布局模式,可选 flex,现代浏览器下有效 |
string |
— |
— |
justify |
flex 布局下的水平排列方式 |
string |
start/end/center/space-around/space-between |
start |
align |
flex 布局下的垂直排列方式 |
string |
top/middle/bottom |
top |
tag |
自定义元素标签 |
string |
* |
div |
参数 |
说明 |
类型 |
可选值 |
默认值 |
span |
栅格占据的列数 |
number |
— |
24 |
offset |
栅格左侧的间隔格数 |
number |
— |
0 |
push |
栅格向右移动格数 |
number |
— |
0 |
pull |
栅格向左移动格数 |
number |
— |
0 |
xs |
<768px 响应式栅格数或者栅格属性对象 |
number/object (例如: {span: 4, offset: 4}) |
— |
— |
sm |
≥768px 响应式栅格数或者栅格属性对象 |
number/object (例如: {span: 4, offset: 4}) |
— |
— |
md |
≥992px 响应式栅格数或者栅格属性对象 |
number/object (例如: {span: 4, offset: 4}) |
— |
— |
lg |
≥1200px 响应式栅格数或者栅格属性对象 |
number/object (例如: {span: 4, offset: 4}) |
— |
— |
xl |
≥1920px 响应式栅格数或者栅格属性对象 |
number/object (例如: {span: 4, offset: 4}) |
— |
— |
tag |
自定义元素标签 |
string |
* |
div |
参数 |
说明 |
类型 |
可选值 |
默认值 |
direction |
子元素的排列方向 |
string |
horizontal / vertical |
子元素中有 el-header 或 el-footer 时为 vertical,否则为 horizontal |
Header Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
height |
顶栏高度 |
string |
— |
60px |
参数 |
说明 |
类型 |
可选值 |
默认值 |
width |
侧边栏宽度 |
string |
— |
300px |
Footer Attributes
参数 |
说明 |
类型 |
可选值 |
默认值 |
height |
底栏高度 |
string |
— |
60px |
import Vue from 'vue'
import uui from 'da-uui'
import 'da-uui/dist/da-uui.css'
Vue.use(uui)
// or
import {
Select,
Button
// ...
} from 'da-uui'
Vue.component(Select.name, Select)
Vue.component(Button.name, Button)
MIT License