iduxfe / idux Goto Github PK
View Code? Open in Web Editor NEW🚀 A UI Component Library for Vue3.x
Home Page: https://idux.site
License: MIT License
🚀 A UI Component Library for Vue3.x
Home Page: https://idux.site
License: MIT License
设置组件之间的间距,避免组件紧贴在一起,拉开统一的空间。
核心原理是通过 Flex 布局对组件内部的元素进行重新排布:
align
设置不同的对齐方式:start
| center
| end
| baseline
;direction
设置 水平 、垂直 两种间隔方式;size
设置间隔的大小,其中 size 有三种默认大小:'small'|'middle'|'large'
,如遇到无法满足的情况,还可以传入一个 数字 自定义间隔大小。同时 size 允许传入一个数组,用来控制每个间隔的大小,数组的长度必须与传入的 children 长度 - 1 相等,否则会抛出警告;wrap
来设置是否自动换行,仅在 horizontal
时有效。参数 | 说明 | 类型 | 全局配置 | 默认值 | 备注 |
---|---|---|---|---|---|
align |
对齐方式 | start | center | end | baseline |
- | baseline |
- |
direction |
间距方式 | vertical | horizontal |
- | horizontal |
- |
size |
间距大小 | Size | Size[] |
small |
- | 有三个预设间距大小,除此之外还可以传入一个数字自定义间距大小,还可以传入一个数组来控制每个间距的大小(数组长度需等于间距个数,否则组件会抛出警告) |
split |
设置拆分 | string | - | - | 设置间隔分割符,当传入 split 时,内部间距会被分隔符替代;除了这种方式,你还可以设置 v-slot: split 的方式设置分隔符,优先级高于 prop |
wrap |
是否换行 | boolean |
- | false | 仅在 horizontal 时生效 |
type Size = 'small' | 'middle' | 'large' | number
属性 | 说明 |
---|---|
default |
需要被间隔的内容 |
split |
分隔符 |
参考自 @angular/forms
useFormGroup
, useFormArray
, useFormControl
Validators
valid
, invalid
, validating
, blurred
, unblurred
<template>
<ix-form :control="group">
Name: <ix-input control="name" /> <br />
Age: <ix-input control="age" /> <br />
Email: <ix-input control="email" />
</ix-form>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { injectControl, provideControl, Validators, useFormGroup } from '@idux/cdk/forms'
const IxForm = defineComponent({
props: ['control'],
setup(props) {
provideControl(props.control)
},
template: `<form><slot /></form>`,
})
const IxInput = defineComponent({
props: ['control'],
setup(props) {
const control$ = injectControl(props.control)!
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const onChange = (evt: any) => {
control$.setValue(evt.target!.value, { dirty: true })
}
return { control$, onChange }
},
template: `<input :value="control$.valueRef.value" @input="onChange" @blur="control$.markAsBlurred()" />`,
})
export default defineComponent({
components: { IxForm, IxInput },
setup() {
const { required, min, max, minLength, maxLength } = Validators
const group = useFormGroup({
name: ['tom', required],
age: [18, [required, min(1), max(99)]],
email: ['', [minLength(8), maxLength(40)]],
})
group.watchValue(value => console.log(value))
group.watchStatus(stats => console.log(stats))
group.get('name')?.watchStatus(stats => console.log(stats))
return { group }
},
})
</script>
useFormAccessor: 注册表单控制器
onChange(fn: any): void // 注册 onChange 事件。
onTouched(fn: any): void // 注册 onTouched 事件
useValidators: 注册同步验证器 (自定义业务表单组件需要)
validate(value: any): ValidationErrors | null // 自定义验证函数
onValidatorChange?(fn: () => void): void // 注册验证状态改变的事件 可选实现
useAsyncValidators:注册异步验证器 (自定义业务表单组件需要)
validate(value: any): Promise<ValidationErrors | null> // 自定义验证函数
onValidatorChange?(fn: () => void): void // 注册验证状态改变的事件 可选实现
对外暴露一个函数,允许调用方调用函数来创建一个浮层,且允许调用方还合适的范围内对浮层进行自定义。
通过函数可以创建浮层并返回该浮层对应的实例;
调用方可以通过函数返回的浮层实例,对视图进行绑定;
调用方可以通过返回的实例,控制浮层的初始化、显示、隐藏和销毁;
浮层的滚动策略有四种:
close
:滚动时自动关闭浮层;reposition
:默认行为,滚动时重新定位。浮层定位依赖于 @popperjs/core
cdk会对外抛出以下事件,需要调用方在使用时将事件绑定到视图上,使得cdk可以对浮层行为进行控制:
OverlayTriggerEvents
onClick
onMouseEnter
onMouseLeave
onFocus
onBlur
OverlayPopperEvents
onMouseEnter
onMouseLeave
注意:Trigger返回的事件与调用方传入
trigger
的值相关。
overlay
import type { Options, Placement } from '@popperjs/core'
import type { ComponentPublicInstance, ComputedRef, Ref } from 'vue'
declare type Nullable<T> = T | null
type OverlayScrollStrategy = 'close' | 'reposition'
type OverlayTrigger = 'click' | 'hover' | 'focus'
type RefElement = Nullable<HTMLElement>
type VueElement = Nullable<ComponentPublicInstance | HTMLElement>
interface OverlayTriggerEvents {
onClick?: (event: Event) => void
onMouseEnter?: (event: Event) => void
onMouseLeave?: (event: Event) => void
onFocus?: (event: Event) => void
onBlur?: (event: Event) => void
}
interface OverlayPopperEvents {
onMouseEnter: () => void
onMouseLeave: () => void
}
interface OverlayOptions {
/* The class name of the overlay container. */
className?: string
/**
* Control the visibility of the overlay
*/
visible?: boolean
/* Scroll strategy for overlay */
scrollStrategy: OverlayScrollStrategy
/* Disable the overlay */
disable?: boolean
/**
* The distance between the arrow and the starting point at both ends.
*Acting when the overlay uses border-radius.
*/
arrowOffset?: number
/* Whether to show arrow. */
showArrow?: boolean
/* Alignment of floating layer. */
placement: Placement
/**
* The options of popper.
* Used when ConnectOverlayOptions cannot meet the demand.
* Priority is higher than ConnectOverlayOptions.
*/
popperOptions?: Partial<Options>
/* Trigger method. */
trigger: OverlayTrigger
/* Whether to allow the mouse to enter the overlay. */
allowEnter?: boolean
/**
* Overlay offset.
* [Horizontal axis offset, vertical axis offset]
*/
offset: [number, number]
/**
* The delay of hiding overlay.
* Send false if you don't need it.
*/
hideDelay: number | false
/**
* The delay of showing overlay.
* Send false if you don't need it.
*/
showDelay: number | false
}
interface OverlayInstance {
/**
* Initialize the overlay.
* The life cycle of the overlay will enter mounted.
*/
initialize: () => void
/**
* Show the overlay.
* The style of the overlay container will be set to block.
*/
show: () => void
/**
* Hide the overlay.
* The style of the overlay container will be set to none.
*/
hide: () => void
/**
* Destroy the overlay.
* The life cycle of the overlay will enter beforeDestroy.
* To show the overlay again, please recreate.
*/
destroy: () => void
/**
* TODO
* The unique id of the overlay.
* Provide subsequent components with markings for the specified overlay treatment.
*/
overlayId: string
/**
* The display status of the current overlay.
* Control by visible and disable.
*/
visibility: ComputedRef<boolean>
/**
* The truth DOM node of the overlay.
* The caller needs to bind the variable to the view.
*/
overlayRef: Ref<RefElement>
/**
* Update overlay.
* If the overlay has not been initialized, the overlay will be initialized first, otherwise the overlay will be update directly.
* @param options
*/
update: (options: Partial<OverlayOptions>) => void
/**
* The truth DOM node of the arrow.
* If showArrow is false, we won't return arrowRef.
* The caller needs to bind the variable to the view.
*/
arrowRef?: Ref<RefElement>
/**
* The truth DOM node of the trigger.
* The caller needs to bind the variable to the view.
*/
triggerRef: Ref<VueElement>
/**
* Manually bind to the event on the trigger.
*/
triggerEvents: OverlayTriggerEvents
/**
* Manually bind to events on the overlay.
*/
overlayEvents: OverlayPopperEvents
}
Portal
名称 | 说明 | 类型 | 备注 |
---|---|---|---|
disable |
禁止传送 | boolean |
|
target |
传送位置 | HTMLElement | string |
传入类型是字符串时,会首先判断body下是否存在以该字符串为class name的元素,如果存在会直接使用该元素,否则会创建对应的元素作为容器。 |
名称 | 说明 | 备注 |
---|---|---|
default |
需要被传送的内容 | - |
<template>
<ix-button ref="triggerRef" @click="triggerEvents.onClick">Click</ix-button>
<teleport to="body">
<div ref="overlayRef" @mouseenter="overlayEvents.onMouseEnter()" @mouseleave="overlayEvents.onMouseLeave()">
tooltip
</div>
</teleport>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import { useOverlay } from '@idux/cdk/overlay'
export default defineComponent({
name: 'Basic',
setup() {
const { initialize, overlayRef, triggerRef, triggerEvents, overlayEvents } = useOverlay({
visible: false,
trigger: 'click',
placement: 'bottom',
offset: [0, 0],
showDelay: false,
hideDelay: 1000,
allowEnter: true,
})
onMounted(initialize)
return { overlayRef, triggerRef, triggerEvents, overlayEvents }
},
})
</script>
timeline
属性 | 说明 | 类型 | 默认 |
---|---|---|---|
pending | 最后的幽灵节点是否存在,如果传入string或者slot,则默认存在,并且作为内容 | boolean | string | slot | false |
pendingDot | 最后的幽灵节点存在时的时间轴点 | string | slot | 加载中的icon |
reverse | 时间节点是否倒叙 | boolean | false |
mode | 时间轴和内容的相对位置 | left | alternate | right | right |
slot
方法 | 说明 |
---|---|
default | 时间节点 |
pending | 幽灵节点的内容 |
pendingDot | 幽灵节点的时间轴点 |
timeline-item
属性 | 说明 | 类型 | 默认 |
---|---|---|---|
color | 圆圈颜色 | string | blue |
dot | 自定义时间轴点 | string | slot | - |
position | 时间节点内容的位置,优先级比timeline的mode高 | left | right | - |
slot
方法 | 说明 |
---|---|
default | timeline-item 的内容 |
dot | 自定义时间轴点 |
用来代表用户或事物,支持图片、图标或字符展示。
名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
---|---|---|---|---|---|
alt |
图像无法显示时的替代文本 | string |
- | - | - |
gap |
字符类型距离左右两侧边界单位像素 | number |
4 |
✅ | - |
icon |
设置自定义图标 | string | VNode | #icon |
user |
✅ | 如果设置了 src , 则作为图片加载失败的 fallback 行为 |
shape |
设置头像的形状 | 'circle' | 'square' |
'circle' |
✅ | - |
size |
设置头像的大小 | 'large' | 'medium' | 'small' | number | Record<BreakpointKey, number> |
'medium' |
✅ | - |
src |
图片类头像的资源地址 | string |
- | - | - |
srcSet |
设置图片类头像响应式资源地址 | string |
- | - | - |
onError |
图片加载失败的事件 | () => unknown |
- | - | 返回 false 会关闭组件默认的 fallback 行为 |
名称 | 说明 | 参数类型 | 备注 |
---|---|---|---|
default |
图片加载失败的 fallback 行为 | - | 优先级高于 icon |
解析不同目录下的 markdown 文件,用于生成文档站点。
ix-button
当
mode
不为link
时,除以下表格之外还支持原生button
的所有属性。
当mode
为link
时,除以下表格之外还支持原生a
的所有属性。
属性 | 说明 | 类型 | 全局配置 |
---|---|---|---|
mode |
设置按钮种类 | `'primary' | 'default' |
danger |
设置危险状态 | boolean |
- |
ghost |
设置幽灵状态 | boolean |
- |
disabled |
设置禁用状态 | boolean |
- |
loading |
设置加载中状态 | boolean |
- |
size |
设置按钮大小 | `'large' | 'medium' |
shape |
设置按钮形状 | `'circle' | 'round'` |
block |
将按钮宽度调整为其父宽度的选项 | boolean |
- |
icon |
设置图标类型(loading 状态时无效) | string |
- |
ix-button-group
属性 | 说明 | 类型 | 全局配置 |
---|---|---|---|
mode |
设置组内按钮种类, | `'primary' | 'default' |
size |
设置组内按钮大小 | `'large' | 'medium' |
shape |
设置组内按钮形状 | `'circle' | 'round'` |
<ix-icon style="color: 'red'" name="up">
<ix-icon class="red" name="up">
用于反馈一系列操作任务的处理结果。
当有重要操作需告知用户处理结果,且反馈内容较为复杂时使用。
v-slot: extra
来显示操作区;v-slot: icon
来显示图标;status
来控制按钮的颜色以及显示的图标;title
和 subtitle
来显示对应的文字,同时也支持 slot
的形式,优先级高于 prop
;ix-result
名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
---|---|---|---|---|---|
icon |
自定义图标 | string | v-slot: icon |
- | - | 传入一个 name,表示 ix-icon 的图标,用来替换默认的图标;也可以使用 slot 的形式传入,优先级高于 prop |
status |
结果的状态,决定图标和颜色 | ResultStatus |
- | ✅ | - |
subtitle |
subtitle 文字 | string | v-slot: subtitle |
- | - | slot 形式优先级高于 prop |
title |
title 文字 |
string | v-slot: title |
- | - | slot 形式优先级高于 prop |
type ResultStatus = 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500'
名称 | 说明 | 参数类型 | 备注 |
---|---|---|---|
default |
复杂的情况说明,用于显示更多的信息 | - | - |
extra |
操作区 | - | - |
General 通用
Layout 布局
Navigation 导航
Data Entry 数据录入
Data Display 数据展示
Feedback 反馈
Other 其他
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
message | 提示内容 | String | - |
description | 提示的辅助性文字介绍 | String | - |
type | 提示类型 success 、info 、 warning 、error |
String | info , banner 模式下默认值为warning |
closeable | 是否显示关闭按钮 | Boolean | false |
banner | 是否用作顶部公告 | Boolean | false |
showIcon | 是否显示辅助图标 | Boolean | false ,banner 模式下默认值为 true |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
onClose | 关闭事件 | Function | - |
afterClose | 关闭动画结束后触发的事件 | Function | - |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
action | 自定义操作项 | - | - |
message | 提示内容 | - | - |
description | 辅助性介绍 | - | - |
icon | 自定义图标 | - | - |
closeText | 自定义关闭按钮 | - | - |
各类型通用的属性
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
type | 类型,可选 line circle dashboard |
string | line |
format | 内容的函数模板,支持插槽 | function(percent, successPercent) | v-slot:format="percent, successPercent" | percent => percent + '%' |
percent | 百分比 | number | 0 |
status | 状态,可选:success exception normal active (仅限line) |
string | - |
hideInfo | 是否隐藏进度数值或状态图标 | boolean | false |
success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - |
trailColor | 未完成的分段的颜色 | string | - |
strokeColor | 进度条的色彩 | string | - |
strokeLinecap | 进度条的样式,可选:round square |
string | round |
type="line"
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
strokeColor | 进度条的色彩,传入 object 时为渐变 | string | { from: string; to: string; direction: string } | - |
strokeWidth | 进度条线的宽度,单位 px | number | 10 |
type="circle"
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
width | 圆形进度条画布宽度,单位 px | number | 132 |
strokeColor | 圆形进度条的色彩,传入 object 时为渐变 | string | { from: string; to: string; direction: string } | - |
strokeWidth | 圆形进度条线的宽度,单位是进度条画布宽度的百分比 | number | 6 |
type="dashboard"
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
width | 仪表盘进度条画布宽度,单位 px | number | 132 |
strokeWidth | 仪表盘进度条线的宽度,单位是进度条画布宽度的百分比 | number | 6 |
全局展示操作反馈信息。
也可以通过对象的形式传递参数
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
content | 提示内容 | string|config|vnode | - |
duration | 自动关闭的延时,单位秒。当设置为0时不消失 | number | 3 |
config
对象属性如下:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
content | 提示内容 | string|vnode | - |
duration | 自动关闭的延时,单位秒。设置为0立即关闭 | number | 3 |
icon | 自定义图标 | string|vnode | - |
messageId | 当前提示的唯一标志 | string|number | - |
onClose | message关闭时触发的回调函数 | function | - |
pauseOnHover | 鼠标移上时禁止自动移除 | boolean | true |
组件还提供全局配置和全局销毁方法
通过useGlobalConfig
方式设置message的默认全局配置
useGlobalConfig('message', {
top: 100,
duration: 2,
maxCount: 3
});
options:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
duration | 默认自动关闭延时,单位秒,设置为0立即关闭 | number | 3 |
maxCount | 最大显示数, 超过限制时,最早的消息会被自动关闭 | number | - |
top | 消息距离顶部的位置 | string|number | |
pauseOnHover | 鼠标移上时禁止自动移除 | boolean | true |
销毁某个消息实例的方法
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
messageId | 需要销毁的消息实例对应的messageId。可选参数,如果不传参数则清除所有消息。 | string|number|(string|number)[] | - |
https://material.angular.io/cdk/clipboard/overview
const value = 'copy value'
const { copy } = useClipboard()
copy(value).then(successful => console.log(successful))
Props
参数 | 说明 | 可选项 | 类型 | 默认值 |
---|---|---|---|---|
closable | 标签是否可以关闭 | Boolean | false | |
color | 标签颜色 | gray| success| info| lowRisk|danger | waring|serious|risk | String | - |
icon | 标签左侧图标 | string | - | |
checkable | 标签是否可以被选中 | Boolean | false | |
checked | 标签选中状态 | Boolean | false | |
isRound | 是否圆角形状 | Boolean | false | |
level | 数字等级(正整数),这个可以优先级放后 | Number | - |
Emits
事件名称 | 说明 | 回调函数 |
---|---|---|
close | 关闭时的回调 | (e) => void |
change | 点击标签时触发的回调 | (checked) => void |
Slots
名称 | 说明 |
---|---|
default | tag的text内容 |
icon | tag前面的icon内容 |
void
void
大括号永远不能省略, 增加这一条规则, 并且大括号的格式必须按照下面书写
if (foo) {
bar();
} else {
baz();
}
没有这一条规则
参数 | 说明 | 类型 | 全局配置 |
---|---|---|---|
[type] |
图标类型,遵循图标的命名规范 | string |
|
[theme] |
图标主题风格。可选实心、描线、双色等主题风格,适用于官方图标 | 'fill'丨'outline'丨'twotone' |
'outline' |
[spin] |
是否有旋转动画 | boolean |
false |
[color] |
仅适用双色图标,设置双色图标的主要颜色 | string |
'primary' |
[iconfont] |
指定来自 IconFont 的图标类型 | string |
- |
[rotate] |
图标旋转角度 | number |
- |
方法 | 说明 | 参数 |
---|---|---|
addIcon() |
用于静态引入图标 | Array |
addIconLiteral() |
用于静态引入用户自定义图标 | string |
fetchFromIconfont() |
用于从 FontIcon 获取图标资源文件 | IconfontOption |
changeAssetsSource() |
用于修改动态加载 icon 的资源前缀,使得你可以部署图标资源到你想要的任何位置,例如 cdn | string |
属性 | 说明 | 类型 | 全局配置 |
---|---|---|---|
value / v-model | 绑定值 | string / number / boolean |
- |
label | Radio 的 value | string / number / boolean |
- |
disabled | 是否禁用 | boolean |
- |
name | 原生的name 属性 |
string |
- |
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
参数 | 说明 | 类型 | 全局配置 |
---|---|---|---|
value / v-model | 绑定值 | string / number / boolean |
- |
size | 单选框组尺寸,仅对按钮形式的 Radio 或带有边框的 Radio 有效 | string |
- |
disabled | 是否禁用 | boolean |
- |
mode | 填充模式 | string |
- |
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
参数 | 说明 | 类型 | 全局配置 |
---|---|---|---|
label | Radio 的 value | string / number |
- |
disabled | 是否禁用 | boolean |
- |
name | 原生 name 属性 |
string |
- |
border | 是否显示边框 | boolean |
- |
size | Radio 的尺寸,仅在 border 为true 时有效 |
string |
- |
Vue 3.0 的发布带来了完整的 TypeScript 开发体验,全新的 Composition Api, 以及其他的各种新特性
现有的内部组件库承载了许多它本不应该承载的功能,已经日渐膨胀,变得难以维护
积重难返,我们决定扔掉技术包袱,重新设计并开发一套全新的组件库
cdk
, components
, pro
我们使用了 eslint
, stylelint
, markdownlint
以及 ls-lint
来保证整体的代码风格一致。
并且在 commit hooks 中配置了自动格式化和 lint, 只要提交通过即可。
Public Api 必须覆盖
覆盖率要求:85%
// jest coverageThreshold
{
branches: 85,
functions: 85,
lines: 85,
statements: 85,
}
props
参数 | 说明 | 默认值 | 类型 | 备注 |
---|---|---|---|---|
value | 高亮的数目 | 0 | number | - |
strokeColor | 高亮颜色 | 待定 | string | - |
backgroundColor | 未被选择时的颜色 | 待定 | string | - |
count | 图标数目 | 5 | number | - |
icon | 自定义图标 | ⭐ | string | props 或 slot |
allowHalf | 支持半分(选) | false | boolean | - |
disabled | 只读模式 | false | boolean | - |
tooltips | 每一个元素的提示信息 | [] | string[] | - |
allowClear | 是否可以取消选择 | false | boolean | - |
event
参数 | 说明 | 类型 |
---|---|---|
hover | 鼠标经过图标时触发 | Function(value: number) |
change | 分数发生改变时触发 | Function(value: number) |
多选框
Checkbox
支持原生input属性, 例如value, name, id
等
参数 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
---|---|---|---|---|---|
checked |
指定当前勾选框是否选中 | boolean |
false |
- | 支持双向绑定,使用时按照v-model:checked = 形式 |
disabled |
禁用状态 | boolean |
false |
- | - |
indeterminate |
是否处于不确定状态 | boolean |
false |
- | 当值为true时,按钮样式处于半选状态,且不受checked影响 |
trueValue |
勾选框选中时返回的值 | string | number |
true |
- | - |
falseValue |
勾选框不选中时返回的值 | string | number |
false |
- | - |
名称 | 说明 | 参数类型 | 备注 |
---|---|---|---|
defalut |
文本区域 | - | - |
名称 | 说明 | 参数类型 | 备注 |
---|---|---|---|
change |
点击勾选框时触发 | Function(checkValue:boolean | string | number) |
- |
Checkbox Group
| 名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
| --- | --- | --- | --- | --- | --- |value
| value
| 指定选中的选项 | string[]
| []
| - | 支持双向绑定,使用时按照v-model:value = 形式 |
| disabled
| 子ix-checkbox
禁用状态 | boolean
| false
| - |- |
| name
| 子ix-checkbox
的 name 属性 | string
| - | - |- |
名称 | 说明 | 参数类型 | 备注 |
---|---|---|---|
defalut |
ix-checkbox 区域 |
- | - |
名称 | 说明 | 参数类型 | 备注 |
---|---|---|---|
change |
value 变化时的回调函数 |
Function(checkValue:string[]) |
- |
当前项目中并没有统一的工具函数库可以用来做类型的检查,例如需要判断一个变量是否是数字,可能需要组件的开发者自行封装,这样封装检查工具函数会有大量的重复工作
使用ts进行实现相应的工具函数;使得用户可以直接使用;代码如:
function isNumber (val: unknown): val is number {
return Object.prototype.toString.call(val) === '[object Number]';
}
export enum Breakpoints = {
XSmall: '(max-width: 599.99px)',
Small: '(min-width: 768px) and (max-width: 1023.99px)',
Medium: '(min-width: 1024px) and (max-width: 1279.99px)',
Large: '(min-width: 1280px) and (max-width: 1719.99px)',
XLarge: '(min-width: 1720px)',
}
// 非响应式
const isXSmall = isMatchedBreakpoint(Breakpoints.XSmall)
// 响应式
const layoutChange = observeBreakpoint(Breakpoints.XSmall)
// const layoutChange = observeBreakpoint([Breakpoints.XSmall, Breakpoints.Large])
watchEffect(() => {
console.log('breakpoints', layoutChanges.value.breakpoints)
console.log('matches', layoutChanges.value.matches)
})
// 清空观察者
cleanObservables()
const datePikerLocal = useI18n('dataPiker')
<!-- App.vue -->
<script lang="ts">
import { defineComponent } from 'vue'
import type { ButtonConfig } from '@idux/components'
import { useGlobalConfig } from '@idux/components'
export default defineComponent({
setup() {
// 设置 button 组件默认大小为 large
const buttonConfig = useGlobalConfig('button', { size: 'large'})
// 可以动态修改全局配置
const changeButtonConfig = () => {
buttonConfig.size = 'small'
}
return { changeButtonConfig }
}
})
</script>
Props
参数 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
---|---|---|---|---|---|
target |
需要监听其滚动事件的元素 | string | HTMLElement |
window |
- | 传入 string 类型,会在 mounted 的时候使用 querySelector 来获取元素 |
duration |
回到顶部所需时间(ms) | number |
450 |
✅ | - |
visibility-height |
滚动高度达到此参数值才出现 | number |
400 |
✅ | - |
Slots
名称 | 说明 | 参数类型 | 备注 |
---|---|---|---|
defalut |
自定义显示内容 | - | - |
Emits
名称 | 说明 | 参数类型 | 备注 |
---|---|---|---|
click |
点击按钮触发的事件 | event |
- |
解决了业务中一些需要进度条组件的,比如物流进展,工单进展等。
default
)和迷你的(small
)change
<ix-steps>
<ix-step title="第一步" />
<ix-step title="第二步" />
<ix-step title="第三步" />
</ix-steps>
名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
---|---|---|---|---|---|
active |
指定步骤条当前的活跃节点,从0开始计算 | number |
0 | - | - |
direction |
指定步骤条的方向 | horizontal | vertical |
horizontal |
- | - |
placement |
指定步骤条节点附带的标签放置的位置 | horizontal | vertical |
horizontal |
- | - |
percent |
当前活跃节点的进度 | number |
0 | - | 取值是0-100 |
progressDot |
指定步骤条是否为点状步骤条 | boolean | v-slot:progressDot |
false |
- | 使用slot的话,会传入当前节点对象item |
size |
指定步骤条节点的大小 | medium| small |
medium |
✅ | - |
status |
指定步骤条节点的状态 | wait | process | finish | error |
process |
- | - |
名称 | 说明 | 参数 |
---|---|---|
change |
设置 change 后,Steps 变为可点击状态。切换步骤条时触发 |
当前活跃节点对象currentItem |
名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
---|---|---|---|---|---|
title |
标题 | string | v-slot:title |
- | - | 使用slot的话,会传入当前节点对象item |
subTitle |
副标题 | string | v-slot:subTitle |
- | - | 使用slot的话,会传入当前节点对象item |
description |
步骤条节点的具体描述 | string | v-slot:description |
- | - | 使用slot的话,会传入当前节点对象item |
disabled |
节点禁用点击 | true | false |
false |
- | - |
icon |
每个节点的图标 | string | v-slot:icon |
- | - | - |
status |
每个节点的状态,当不设置时,会用Steps里的status | wait | process | finish | error |
wait |
- | - |
图标没有正常显示
Environment | Info |
---|---|
@Idux | |
Browser |
Environment | Info |
---|---|
@Idux | |
Browser |
展示统计数值。
名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
---|---|---|---|---|---|
formatter | 自定义数值展示 | v-slot | (value) => string | - | ||
precision | 数值精度 | number | - | ✅ | |
prefix | 设置数值的前缀 | string | v-slot | - | ||
suffix | 设置数值的后缀 | string | v-slot | - | ||
title | 数值的标题 | string | v-slot | - | ||
value | 数值内容 | string | number | - |
属性 | 说明 | 类型 | 全局配置 | 版本号 |
---|---|---|---|---|
alt | 图像描述 | string | - | - |
fallback | 加载失败容错地址 | string | - | - |
height | 图像高度 | string | number | - | - |
preview | 预览参数,为false 时禁用 |
boolean | - | - |
src | 图片地址 | string | - | - |
width | 图像宽度 | string | number | - | - |
fit | 确定图片如何适应容器框,同原生 object-fit | string | - | - |
提供了加载等待的遮罩层
让用户能更好感知我们的数据请求和渲染的一个视觉效果,不会让一些动态请求加载的数据回显得很突兀,而且也能阻止用户在数据请求过程中对视图层有其他操作导致一些不必要的错误;
CONFIGS
参数 | 说明 | 类型 | 默认值 | 是否支持全局配置 |
---|---|---|---|---|
spinning |
是否显示加载遮罩层 | boolean |
true |
false |
icon |
加载图标名称 | string |
loading |
true |
tip |
加载提示文字描述 | string |
false |
true |
tipAlign |
文字描述与加载图标的排列方式 | string |
vertical(vertical:文字排列在图标下方;horizontal: 文字排列在图标同水平方向的后方) |
true |
size |
icon 和 tip大小控制 | string(small | medium | large) |
small |
true |
SLOTS
名称 | 说明 |
---|---|
defalut |
需要遮罩的内容区域 |
暂无,
因为问题比较明显, tag 未取到正确的值, groupProps 和 全局配置都失效了
tag 是 a
tag 是 button
原因如下注释
setup(props: ButtonProps) {
const groupProps = inject(buttonGroupInjectionKey, {})
const buttonConfig = useGlobalConfig('button')
const classes = useClasses(props, groupProps, buttonConfig)
const tag = computed(() => (props.mode === 'link' ? 'a' : 'button')) // 这里只用了 props, 没有像下面一样取 groupProps 和 config
return { classes, tag }
},
})
const useClasses = (props: ButtonProps, groupProps: ButtonGroupProps, config: ButtonConfig) => {
return computed(() => {
const mode = props.mode || groupProps.mode || config.mode
const size = props.size || groupProps.size || config.size
Environment | Info |
---|---|
@Idux | any |
Browser | all |
Breadcrumb
Breadcrumb props
名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
---|---|---|---|---|---|
has-return l 是否展示返回按钮 | true | true | - | - | - |
return-icon | 返回的图标名 | string | arrow-left | - | 使用ix-icon组件的name值 |
separator | 分隔符 | string | > | - | - |
breadcrumb-items | 面包屑路径数据 | Array | [] | - | 会使用for循环创建breadcrumb-item;元素数据见下表 |
名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
---|---|---|---|---|---|
text | 展示的文本 | string | - | - | - |
path | 路径点击之后跳转的路由 | string | - | - | - |
to | 路径点击之后跳转的路由参数 | Object | - | - | 配置了to属性,忽略掉path属性 |
href | 路径点击之后,使用a标签的跳转,对于url可以使用这种 | string | - | - | 配置了href忽略掉path与to |
unlink | 是否展示非连接的样式,同时点击不会跳转,但是会执行clickItem | Boolean | 最后一个元素默认 true; 其他元素默认false | - | 面包屑最后一个路径默认unlink为true;其他路径默认unlink为false |
clickItem | 点击路径的回调 | Function | - | - | 参数为配置的该item; 调用此方法之后,会进行跳转,如果需要进行条件判断,可将跳转手动写在clickItem中 |
breadcrumb events
名称 | 说明 | 参数类型 | 备注 |
---|---|---|---|
click | 点击任意item的时候触发 | [Object] 值为点击的breadcrumb-item的配置值 | 在clickItem之前emit |
none
yarn start
success
$ gulp start:dev
[15:58:58] Requiring external module ts-node/register
[15:59:03] Using gulpfile /mnt/d/WebstormProject/idux/components/gulpfile.ts
[15:59:03] Starting 'start:dev'...
[15:59:03] Starting 'clean:site'...
[15:59:03] Finished 'clean:site' after 306 ms
[15:59:03] Starting 'icons:copy'...
[15:59:04] Finished 'icons:copy' after 1.39 s
[15:59:04] Starting 'site:start'...
[15:59:04] Starting 'site:init'...
[15:59:05] Finished 'site:init' after 407 ms
[15:59:05] Starting 'site:watch'...
[15:59:05] Starting 'site:serve'...
internal/modules/cjs/loader.js:584
throw err;
^
Error: Cannot find module 'worker_threads'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
at Function.Module._load (internal/modules/cjs/loader.js:508:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object.<anonymous> (/mnt/d/WebstormProject/idux/components/node_modules/vite/dist/node/chunks/dep-0b3d3f5e.js:16:24)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
[15:59:05] 'site:serve' errored after 327 ms
[15:59:05] Error: Process failed with code 1
at ChildProcess.childProcess.on (/mnt/d/WebstormProject/idux/components/scripts/gulp/util/task-helpers.ts:23:24)
at ChildProcess.emit (events.js:189:13)
at ChildProcess.EventEmitter.emit (domain.js:459:23)
at maybeClose (internal/child_process.js:970:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
[15:59:05] 'site:start' errored after 748 ms
[15:59:05] 'start:dev' errored after 2.44 s
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
worker_threads
can only be supported at v11.5.0+. Maybe we should add engines
in package.json
, such as:
// package.json
"engines": {
"node": ">11.5.0"
}
Environment | Info |
---|---|
node.js | v10.15.3 |
参数 | 说明 | 类型 | 默认值 | 全局配置 |
---|---|---|---|---|
title |
卡片标题 | `'string' | 'slot'` | - |
extra |
右上角操作区域 | `'string' | 'slot'` | - |
footer |
卡片底部操作区域 | 'slot' |
- | - |
bordered |
是否有边框 | 'booelan' |
'true' |
'true' |
hoverable |
是否悬浮 | 'booelan' |
'false' |
'false' |
loading |
当卡片内容还在加载中时,可以用 loading 展示一个占位 | 'booelan' |
'false' |
'false' |
size |
设置按钮大小 | `'large' | 'medium' | 'small'` |
事件
事件名称 | 说明 | 参数 |
---|---|---|
onExtraClicked | 当extra参数为string时,用于点击extra | event |
用于跳转到页面指定位置。
<ix-anchor>
<ix-link href="#example" title="example" />
<ix-link href="#api" title="api">
<ix-link href="#props" title="props" />
<ix-link href="#emit" title="emit" />
</ix-link>
</ix-anchor>
名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
---|---|---|---|---|---|
affix |
是否是固定模式 | boolean | true |
- | - |
showInkInFixed |
固定模式是否显示小圆点 | boolean | false |
✅ | - |
target |
指定滚动的容器 | string|HTMLElement | window |
- | - |
offsetTop |
距离窗口顶部达到指定偏移量后触发激活 | number | - | - | - |
targetOffset |
锚点滚动偏移量,默认与 offsetTop 相同 | number | - | - | - |
名称 | 说明 | 参数 |
---|---|---|
click |
锚点元素点击事件 | e: Event, link: Object |
change |
监听锚点链接改变 | activeLink: string |
除以下表格外还支持原生
a
元素的所有属性。
名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
---|---|---|---|---|---|
href |
锚点链接 | string |
- | - | - |
title |
文字内容 | string |
- | - | - |
在根目录下通过执行脚本 yarn gen [name]
创建对应组件。
创建组件成功,组件代码无报错。
创建组件成功,创建后的代码中包含 ts 类型错误。
defineComponent
这个函数的类型不一致
npm run gen button
npm run gen clipboard cdk
export const Logger = { info, warn, error }
参数 | 说明 | 类型 | 默认值 | 备注 |
---|---|---|---|---|
dashed | 是否虚线 | boolean | false | - |
plain | 文字是否显示为普通正文样式 | boolean | false | - |
position | 文字显示位置 | left | center | right |
center |
文字显示的位置有三种默认位置;垂直分割线文字不作样式处理。 |
type | 水平分割线还是垂直分割线 | horizontal | vertical |
horizontal |
- |
text | 分割线显示的文字 | slot |
- | - |
空状态时的展示占位图。
空状态时的展示占位图。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
description | 自定义描述内容 | string | - |
image | 设置显示图片,为 string 时表示自定义图片地址 | string | false |
在需要等待加载内容的位置提供一个占位图形组合。
API
Ix-skeleton
Props
名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
---|---|---|---|---|---|
animation |
是否展示动画效果 | boolean |
false |
- | - |
width |
设置组件宽度 | number | string |
100% |
- | - |
height |
设置组件高度 | number | string |
100% |
- | - |
loading |
是否开启占位图 | boolean |
false |
- | false 的值只有在 default 槽中有内容时才会工作。 |
type |
字符串分隔要创建的骨架组件列表 | string |
undefined |
- | required 骨架组件列表,例如 type="text@3" 和 type="card , list-item "。将根据提供的字符串递归生成相应的框架。 还支持多个元素的简写,例如 article@3 和 paragraph@2 ,它们将生成 3 article skeletons and 2 paragraph 骨架。具体的预设列表会根据后续具体业务场景来建立。 |
types |
将与预定义选项结合使用的自定义类型对象。 有关可用的预定义选项的列表 | object |
{} |
- | 与type 搭配使用,建立自定义的骨架模板。 |
名称 | 说明 |
---|---|
default |
默认插槽,放置骨架屏子组件 |
名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
---|---|---|---|---|---|
v-model:pageIndex |
当前页数 | number |
1 |
- | - |
v-model:pageSize |
每页条数 | number |
10 |
✅ | - |
disabled |
是否禁用 | boolean |
false |
- | - |
itemRender |
用于自定义页码的结构 | PaginationItemRenderFn | v-slot:item |
false |
✅ | - |
pageSizeOptions |
指定每页可以显示多少条 | number[] |
[10, 20, 50, 100] |
✅ | - |
responsive |
当 pageSize < 1 时,根据屏幕宽度自动调整尺寸 |
boolean |
false |
✅ | - |
showQuickJumper |
是否可以快速跳转至某页 | boolean |
false |
✅ | - |
showSizeChanger |
是否是否可以改变 pageSize |
boolean |
false |
✅ | - |
showTitle |
是否显示原生 title 页码提示 |
boolean |
false |
✅ | - |
simple |
显示为简单分页 | boolean |
false |
✅ | - |
size |
分页组件大小 | middle | small |
middle |
✅ | - |
total |
数据总数 | number |
0 |
- | - |
totalRender |
用于显示数据总量和当前数据顺序 | PaginationTotalRenderFn | v-slot:total |
- | ✅ | - |
名称 | 说明 | 参数类型 | 备注 |
---|---|---|---|
item |
用于自定义页码的结构 | { pageIndex: number; type: PaginationItemType } |
- |
total |
用于显示数据总量和当前数据顺序 | { total: number; range: [number, number] } |
- |
徽标组件
徽标组件
参数 | 说明 | 类型 | 全局配置 |
---|---|---|---|
dot |
圆点徽标 | boolean |
false |
count |
数值徽标的值 | number|string |
- |
overflowCount |
最大数值徽标的值,超出以${overflowCount}+ 显示 |
number|string |
99 |
showZero |
数值为0时是否显示 | boolean |
false |
color |
徽标的颜色,数值徽标和圆点徽标为设置背景色,组件徽标为字体颜色 | hex|rgb?a |
- |
方法 | 说明 |
---|---|
defalut |
需要添加徽标的内容 |
count |
自定义徽标 |
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.