Skip to content

Commit

Permalink
feat: update global config default value
Browse files Browse the repository at this point in the history
  • Loading branch information
PengYYYYY committed Jun 27, 2022
1 parent 91899ce commit 79ac9e2
Show file tree
Hide file tree
Showing 15 changed files with 46 additions and 57 deletions.
24 changes: 12 additions & 12 deletions examples/dialog/dialog.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,10 @@
-- | -- | -- | -- | --
attach | String / Function | '' | 对话框挂载的节点,默认挂在组件本身的位置。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body。TS 类型:`AttachNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
body | String / Slot / Function | '' | 对话框内容。TS 类型:`string | TNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
cancelBtn | String / Object / Slot / Function | '' | 取消按钮,可自定义。值为 null 则不显示取消按钮。值类型为字符串,则表示自定义按钮文本,值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时,需自行控制取消事件。TS 类型:`string | ButtonProps | TNode`[Button API Documents](./button?tab=api)[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/dialog/type.ts) | N
cancelBtn | String / Object / Slot / Function | '' | 取消按钮,可自定义。值为 null 则不显示取消按钮。值类型为字符串,则表示自定义按钮文本,值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时,需自行控制取消事件。TS 类型:`string | ButtonProps | TNode | null`[Button API Documents](./button?tab=api)[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/dialog/type.ts) | N
closeBtn | String / Boolean / Slot / Function | true | 关闭按钮,可以自定义。值为 true 显示默认关闭按钮,值为 false 不显示关闭按钮。值类型为 string 则直接显示值,如:“关闭”。值类型为 TNode,则表示呈现自定义按钮示例。TS 类型:`string | boolean | TNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发对话框关闭事件 | N
closeOnOverlayClick | Boolean | true | 点击蒙层时是否触发关闭事件 | N
closeOnEscKeydown | Boolean | - | 按下 ESC 时是否触发对话框关闭事件 | N
closeOnOverlayClick | Boolean | - | 点击蒙层时是否触发关闭事件 | N
confirmBtn | String / Object / Slot / Function | '' | 确认按钮。值为 null 则不显示确认按钮。值类型为字符串,则表示自定义按钮文本,值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时,需自行控制确认事件。TS 类型:`string | ButtonProps | TNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
default | String / Slot / Function | - | 对话框内容,同 body。TS 类型:`string | TNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
destroyOnClose | Boolean | false | 是否在关闭弹框的时候销毁子元素 | N
Expand Down Expand Up @@ -72,10 +72,10 @@ onOverlayClick | Function | | TS 类型:`(context: { e: MouseEvent }) => void
cancel | `(context: { e: MouseEvent })` | 如果“取消”按钮存在,则点击“取消”按钮时触发,同时触发关闭事件
close | `(context: DialogCloseContext)` | 关闭事件,点击取消按钮、点击关闭按钮、点击蒙层、按下 ESC 等场景下触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/dialog/type.ts)。<br/>`type DialogEventSource = 'esc' | 'close-btn' | 'cancel' | 'overlay'`<br/><br/>`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent | KeyboardEvent }`<br/>
close-btn-click | `(context: { e: MouseEvent })` | 点击右上角关闭按钮时触发
closed | - | 对话框消失动画效果结束后触发
closed | \- | 对话框消失动画效果结束后触发
confirm | `(context: { e: MouseEvent })` | 如果“确认”按钮存在,则点击“确认”按钮时触发
esc-keydown | `(context: { e: KeyboardEvent })` | 按下 ESC 时触发事件
opened | - | 对话框弹出动画效果结束后触发
opened | \- | 对话框弹出动画效果结束后触发
overlay-click | `(context: { e: MouseEvent })` | 如果蒙层存在,点击蒙层时触发

### DialogOptions
Expand All @@ -85,24 +85,24 @@ overlay-click | `(context: { e: MouseEvent })` | 如果蒙层存在,点击蒙
attach | String / Function | 'body' | 对话框挂载的节点。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body。TS 类型:`AttachNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
className | String | - | 弹框类名,示例:'t-class-dialog-first t-class-dialog-second' | N
style | String / Object | - | 弹框 style 属性,输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)。TS 类型:`string | Styles`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
`Omit<DialogProps, 'attach'>` | - | - | 继承 `Omit<DialogProps, 'attach'>` 中的全部 API | N
`Omit<DialogProps, 'attach'>` | \- | - | 继承 `Omit<DialogProps, 'attach'>` 中的全部 API | N

### DialogInstance

名称 | 参数 | 返回值 | 描述
-- | -- | -- | --
destroy | - | - | 销毁弹框
hide | - | - | 隐藏弹框
show | - | - | 显示弹框
update | `(props: DialogOptions)` | - | 更新弹框内容
destroy | \- | \- | 销毁弹框
hide | \- | \- | 隐藏弹框
show | \- | \- | 显示弹框
update | `(props: DialogOptions)` | \- | 更新弹框内容

### DialogPlugin

同时也支持 `this.$dialog`。这是一个插件函数,参数形式为顺序参数(形如:(a, b, c)),而非对象参数(形如:({ a, b, c }))。顺序参数如下,

参数名称 | 参数类型 | 参数默认值 | 参数说明
-- | -- | -- | --
options | - | - | TS 类型:`DialogOptions`
options | \- | - | TS 类型:`DialogOptions`

插件返回值:`DialogInstance`

Expand All @@ -112,7 +112,7 @@ options | - | - | TS 类型:`DialogOptions`

参数名称 | 参数类型 | 参数默认值 | 参数说明
-- | -- | -- | --
options | - | - | TS 类型:`DialogOptions`
options | \- | - | TS 类型:`DialogOptions`

### DialogPlugin.alert

Expand Down
10 changes: 5 additions & 5 deletions examples/drawer/drawer.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,20 @@
attach | String / Function | '' | 抽屉挂载的节点,默认挂在组件本身的位置。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body。TS 类型:`AttachNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
body | String / Slot / Function | - | 抽屉内容。TS 类型:`string | TNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
cancelBtn | String / Object / Slot / Function | '' | 取消按钮,可自定义。值为 null 则不显示取消按钮。值类型为字符串,则表示自定义按钮文本,值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时,需自行控制取消事件。TS 类型:`FooterButton` | N
closeBtn | String / Boolean / Slot / Function | undefined | 关闭按钮,可以自定义。值为 true 显示默认关闭按钮,值为 false 不显示关闭按钮。值类型为 string 则直接显示值,如:“关闭”。值类型为 TNode,则表示呈现自定义按钮示例。TS 类型:`string | boolean | TNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发抽屉关闭事件 | N
closeBtn | String / Boolean / Slot / Function | - | 关闭按钮,可以自定义。值为 true 显示默认关闭按钮,值为 false 不显示关闭按钮。值类型为 string 则直接显示值,如:“关闭”。值类型为 TNode,则表示呈现自定义按钮示例。TS 类型:`string | boolean | TNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
closeOnEscKeydown | Boolean | - | 按下 ESC 时是否触发抽屉关闭事件 | N
closeOnOverlayClick | Boolean | true | 点击蒙层时是否触发抽屉关闭事件 | N
confirmBtn | String / Object / Slot / Function | '' | 确认按钮。值类型为字符串,则表示自定义按钮文本,值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时,需自行控制确认事件。TS 类型:`FooterButton`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/drawer/type.ts) | N
confirmBtn | String / Object / Slot / Function | '' | 确认按钮。值类型为字符串,则表示自定义按钮文本,值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时,需自行控制确认事件。TS 类型:`FooterButton` `type FooterButton = string | ButtonProps | TNode`[Button API Documents](./button?tab=api)[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/drawer/type.ts) | N
default | String / Slot / Function | - | 抽屉内容,同 body。TS 类型:`string | TNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
destroyOnClose | Boolean | false | 抽屉关闭时是否销毁节点 | N
footer | Boolean / Slot / Function | true | 底部操作栏,默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮,值为 false 或 null 不显示任何内容,值类型为 TNode 表示自定义底部内容。TS 类型:`boolean | TNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
header | String / Boolean / Slot / Function | undefined | 头部内容。值为 true 显示空白头部,值为 false 不显示头部,值类型为 string 则直接显示值,值类型为 TNode 表示自定义头部内容。TS 类型:`string | boolean | TNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
header | String / Boolean / Slot / Function | true | 头部内容。值为 true 显示空白头部,值为 false 不显示头部,值类型为 string 则直接显示值,值类型为 TNode 表示自定义头部内容。TS 类型:`string | boolean | TNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
mode | String | overlay | 展开方式,有两种:直接展示在内容上方 和 推开内容区域。可选项:overlay/push | N
placement | String | right | 抽屉方向。可选项:left/right/top/bottom | N
preventScrollThrough | Boolean | true | 防止滚动穿透 | N
showInAttachedElement | Boolean | false | 仅在挂载元素中显示抽屉,默认在浏览器可视区域显示。父元素需要有定位属性,如:position: relative | N
showOverlay | Boolean | true | 是否显示遮罩层 | N
size | String | small | 尺寸,支持 'small', 'medium', 'large','35px', '30%', '3em' 等。纵向抽屉调整的是抽屉宽度,横向抽屉调整的是抽屉高度 | N
size | String | undefined | 尺寸,支持 'small', 'medium', 'large','35px', '30%', '3em' 等。纵向抽屉调整的是抽屉宽度,横向抽屉调整的是抽屉高度 | N
sizeDraggable | Boolean | false | 抽屉大小可拖拽调整,横向抽屉调整宽度,纵向抽屉调整高度 | N
visible | Boolean | false | 组件是否可见 | N
zIndex | Number | - | 抽屉层级,样式默认为 1500 | N
Expand Down
2 changes: 1 addition & 1 deletion examples/input/input.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
align | String | left | 文本内容位置,居左/居中/居右。可选项:left/center/right | N
autocomplete | String | - | 是否开启自动填充功能,HTML5 原生属性,[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | N
autocomplete | String | undefined | 是否开启自动填充功能,HTML5 原生属性,[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | N
autofocus | Boolean | false | 自动聚焦 | N
autoWidth | Boolean | false | 宽度随内容自适应 | N
clearable | Boolean | false | 是否可清空 | N
Expand Down
2 changes: 1 addition & 1 deletion examples/select/select.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ popupVisible | Boolean | undefined | 是否显示下拉框 | N
prefixIcon | Slot / Function | - | 组件前置图标。TS 类型:`TNode`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
readonly | Boolean | false | 只读状态,值为真会隐藏输入框,且无法打开下拉框 | N
reserveKeyword | Boolean | false | 多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词 | N
scroll | Object | - | 【开发中】懒加载和虚拟滚动。为保证组件收益最大化,当数据量小于阈值 `scroll.threshold` 时,无论虚拟滚动的配置是否存在,组件内部都不会开启虚拟滚动,`scroll.threshold` 默认为 `100`。TS 类型:`TScroll`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
scroll | Object | - | 懒加载和虚拟滚动。为保证组件收益最大化,当数据量小于阈值 `scroll.threshold` 时,无论虚拟滚动的配置是否存在,组件内部都不会开启虚拟滚动,`scroll.threshold` 默认为 `100`。TS 类型:`TScroll`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型:`SelectInputProps`[SelectInput API Documents](./select-input?tab=api)[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N
showArrow | Boolean | true | 是否显示右侧箭头,默认显示 | N
size | String | medium | 组件尺寸。可选项:small/medium/large。TS 类型:`SizeEnum`[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
Expand Down
4 changes: 2 additions & 2 deletions src/dialog/dialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ export default defineComponent({
if (e.code === 'Escape') {
props.onEscKeydown?.({ e });
// 根据closeOnEscKeydown判断按下ESC时是否触发close事件
if (global.value.closeOnEscKeydown ?? props.closeOnEscKeydown) {
if (props.closeOnEscKeydown ?? global.value.closeOnEscKeydown) {
emitCloseEvent({
trigger: 'esc',
e,
Expand All @@ -202,7 +202,7 @@ export default defineComponent({
}
};
const overlayAction = (e: MouseEvent) => {
if (global.value.closeOnOverlayClick ?? props.closeOnOverlayClick) {
if (props.closeOnOverlayClick ?? global.value.closeOnOverlayClick) {
props.onOverlayClick?.({ e });
emitCloseEvent({
trigger: 'overlay',
Expand Down
12 changes: 2 additions & 10 deletions src/dialog/props.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,9 @@ export default {
default: true,
},
/** 按下 ESC 时是否触发对话框关闭事件 */
closeOnEscKeydown: {
type: Boolean,
default: true,
},
closeOnEscKeydown: Boolean,
/** 点击蒙层时是否触发关闭事件 */
closeOnOverlayClick: {
type: Boolean,
default: true,
},
closeOnOverlayClick: Boolean,
/** 确认按钮。值为 null 则不显示确认按钮。值类型为字符串,则表示自定义按钮文本,值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时,需自行控制确认事件 */
confirmBtn: {
type: [String, Object, Function] as PropType<TdDialogProps['confirmBtn']>,
Expand Down Expand Up @@ -106,8 +100,6 @@ export default {
},
/** 控制对话框是否显示 */
visible: Boolean,
/** 控制对话框是否显示,非受控属性 */
defaultVisible: Boolean,
/** 对话框宽度,示例:320, '500px', '80%' */
width: {
type: [String, Number] as PropType<TdDialogProps['width']>,
Expand Down
4 changes: 1 addition & 3 deletions src/dialog/type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,20 +22,18 @@ export interface TdDialogProps {
* 取消按钮,可自定义。值为 null 则不显示取消按钮。值类型为字符串,则表示自定义按钮文本,值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时,需自行控制取消事件
* @default ''
*/
cancelBtn?: string | ButtonProps | TNode;
cancelBtn?: string | ButtonProps | TNode | null;
/**
* 关闭按钮,可以自定义。值为 true 显示默认关闭按钮,值为 false 不显示关闭按钮。值类型为 string 则直接显示值,如:“关闭”。值类型为 TNode,则表示呈现自定义按钮示例
* @default true
*/
closeBtn?: string | boolean | TNode;
/**
* 按下 ESC 时是否触发对话框关闭事件
* @default true
*/
closeOnEscKeydown?: boolean;
/**
* 点击蒙层时是否触发关闭事件
* @default true
*/
closeOnOverlayClick?: boolean;
/**
Expand Down
6 changes: 3 additions & 3 deletions src/drawer/drawer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default defineComponent({
});

const sizeValue = computed(() => {
const size = global.value.size ?? props.size;
const size = props.size ?? global.value.size;
const defaultSize = isNaN(Number(size)) ? size : `${size}px`;
return (
{
Expand Down Expand Up @@ -175,13 +175,13 @@ export default defineComponent({
};
const handleWrapperClick = (e: MouseEvent) => {
props.onOverlayClick?.({ e });
if (global.value.closeOnOverlayClick ?? props.closeOnOverlayClick) {
if (props.closeOnOverlayClick ?? global.value.closeOnOverlayClick) {
closeDrawer({ trigger: 'overlay', e });
}
};
const onKeyDown = (e: KeyboardEvent) => {
// 根据closeOnEscKeydown判断按下ESC时是否触发close事件
if ((global.value.closeOnEscKeydown ?? props.closeOnEscKeydown) && e.key === 'Escape') {
if ((props.closeOnEscKeydown ?? global.value.closeOnEscKeydown) && e.key === 'Escape') {
props.onEscKeydown?.({ e });
closeDrawer({ trigger: 'esc', e });
}
Expand Down
Loading

0 comments on commit 79ac9e2

Please sign in to comment.