From f582c783ff1e4435f5d6f03d5ce8658df84a7f04 Mon Sep 17 00:00:00 2001 From: EmberSpirit <85718018+wangKBweb@users.noreply.github.com> Date: Mon, 5 Sep 2022 13:55:48 +0800 Subject: [PATCH] perf: Improved Menu performance and Flip bugs (#680) --- .../__snapshots__/index.spec.js.snap | 32 +- packages/varlet-ui/src/menu-v2/MenuV2.vue | 16 +- packages/varlet-ui/src/menu-v2/props.ts | 4 + packages/varlet-ui/src/select/Select.vue | 60 +-- .../__snapshots__/index.spec.js.snap | 465 +++--------------- .../src/select/__tests__/index.spec.js | 9 +- packages/varlet-ui/src/select/docs/en-US.md | 22 +- packages/varlet-ui/src/select/docs/zh-CN.md | 21 +- .../varlet-ui/src/select/example/index.vue | 8 - packages/varlet-ui/src/select/select.less | 12 +- packages/varlet-ui/types/menuV2.d.ts | 1 + pnpm-lock.yaml | 2 +- 12 files changed, 135 insertions(+), 517 deletions(-) diff --git a/packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap index 76fe97e7f2d..b71b39f1093 100644 --- a/packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap +++ b/packages/varlet-ui/src/form/__tests__/__snapshots__/index.spec.js.snap @@ -315,8 +315,8 @@ exports[`test form with select 1`] = `
-
-
+
+
@@ -324,9 +324,9 @@ exports[`test form with select 1`] = `
+ +
- -
@@ -345,8 +345,8 @@ exports[`test form with select 2`] = `
-
-
+
+
@@ -354,9 +354,9 @@ exports[`test form with select 2`] = `
+ +
- -
@@ -375,8 +375,8 @@ exports[`test form with select 3`] = `
-
-
+
+
@@ -384,9 +384,9 @@ exports[`test form with select 3`] = `
+ +
- -
@@ -408,16 +408,16 @@ exports[`test form with select 4`] = `
-
-
+
+
+ +
- -
diff --git a/packages/varlet-ui/src/menu-v2/MenuV2.vue b/packages/varlet-ui/src/menu-v2/MenuV2.vue index 261244be4ff..cbca4eb0ce4 100644 --- a/packages/varlet-ui/src/menu-v2/MenuV2.vue +++ b/packages/varlet-ui/src/menu-v2/MenuV2.vue @@ -244,7 +244,10 @@ export default defineComponent({ return { placement, modifiers: [ - flip, + { + ...flip, + enabled: show.value, + }, { ...offset, options: { @@ -262,6 +265,12 @@ export default defineComponent({ // expose const open = () => { + const { disabled } = props + + if (disabled) { + return + } + show.value = true call(props['onUpdate:show'], true) } @@ -307,6 +316,8 @@ export default defineComponent({ } ) + watch(() => props.disabled, close) + onMounted(() => { popover = createPopper(host.value!, menu.value!, getPopperOptions()) @@ -316,6 +327,7 @@ export default defineComponent({ }) onUnmounted(() => { document.removeEventListener('click', handleMenuClose) + popover!.destroy() }) return { @@ -342,4 +354,6 @@ export default defineComponent({ diff --git a/packages/varlet-ui/src/menu-v2/props.ts b/packages/varlet-ui/src/menu-v2/props.ts index 69007ff80f9..e00a1f0c785 100644 --- a/packages/varlet-ui/src/menu-v2/props.ts +++ b/packages/varlet-ui/src/menu-v2/props.ts @@ -49,6 +49,10 @@ export const props = { type: Boolean, default: false, }, + disabled: { + type: Boolean, + default: false, + }, trigger: { type: String as PropType<'click' | 'hover'>, default: 'click', diff --git a/packages/varlet-ui/src/select/Select.vue b/packages/varlet-ui/src/select/Select.vue index 568129d8f36..855696a4c70 100644 --- a/packages/varlet-ui/src/select/Select.vue +++ b/packages/varlet-ui/src/select/Select.vue @@ -17,8 +17,15 @@
- -
+
+
- -
- - + + +
@@ -114,7 +121,7 @@ - - -``` - ## API ### Props @@ -344,7 +325,8 @@ Here are the CSS variables used by the component, Styles can be customized using | Variable | Default | | --- | --- | | `--select-select-text-color` | `#555` | -| `--select-select-padding` | `5px 0` | +| `--select-select-min-height` | `22px` | +| `--select-menu-margin-top` | `10px` | | `--select-error-color` | `var(--color-danger)` | | `--select-blur-color` | `#888` | | `--select-focus-color` | `var(--color-primary)` | diff --git a/packages/varlet-ui/src/select/docs/zh-CN.md b/packages/varlet-ui/src/select/docs/zh-CN.md index ae381ecb20e..6456fe9ef27 100644 --- a/packages/varlet-ui/src/select/docs/zh-CN.md +++ b/packages/varlet-ui/src/select/docs/zh-CN.md @@ -244,24 +244,6 @@ const value = ref([]) ``` -### 垂直偏移 -```html - - - -``` - ## API ### 属性 @@ -341,7 +323,8 @@ const value = ref('') | 变量名 | 默认值 | | --- | --- | | `--select-select-text-color` | `#555` | -| `--select-select-padding` | `5px 0` | +| `--select-select-min-height` | `22px` | +| `--select-menu-margin-top` | `10px` | | `--select-error-color` | `var(--color-danger)` | | `--select-blur-color` | `#888` | | `--select-focus-color` | `var(--color-primary)` | diff --git a/packages/varlet-ui/src/select/example/index.vue b/packages/varlet-ui/src/select/example/index.vue index f118df2b624..46b7cc26feb 100644 --- a/packages/varlet-ui/src/select/example/index.vue +++ b/packages/varlet-ui/src/select/example/index.vue @@ -132,14 +132,6 @@ watchDarkMode(dark) - {{ pack.offsetY }} - - - - - - -
diff --git a/packages/varlet-ui/src/select/select.less b/packages/varlet-ui/src/select/select.less index 8c118992b0e..1a44c16d28f 100644 --- a/packages/varlet-ui/src/select/select.less +++ b/packages/varlet-ui/src/select/select.less @@ -1,5 +1,6 @@ @select-select-text-color: #555; -@select-select-padding: 5px 0; +@select-select-min-height: 22px; +@select-menu-margin-top: 10px; @select-error-color: var(--color-danger); @select-blur-color: #888; @select-focus-color: var(--color-primary); @@ -17,8 +18,9 @@ :root { --select-select-text-color: @select-select-text-color; - --select-select-padding: @select-select-padding; + --select-select-min-height: @select-select-min-height; --select-error-color: @select-error-color; + --select-menu-margin-top: @select-menu-margin-top; --select-blur-color: @select-blur-color; --select-focus-color: @select-focus-color; --select-scroller-background: @select-scroller-background; @@ -60,6 +62,7 @@ &__menu[var-select-cover] { flex-grow: 1; background: transparent; + margin-top: var(--select-menu-margin-top); } &__chip[var-select-cover] { @@ -74,6 +77,7 @@ } &__wrap { + width: 100%; position: relative; display: flex; flex-direction: column; @@ -105,8 +109,7 @@ justify-content: space-between; align-items: center; width: 100%; - min-height: 32px; - padding: var(--select-select-padding); + min-height: var(--select-select-min-height); outline: none; border: none; font-size: inherit; @@ -118,6 +121,7 @@ &__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size); + transform: translateY(calc(-1 * var(--select-menu-margin-top) / 2)); } &__line { diff --git a/packages/varlet-ui/types/menuV2.d.ts b/packages/varlet-ui/types/menuV2.d.ts index 933079d7b4c..9bde8d1f5eb 100644 --- a/packages/varlet-ui/types/menuV2.d.ts +++ b/packages/varlet-ui/types/menuV2.d.ts @@ -19,6 +19,7 @@ export type MenuV2Trigger = 'click' | 'hover' export interface MenuV2Props extends BasicAttributes { show?: boolean + disabled?: boolean trigger?: MenuV2Trigger placement?: MenuV2Placement offsetX?: string | number diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 853b016e8bd..8eb673940b8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3696,7 +3696,7 @@ packages: dev: true /ee-first/1.1.1: - resolution: {integrity: sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=} + resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==} dev: true /ejs/3.1.8: