From dc26418d36178857590850cc82254eea77b7eefd Mon Sep 17 00:00:00 2001 From: zcating Date: Mon, 6 Dec 2021 09:55:31 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(button):=20=E6=B7=BB=E5=8A=A0=20"succe?= =?UTF-8?q?ss"=20=E5=92=8C=20"warning"=20=E4=B8=A4=E7=A7=8D=E9=A3=8E?= =?UTF-8?q?=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/button/src/button-types.ts | 2 +- .../devui-vue/docs/components/button/index.md | 27 +++++++++++-------- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/packages/devui-vue/devui/button/src/button-types.ts b/packages/devui-vue/devui/button/src/button-types.ts index 2c09d2a6..e0e117e3 100644 --- a/packages/devui-vue/devui/button/src/button-types.ts +++ b/packages/devui-vue/devui/button/src/button-types.ts @@ -1,7 +1,7 @@ import { ExtractPropTypes, PropType } from 'vue'; export type IButtonType = 'button' | 'submit' | 'reset'; -export type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger'; +export type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger' | 'success' | 'warning'; export type IButtonPosition = 'left' | 'right' | 'default'; export type IButtonSize = 'lg' | 'md' | 'sm' | 'xs'; diff --git a/packages/devui-vue/docs/components/button/index.md b/packages/devui-vue/docs/components/button/index.md index 3aa254ac..539736d5 100644 --- a/packages/devui-vue/docs/components/button/index.md +++ b/packages/devui-vue/docs/components/button/index.md @@ -148,20 +148,25 @@ ### API d-button 参数 -| 参数 | 类型 | 默认 | 说明 | -| :-------: | :----------------------------------------------------------: | :-------: | :------------------------------- | -| type | `'button' \| 'submit' \| 'reset'` | 'button' | 可选，按钮类型 | -| btnStyle | `'common' \| 'primary' \| 'text' \| 'text-dark' \| 'danger'` | 'primary' | 可选，按钮风格 | -| position | `'left' \| 'right' \| 'default'` | 'default' | 可选，按钮位置 | -| size | `'lg' \| 'md' \| 'sm' \| 'xs'` | 'md' | 可选，按钮大小 | -| bordered | `boolean` | false | 可选，是否有边框 | -| icon | `string` | -- | 可选，点击背景触发的事件 | -| width | `string` | -- | 可选，弹出框宽度(e.g '300px') | -| disabled | `boolean` | false | 可选，是否禁用button | -| autofocus | `boolean` | false | 可选，按钮加载时是否自动获得焦点 | +| 参数 | 类型 | 默认 | 说明 | +| :-------: | :-------------------------------: | :-------: | :------------------------------- | +| type | `'button' \| 'submit' \| 'reset'` | 'button' | 可选，按钮类型 | +| btnStyle | `IButtonStyle` | 'primary' | 可选，按钮风格 | +| position | `'left' \| 'right' \| 'default'` | 'default' | 可选，按钮位置 | +| size | `'lg' \| 'md' \| 'sm' \| 'xs'` | 'md' | 可选，按钮大小 | +| bordered | `boolean` | false | 可选，是否有边框 | +| icon | `string` | -- | 可选，点击背景触发的事件 | +| width | `string` | -- | 可选，弹出框宽度(e.g '300px') | +| disabled | `boolean` | false | 可选，是否禁用button | +| autofocus | `boolean` | false | 可选，按钮加载时是否自动获得焦点 | d-button 事件 | 参数 | 类型 | 默认 | 说明 | | :-----: | :---------------------------: | :---: | :------------- | | onClick | `(event: MouseEvent) => void` | -- | 可选，点击事件 | + +IButtonStyle +``` +type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger' | 'success' | 'warning'; +``` \ No newline at end of file -- Gitee From 2b9b9ddef46d7ebe9a88884019099cadc13c9a43 Mon Sep 17 00:00:00 2001 From: zcating Date: Thu, 9 Dec 2021 11:57:35 +0800 Subject: [PATCH 2/2] =?UTF-8?q?doc(button):=20=E4=BC=98=E5=8C=96=E6=96=87?= =?UTF-8?q?=E6=A1=A3=EF=BC=8C=E6=96=B0=E5=A2=9E=E6=8C=89=E9=92=AE=E5=B1=95?= =?UTF-8?q?=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui-vue/devui/button/src/button.scss | 36 +++++++- .../devui-vue/devui/style/theme/_color.scss | 6 ++ .../devui-vue/docs/components/button/index.md | 91 ++++++++++++------- 3 files changed, 98 insertions(+), 35 deletions(-) diff --git a/packages/devui-vue/devui/button/src/button.scss b/packages/devui-vue/devui/button/src/button.scss index 1577e7ab..eb1415eb 100644 --- a/packages/devui-vue/devui/button/src/button.scss +++ b/packages/devui-vue/devui/button/src/button.scss @@ -56,6 +56,16 @@ $devui-btn-normal-config: ( min-width: $devui-btn-min-width, background-color: $devui-contrast ), + success: ( + color: $devui-dark-text, + min-width: $devui-btn-min-width, + background-color: $devui-success + ), + warning: ( + color: $devui-dark-text, + min-width: $devui-btn-min-width, + background-color: $devui-warning + ), xs: ( padding: $devui-btn-xs-padding, height: $devui-btn-xs-height, @@ -160,6 +170,28 @@ $devui-btn-pseudo-config: ( active: ( background-color: $devui-contrast-active ) + ), + success: ( + hover: ( + background-color: $devui-success-hover + ), + focus: ( + background-color: $devui-success-hover + ), + active: ( + background-color: $devui-success-active + ) + ), + warning: ( + hover: ( + background-color: $devui-warning-hover + ), + focus: ( + background-color: $devui-warning-hover + ), + active: ( + background-color: $devui-warning-active + ) ) ); @@ -172,14 +204,14 @@ $devui-btn-pseudo-config: ( border-width: 1px; border-color: transparent; background-color: transparent; - @each $type in text, text-dark, common, stress, primary, danger, left, right, xs, sm, lg { + @each $type in text, text-dark, common, stress, primary, danger, success, warning, left, right, xs, sm, lg { &.devui-btn-#{$type} { @each $key, $value in map-get($devui-btn-normal-config, $type) { #{$key}: $value; } } } - @each $type in text, text-dark, common, stress, primary, danger { + @each $type in text, text-dark, common, stress, primary, danger, success, warning, { &.devui-btn-#{$type} { @each $pseudo, $value in map-get($devui-btn-pseudo-config, $type) { &:#{$pseudo} { diff --git a/packages/devui-vue/devui/style/theme/_color.scss b/packages/devui-vue/devui/style/theme/_color.scss index 3245ca18..307debe6 100755 --- a/packages/devui-vue/devui/style/theme/_color.scss +++ b/packages/devui-vue/devui/style/theme/_color.scss @@ -26,8 +26,14 @@ $devui-block: var(--devui-block, #ffffff); // 大面 $devui-area: var(--devui-area, #f8f8f8); // 可折叠区块的背景色（展开区域颜色） $devui-danger: var(--devui-danger, #f66f6a); // 失败、错误、告警 $devui-warning: var(--devui-warning, #fac20a); // 警告、需注意类型提示 +$devui-warning-hover: var(--devui-warning, #fac20a); // 警告、需注意类型提示 +$devui-warning-active: var(--devui-warning, #fac20a); +$devui-warning-active-focus: var(--devui-warning, #fac20a); $devui-waiting: var(--devui-waiting, #9faad7); // 等待中 $devui-success: var(--devui-success, #50d4ab); // 成功、正确 +$devui-success-hover: var(--devui-warning, #50d4ab); // 成功、 +$devui-success-active: var(--devui-warning, #50d4ab); +$devui-success-active-focus: var(--devui-warning, #50d4ab); $devui-info: var(--devui-info, #5e7ce0); // 通知、一般提示、执行中 $devui-initial: var(--devui-initial, #e9edfa); // 初始化、未执行 $devui-unavailable: var(--devui-unavailable, #f5f5f6); // 不可用、禁用状态 diff --git a/packages/devui-vue/docs/components/button/index.md b/packages/devui-vue/docs/components/button/index.md index 539736d5..6129b784 100644 --- a/packages/devui-vue/docs/components/button/index.md +++ b/packages/devui-vue/docs/components/button/index.md @@ -51,6 +51,23 @@ ``` ::: +### 警示按钮 +用于标识系统中的关键操作，例如购买场景。 +:::demo +```vue + +``` +::: + ### 文字按钮 用于标识系统中的关键操作，例如购买场景。 :::demo @@ -89,51 +106,44 @@ :::demo ```vue