From 7ae22f37318ec4c4bc54b6c868dd6433224aa0ac Mon Sep 17 00:00:00 2001 From: haoziqaq <357229046@qq.com> Date: Sat, 3 Dec 2022 01:29:57 +0800 Subject: [PATCH] feat(ui/popup): add defaultStyle prop --- packages/varlet-ui/src/popup/Popup.tsx | 7 +- .../__snapshots__/index.spec.js.snap | 2 +- .../src/popup/__tests__/index.spec.js | 16 +- packages/varlet-ui/src/popup/docs/en-US.md | 1 + packages/varlet-ui/src/popup/docs/zh-CN.md | 23 +- packages/varlet-ui/src/popup/popup.less | 5 +- packages/varlet-ui/src/popup/props.ts | 4 + packages/varlet-ui/src/result/Result.vue | 22 +- packages/varlet-ui/src/result/Success.vue | 29 ++- packages/varlet-ui/src/result/docs/zh-CN.md | 224 +++++++++++++----- .../varlet-ui/src/result/example/index.vue | 56 +++-- .../src/result/example/locale/en-US.ts | 9 +- .../src/result/example/locale/zh-CN.ts | 9 +- packages/varlet-ui/src/result/props.ts | 7 +- packages/varlet-ui/src/result/result.less | 62 ++--- packages/varlet-ui/types/popup.d.ts | 1 + packages/varlet-ui/types/result.d.ts | 4 +- packages/varlet-ui/varlet.config.mjs | 1 + 18 files changed, 307 insertions(+), 175 deletions(-) diff --git a/packages/varlet-ui/src/popup/Popup.tsx b/packages/varlet-ui/src/popup/Popup.tsx index c150fc04e3c..b6ca724fea0 100644 --- a/packages/varlet-ui/src/popup/Popup.tsx +++ b/packages/varlet-ui/src/popup/Popup.tsx @@ -63,7 +63,12 @@ export default defineComponent({ const renderContent = () => { return (
diff --git a/packages/varlet-ui/src/popup/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/popup/__tests__/__snapshots__/index.spec.js.snap index 70146101f0d..93afa637a47 100644 --- a/packages/varlet-ui/src/popup/__tests__/__snapshots__/index.spec.js.snap +++ b/packages/varlet-ui/src/popup/__tests__/__snapshots__/index.spec.js.snap @@ -16,7 +16,7 @@ exports[`test popup show 2`] = `
-
default slot content
+
default slot content
" diff --git a/packages/varlet-ui/src/popup/__tests__/index.spec.js b/packages/varlet-ui/src/popup/__tests__/index.spec.js index 6014cce0428..bcf5fb863fd 100644 --- a/packages/varlet-ui/src/popup/__tests__/index.spec.js +++ b/packages/varlet-ui/src/popup/__tests__/index.spec.js @@ -12,7 +12,7 @@ const Wrapper = { components: { [VarPopup.name]: VarPopup, }, - props: ['closeOnClickOverlay', 'onOpen', 'onClose', 'onClickOverlay'], + props: ['closeOnClickOverlay', 'onOpen', 'onClose', 'onClickOverlay', 'defaultStyle'], data: () => ({ show: false, }), @@ -101,3 +101,17 @@ test('test popup z-index', async () => { wrapper.unmount() }) + +test('test popup default style', async () => { + const wrapper = mount(Wrapper, { + props: { + defaultStyle: false, + }, + }) + + await wrapper.setData({ show: true }) + expect(wrapper.find('.var-popup--content-background-color').exists()).toBeFalsy() + expect(wrapper.find('.var-elevation--3').exists()).toBeFalsy() + + wrapper.unmount() +}) diff --git a/packages/varlet-ui/src/popup/docs/en-US.md b/packages/varlet-ui/src/popup/docs/en-US.md index 7bf329697a3..4be9c8ffe2c 100644 --- a/packages/varlet-ui/src/popup/docs/en-US.md +++ b/packages/varlet-ui/src/popup/docs/en-US.md @@ -196,6 +196,7 @@ const event = ref(false) | `overlay` | Whether to display the overlay | _boolean_ | `true` | | `overlay-class` | Custom overlay class | _string_ | `-` | | `overlay-style` | Custom overlay style | _object_ | `-` | +| `default-style` | Whether to enable the default style | _boolean_ | `true` | | `transition` | Transition animation name | _string_ | `-` | | `lock-scroll` | Whether to disable scrolling penetration, scrolling the Popup when disabled will not cause the body to scroll | _boolean_ | `true` | | `close-on-click-overlay` | Whether to click the overlay to close the Popup | _boolean_ | `true` | diff --git a/packages/varlet-ui/src/popup/docs/zh-CN.md b/packages/varlet-ui/src/popup/docs/zh-CN.md index 13d89dbd1c9..61f4f6aee0d 100644 --- a/packages/varlet-ui/src/popup/docs/zh-CN.md +++ b/packages/varlet-ui/src/popup/docs/zh-CN.md @@ -191,17 +191,18 @@ const event = ref(false) ### 属性 -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| `v-model:show` | 是否显示弹出层 | _boolean_ | `false` | -| `position` | 弹出位置，可选值为 `top` `bottom` `right` `left` `center` | _string_ | `center` | -| `overlay` | 是否显示遮罩层 | _boolean_ | `true` | -| `overlay-class` | 自定义遮罩层的 class | _string_ | `-` | -| `overlay-style` | 自定义遮罩层的 style | _object_ | `-` | -| `transition` | 过度动画的名称 | _string_ | `-` | -| `lock-scroll` | 是否禁止滚动穿透，禁止时滚动弹出层不会引发 body 的滚动 | _boolean_ | `true` | -| `close-on-click-overlay` | 是否点击遮罩层关闭弹出层 | _boolean_ | `true` | -| `teleport` | 弹出层挂载的位置 | _TeleportProps['to']_ | `-` | +| 参数 | 说明 | 类型 | 默认值 | +|--------------------------|-------------------------------------------------|-----------------------|----------| +| `v-model:show` | 是否显示弹出层 | _boolean_ | `false` | +| `position` | 弹出位置，可选值为 `top` `bottom` `right` `left` `center` | _string_ | `center` | +| `overlay` | 是否显示遮罩层 | _boolean_ | `true` | +| `overlay-class` | 自定义遮罩层的 class | _string_ | `-` | +| `overlay-style` | 自定义遮罩层的 style | _object_ | `-` | +| `default-style` | 是否启用默认样式 | _boolean_ | `true` | +| `transition` | 过度动画的名称 | _string_ | `-` | +| `lock-scroll` | 是否禁止滚动穿透，禁止时滚动弹出层不会引发 body 的滚动 | _boolean_ | `true` | +| `close-on-click-overlay` | 是否点击遮罩层关闭弹出层 | _boolean_ | `true` | +| `teleport` | 弹出层挂载的位置 | _TeleportProps['to']_ | `-` | ### 事件 diff --git a/packages/varlet-ui/src/popup/popup.less b/packages/varlet-ui/src/popup/popup.less index b257223fe87..d7b9a7e9cd0 100644 --- a/packages/varlet-ui/src/popup/popup.less +++ b/packages/varlet-ui/src/popup/popup.less @@ -84,10 +84,13 @@ &__content { overflow: auto; - background-color: var(--popup-content-background-color); transition: all 0.25s; } + &--content-background-color { + background-color: var(--popup-content-background-color); + } + &--center { position: relative; } diff --git a/packages/varlet-ui/src/popup/props.ts b/packages/varlet-ui/src/popup/props.ts index 685e463c4c2..f007f343895 100644 --- a/packages/varlet-ui/src/popup/props.ts +++ b/packages/varlet-ui/src/popup/props.ts @@ -35,6 +35,10 @@ export const props = { type: Boolean, default: true, }, + defaultStyle: { + type: Boolean, + default: true, + }, teleport: { type: String as PropType, }, diff --git a/packages/varlet-ui/src/result/Result.vue b/packages/varlet-ui/src/result/Result.vue index e5dcff874f9..4736dd56e47 100644 --- a/packages/varlet-ui/src/result/Result.vue +++ b/packages/varlet-ui/src/result/Result.vue @@ -1,11 +1,5 @@ - - diff --git a/packages/varlet-ui/src/result/docs/zh-CN.md b/packages/varlet-ui/src/result/docs/zh-CN.md index 513f547ee14..e60e69982dd 100644 --- a/packages/varlet-ui/src/result/docs/zh-CN.md +++ b/packages/varlet-ui/src/result/docs/zh-CN.md @@ -8,66 +8,171 @@ ```html ``` -### 显示描述 - -```html - - -``` +### 自定义图片 -### 修改背景色 +通过 `image` 插槽对图片进行自定义 ```html - -``` - -### 使用插槽 - -```html - - +``` + +### 类型 + +结果类型，可选值为 `info`，`success`，`warning`，`error`，`question`，`empty`。 + +```html + + + + + ``` @@ -75,13 +180,13 @@ ### 属性 -| 参数 | 说明 | 类型 | 默认值 | -|-------------|-----------------------------------------------------------------|--------|---------| -| `image-size` | 图标尺寸 | _string \| number_ | `-` | -| `type` | 图标状态，可选值为 `info` `success` `warning` `error` `question` `empty` | _string_ | `-` | -|`title` | 标题 | _string_ | `-` | -|`description` | 描述 | _string_ | `-` | -|`duration`| 过度动画所需时间（ms） | _number_ | `300` | +| 参数 | 说明 | 类型 | 默认值 | +|---------------|-----------------------------------------------------------------|-------------------|-----------| +| `type` | 结果状态，可选值为 `info` `success` `warning` `error` `question` `empty` | _string_ | `success` | +| `title` | 标题 | _string_ | `-` | +| `description` | 描述 | _string_ | `-` | +| `image-size` | 图片尺寸 | _string \| number_ | `-` | +| `animation` | 是否开启动画，仅对 `success` 状态有效 | _string \| number_ | `-` | ### 插槽 @@ -99,17 +204,6 @@ | 变量名 | 默认值 | |------------------------------------|-------------------------------| | `--result-background` | `#fff` | -| `--result-padding` | `24px` | -| `--result-border-radius` | `3px` | -| `--result-title-color` | `#333` | -| `--result-title-font-size` | `32px` | -| `--result-title-margin` | `15px 0 0 0` | -| `--result-image-size` | `80px` | -| `--result-title-font-weight` | `500` | -| `--result-description-margin` | `10px 0 0 0` | -| `--result-description-font-size` | `14px` | -| `--result-description-color` | `rgba(0, 0, 0, 0.6)` | -| `--result-description-line-height` | `1.6` | | `--result-info-color` | `var(--color-info)` | | `--result-info-border-color` | `rgba(0, 175, 239, 0.3)` | | `--result-success-color` | `var(--color-success)` | @@ -118,8 +212,20 @@ | `--result-error-border-color` | `rgba(244, 67, 54, 0.3)` | | `--result-warning-color` | `var(--color-warning)` | | `--result-warning-border-color` | `rgba(255, 159, 0, 0.3)` | -| `--result-question-color` | `#607d8` | +| `--result-question-color` | `##607d8b` | | `--result-question-border-color` | `rgba(96, 125, 139, 0.3)` | | `--result-empty-color` | `#9e9e9e` | | `--result-empty-border-color` | `rgba(158, 158, 158, 0.3)` | +| `--result-padding` | `24px` | +| `--result-border-radius` | `3px` | +| `--result-title-color` | `#333` | +| `--result-title-font-size` | `32px` | +| `--result-title-margin` | `15px 0 0 0` | +| `--result-image-size` | `80px` | +| `--result-title-font-weight` | `500` | +| `--result-description-margin` | `10px 0 0 0` | +| `--result-description-font-size` | `14px` | +| `--result-description-color` | `rgba(0, 0, 0, 0.6)` | +| `--result-description-line-height` | `1.6` | + diff --git a/packages/varlet-ui/src/result/example/index.vue b/packages/varlet-ui/src/result/example/index.vue index 8b565956ca2..7d849fb1ac0 100644 --- a/packages/varlet-ui/src/result/example/index.vue +++ b/packages/varlet-ui/src/result/example/index.vue @@ -20,25 +20,15 @@ watchDarkMode(dark)