From e1941f0f74a3ee134cb12d540baf45d465ef1373 Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Thu, 18 Jul 2024 14:38:26 +0800 Subject: [PATCH] =?UTF-8?q?feat(tab):=20=E6=94=AF=E6=8C=81vue3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- packages/press-ui/CHANGELOG.md | 30 ++++ packages/press-ui/docs/changelog.md | 30 ++++ packages/press-ui/package.json | 2 +- .../press-ui/src/packages/mixins/relation.js | 22 ++- packages/press-ui/src/packages/package.json | 2 +- .../src/packages/press-back-top/demo.vue | 4 +- .../src/packages/press-cell/css/h5.scss | 5 + .../src/packages/press-cell/css/index.scss | 6 - .../src/packages/press-cell/press-cell.vue | 2 + .../press-ui/src/packages/press-form/demo.vue | 51 ++++--- .../packages/press-popover-plus/css/h5.scss | 138 ++++++++++++++++++ .../css/popover-placement.scss | 138 +----------------- .../press-popover-plus/press-popover-plus.vue | 2 + .../packages/press-popup-plus/css/index.scss | 5 +- .../press-ui/src/packages/press-tab/demo.vue | 18 +++ packages/press-ui/src/pages/index/index.vue | 23 +-- 17 files changed, 288 insertions(+), 192 deletions(-) create mode 100644 packages/press-ui/src/packages/press-cell/css/h5.scss create mode 100644 packages/press-ui/src/packages/press-popover-plus/css/h5.scss diff --git a/package.json b/package.json index afc41053..ad1f45b6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "press-ui", - "version": "2.0.8", + "version": "2.0.9", "description": "简单、易用的跨端组件库，兼容 Vue2 和 Vue3，同时支持 uni-app和普通 Vue 项目", "private": true, "repository": { diff --git a/packages/press-ui/CHANGELOG.md b/packages/press-ui/CHANGELOG.md index b036fb71..0e020836 100644 --- a/packages/press-ui/CHANGELOG.md +++ b/packages/press-ui/CHANGELOG.md @@ -2,6 +2,36 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +### [2.0.9](https://github.com/novlan1/press-ui/compare/v2.0.8...v2.0.9) (2024-07-18) + + +### ✅ Tests | 测试 + +* update snapshot ([3f7c629](https://github.com/novlan1/press-ui/commit/3f7c629b3fa62ce5054f782f6d6b324fa647cec6)) + + +### 🚀 Chore | 构建/工程依赖/工具 + +* 优化demo ([792c8c5](https://github.com/novlan1/press-ui/commit/792c8c54d677ec0b6e281430dd88aecd802fb4fd)) +* eslint disable async-validator ([319dd5a](https://github.com/novlan1/press-ui/commit/319dd5a901bec12b83c1f8c1c924397add967fd3)) +* remove useless comment ([ac08e9b](https://github.com/novlan1/press-ui/commit/ac08e9b2346790e3da6f157ec6027f52eb23b5f3)) +* update index page ([ba9d930](https://github.com/novlan1/press-ui/commit/ba9d930560d942edccca2f494c8af0af95cd8b85)) + + +### ♻️ Code Refactoring | 代码重构 + +* **cell:** 兼容vue3打包 ([2519724](https://github.com/novlan1/press-ui/commit/2519724a0cc265fe367d28863e0c4a01f9f77f22)) +* **popover-plus:** 兼容vue3打包 ([1f18775](https://github.com/novlan1/press-ui/commit/1f18775dfb1c1ceb8c1c25dc53f9fe9a000f2437)) + + +### ✨ Features | 新功能 + +* **cell:** h5下增加cursor: pointer, 优化collapse ([524d341](https://github.com/novlan1/press-ui/commit/524d34184575bdfa336792daec3369986e1a6bb7)) +* **checkbox:** 点击事件阻止冒泡 ([061e732](https://github.com/novlan1/press-ui/commit/061e73213644de1f8974502027168c1ee5123c30)) +* **collapse:** 增加 default-expand-all 属性 ([56409c5](https://github.com/novlan1/press-ui/commit/56409c55d41e79ae2ecd29e8fdc81ca44c38b159)) +* **pull-refresh:** 支持vue3 ([99f811d](https://github.com/novlan1/press-ui/commit/99f811ddeebc891efaf5a201d1dd041102b85794)) +* **relation:** 支持vue3，组件销毁时更新 ([11bb0ae](https://github.com/novlan1/press-ui/commit/11bb0aeb037dc3c08851add13e190c7f2e8111f2)) + ### [2.0.8](https://github.com/novlan1/press-ui/compare/v2.0.7...v2.0.8) (2024-07-15) diff --git a/packages/press-ui/docs/changelog.md b/packages/press-ui/docs/changelog.md index b70901be..520904e0 100644 --- a/packages/press-ui/docs/changelog.md +++ b/packages/press-ui/docs/changelog.md @@ -1,5 +1,35 @@ # 更新日志 +### [2.0.9](https://github.com/novlan1/press-ui/compare/v2.0.8...v2.0.9) (2024-07-18) + + +### Tests ✅ + +* update snapshot ([3f7c629](https://github.com/novlan1/press-ui/commit/3f7c629b3fa62ce5054f782f6d6b324fa647cec6)) + + +### Chore 🚀 + +* 优化demo ([792c8c5](https://github.com/novlan1/press-ui/commit/792c8c54d677ec0b6e281430dd88aecd802fb4fd)) +* eslint disable async-validator ([319dd5a](https://github.com/novlan1/press-ui/commit/319dd5a901bec12b83c1f8c1c924397add967fd3)) +* remove useless comment ([ac08e9b](https://github.com/novlan1/press-ui/commit/ac08e9b2346790e3da6f157ec6027f52eb23b5f3)) +* update index page ([ba9d930](https://github.com/novlan1/press-ui/commit/ba9d930560d942edccca2f494c8af0af95cd8b85)) + + +### Code Refactoring ♻️ + +* **cell:** 兼容vue3打包 ([2519724](https://github.com/novlan1/press-ui/commit/2519724a0cc265fe367d28863e0c4a01f9f77f22)) +* **popover-plus:** 兼容vue3打包 ([1f18775](https://github.com/novlan1/press-ui/commit/1f18775dfb1c1ceb8c1c25dc53f9fe9a000f2437)) + + +### Features 🎉 + +* **cell:** h5下增加cursor: pointer, 优化collapse ([524d341](https://github.com/novlan1/press-ui/commit/524d34184575bdfa336792daec3369986e1a6bb7)) +* **checkbox:** 点击事件阻止冒泡 ([061e732](https://github.com/novlan1/press-ui/commit/061e73213644de1f8974502027168c1ee5123c30)) +* **collapse:** 增加 default-expand-all 属性 ([56409c5](https://github.com/novlan1/press-ui/commit/56409c55d41e79ae2ecd29e8fdc81ca44c38b159)) +* **pull-refresh:** 支持vue3 ([99f811d](https://github.com/novlan1/press-ui/commit/99f811ddeebc891efaf5a201d1dd041102b85794)) +* **relation:** 支持vue3，组件销毁时更新 ([11bb0ae](https://github.com/novlan1/press-ui/commit/11bb0aeb037dc3c08851add13e190c7f2e8111f2)) + ### [2.0.8](https://github.com/novlan1/press-ui/compare/v2.0.7...v2.0.8) (2024-07-15) diff --git a/packages/press-ui/package.json b/packages/press-ui/package.json index ee3ea642..914c3f11 100644 --- a/packages/press-ui/package.json +++ b/packages/press-ui/package.json @@ -1,6 +1,6 @@ { "name": "press-ui", - "version": "2.0.8", + "version": "2.0.9", "description": "简单、易用的跨端组件库，兼容 Vue2 和 Vue3，同时支持 uni-app和普通 Vue 项目", "private": true, "repository": { diff --git a/packages/press-ui/src/packages/mixins/relation.js b/packages/press-ui/src/packages/mixins/relation.js index 7d65e44a..cc7e265f 100644 --- a/packages/press-ui/src/packages/mixins/relation.js +++ b/packages/press-ui/src/packages/mixins/relation.js @@ -60,14 +60,18 @@ export function ChildrenMixin(parent, options = {}) { // #endif }, + // #ifdef VUE2 beforeDestroy() { const that = this; - if (that[parent]) { - that[parent].children = that[parent].children.filter(item => item !== that); - - that?.destroyCallback?.(); - } + that.onBeforeMount(); + }, + // #endif + // #ifdef VUE3 + beforeUnmount() { + const that = this; + that.onBeforeMount(); }, + // #endif methods: { bindRelation() { @@ -91,6 +95,14 @@ export function ChildrenMixin(parent, options = {}) { this[parent].children = children; }, + onBeforeMount() { + const that = this; + if (that[parent]) { + that[parent].children = that[parent].children.filter(item => item !== that); + + that?.destroyCallback?.(); + } + }, }, }; } diff --git a/packages/press-ui/src/packages/package.json b/packages/press-ui/src/packages/package.json index f0c4dd68..6d0a68a3 100644 --- a/packages/press-ui/src/packages/package.json +++ b/packages/press-ui/src/packages/package.json @@ -1,6 +1,6 @@ { "name": "press-ui", - "version": "2.0.8", + "version": "2.0.9", "description": "简单、易用的跨端组件库，兼容 Vue2 和 Vue3，同时支持 uni-app和普通 Vue 项目", "main": "index.js", "repository": { diff --git a/packages/press-ui/src/packages/press-back-top/demo.vue b/packages/press-ui/src/packages/press-back-top/demo.vue index ab85589a..e4830c21 100644 --- a/packages/press-ui/src/packages/press-back-top/demo.vue +++ b/packages/press-ui/src/packages/press-back-top/demo.vue @@ -101,8 +101,8 @@ export default { this.valueMap[key] = value; }, onScroll(e) { - this.scrollTop = e.target.scrollTop; - console.log('[scrollTop]', this.scrollTop); + this.scrollTop = e.target.scrollTop ?? e.detail.scrollTop; + console.log('[scrollTop]', e, this.scrollTop); }, scrollToTop() { that.newScrollTop = that.scrollTop; diff --git a/packages/press-ui/src/packages/press-cell/css/h5.scss b/packages/press-ui/src/packages/press-cell/css/h5.scss new file mode 100644 index 00000000..aab0e1d7 --- /dev/null +++ b/packages/press-ui/src/packages/press-cell/css/h5.scss @@ -0,0 +1,5 @@ +/* #ifdef H5 */ +.press-cell--clickable { + cursor: pointer; +} +/* #endif */ diff --git a/packages/press-ui/src/packages/press-cell/css/index.scss b/packages/press-ui/src/packages/press-cell/css/index.scss index 6cbda41d..cdaecfc7 100644 --- a/packages/press-ui/src/packages/press-cell/css/index.scss +++ b/packages/press-ui/src/packages/press-cell/css/index.scss @@ -107,12 +107,6 @@ line-height: var(--cell-line-height, $cell-line-height); } - &--clickable { - /* #ifdef H5 */ - cursor: pointer; - /* #endif */ - } - // 【修改点】 &--clickable&--hover不能用 &--clickable.press-cell--hover, &--clickable:active { diff --git a/packages/press-ui/src/packages/press-cell/press-cell.vue b/packages/press-ui/src/packages/press-cell/press-cell.vue index f04c2c49..220214b5 100644 --- a/packages/press-ui/src/packages/press-cell/press-cell.vue +++ b/packages/press-ui/src/packages/press-cell/press-cell.vue @@ -186,3 +186,5 @@ export default { + \ No newline at end of file diff --git a/packages/press-ui/src/packages/press-form/demo.vue b/packages/press-ui/src/packages/press-form/demo.vue index 21afc8b7..3fc87832 100644 --- a/packages/press-ui/src/packages/press-form/demo.vue +++ b/packages/press-ui/src/packages/press-form/demo.vue @@ -35,11 +35,13 @@ :readonly="isMp" @click-input="showSex = true; hideKeyboard()" /> - + + - - + - - - - - - - + + + + + + + + + diff --git a/packages/press-ui/src/packages/press-popover-plus/css/h5.scss b/packages/press-ui/src/packages/press-popover-plus/css/h5.scss new file mode 100644 index 00000000..1215b1c9 --- /dev/null +++ b/packages/press-ui/src/packages/press-popover-plus/css/h5.scss @@ -0,0 +1,138 @@ +@import "../../common/style/press/var.scss"; + + +/* #ifdef H5 */ +.press-popover--custom-container { + &[data-popper-placement^='top'] { + .press-popover__arrow { + bottom: 0; + border-top-color: currentColor; + border-bottom-width: 0; + transform: translate(-50%, 100%); + } + } + + &[data-popper-placement='top'] { + transform-origin: 50% 100%; + + .press-popover__arrow { + left: 50%; + } + } + + &[data-popper-placement='top-start'] { + transform-origin: 0 100%; + + .press-popover__arrow { + left: $padding-md; + } + } + + &[data-popper-placement='top-end'] { + transform-origin: 100% 100%; + + .press-popover__arrow { + right: $padding-md; + } + } + + &[data-popper-placement^='left'] { + .press-popover__arrow { + right: 0; + border-right-width: 0; + border-left-color: currentColor; + transform: translate(100%, -50%); + } + } + + &[data-popper-placement='left'] { + transform-origin: 100% 50%; + + .press-popover__arrow { + top: 50%; + } + } + + &[data-popper-placement='left-start'] { + transform-origin: 100% 0; + + .press-popover__arrow { + top: $padding-md; + } + } + + &[data-popper-placement='left-end'] { + transform-origin: 100% 100%; + + .press-popover__arrow { + bottom: $padding-md; + } + } + + &[data-popper-placement^='right'] { + .press-popover__arrow { + left: 0; + border-right-color: currentColor; + border-left-width: 0; + transform: translate(-100%, -50%); + } + } + + &[data-popper-placement='right'] { + transform-origin: 0 50%; + + .press-popover__arrow { + top: 50%; + } + } + + &[data-popper-placement='right-start'] { + transform-origin: 0 0; + + .press-popover__arrow { + top: $padding-md; + } + } + + &[data-popper-placement='right-end'] { + transform-origin: 0 100%; + + .press-popover__arrow { + bottom: $padding-md; + } + } + + &[data-popper-placement^='bottom'] { + .press-popover__arrow { + top: 0; + border-top-width: 0; + border-bottom-color: currentColor; + transform: translate(-50%, -100%); + } + } + + &[data-popper-placement='bottom'] { + transform-origin: 50% 0; + + .press-popover__arrow { + left: 50%; + } + } + + &[data-popper-placement='bottom-start'] { + transform-origin: 0 0; + + .press-popover__arrow { + left: $padding-md; + } + } + + &[data-popper-placement='bottom-end'] { + transform-origin: 100% 0; + + .press-popover__arrow { + right: $padding-md; + } + } +} +/* #endif */ diff --git a/packages/press-ui/src/packages/press-popover-plus/css/popover-placement.scss b/packages/press-ui/src/packages/press-popover-plus/css/popover-placement.scss index 345c4c06..9c751c33 100644 --- a/packages/press-ui/src/packages/press-popover-plus/css/popover-placement.scss +++ b/packages/press-ui/src/packages/press-popover-plus/css/popover-placement.scss @@ -108,140 +108,4 @@ bottom: 16px; } } -} - -/* #ifdef H5 */ -.press-popover--custom-container { - &[data-popper-placement^='top'] { - .press-popover__arrow { - bottom: 0; - border-top-color: currentColor; - border-bottom-width: 0; - transform: translate(-50%, 100%); - } - } - - &[data-popper-placement='top'] { - transform-origin: 50% 100%; - - .press-popover__arrow { - left: 50%; - } - } - - &[data-popper-placement='top-start'] { - transform-origin: 0 100%; - - .press-popover__arrow { - left: $padding-md; - } - } - - &[data-popper-placement='top-end'] { - transform-origin: 100% 100%; - - .press-popover__arrow { - right: $padding-md; - } - } - - &[data-popper-placement^='left'] { - .press-popover__arrow { - right: 0; - border-right-width: 0; - border-left-color: currentColor; - transform: translate(100%, -50%); - } - } - - &[data-popper-placement='left'] { - transform-origin: 100% 50%; - - .press-popover__arrow { - top: 50%; - } - } - - &[data-popper-placement='left-start'] { - transform-origin: 100% 0; - - .press-popover__arrow { - top: $padding-md; - } - } - - &[data-popper-placement='left-end'] { - transform-origin: 100% 100%; - - .press-popover__arrow { - bottom: $padding-md; - } - } - - &[data-popper-placement^='right'] { - .press-popover__arrow { - left: 0; - border-right-color: currentColor; - border-left-width: 0; - transform: translate(-100%, -50%); - } - } - - &[data-popper-placement='right'] { - transform-origin: 0 50%; - - .press-popover__arrow { - top: 50%; - } - } - - &[data-popper-placement='right-start'] { - transform-origin: 0 0; - - .press-popover__arrow { - top: $padding-md; - } - } - - &[data-popper-placement='right-end'] { - transform-origin: 0 100%; - - .press-popover__arrow { - bottom: $padding-md; - } - } - - &[data-popper-placement^='bottom'] { - .press-popover__arrow { - top: 0; - border-top-width: 0; - border-bottom-color: currentColor; - transform: translate(-50%, -100%); - } - } - - &[data-popper-placement='bottom'] { - transform-origin: 50% 0; - - .press-popover__arrow { - left: 50%; - } - } - - &[data-popper-placement='bottom-start'] { - transform-origin: 0 0; - - .press-popover__arrow { - left: $padding-md; - } - } - - &[data-popper-placement='bottom-end'] { - transform-origin: 100% 0; - - .press-popover__arrow { - right: $padding-md; - } - } -} -/* #endif */ +} \ No newline at end of file diff --git a/packages/press-ui/src/packages/press-popover-plus/press-popover-plus.vue b/packages/press-ui/src/packages/press-popover-plus/press-popover-plus.vue index a5eca19b..59bb7468 100644 --- a/packages/press-ui/src/packages/press-popover-plus/press-popover-plus.vue +++ b/packages/press-ui/src/packages/press-popover-plus/press-popover-plus.vue @@ -244,3 +244,5 @@ export default { + diff --git a/packages/press-ui/src/packages/press-popup-plus/css/index.scss b/packages/press-ui/src/packages/press-popup-plus/css/index.scss index 4da4c1a5..526584c0 100644 --- a/packages/press-ui/src/packages/press-popup-plus/css/index.scss +++ b/packages/press-ui/src/packages/press-popup-plus/css/index.scss @@ -11,10 +11,6 @@ -webkit-overflow-scrolling: touch; background-color: var(--popup-background-color, $popup-background-color); - /* #ifdef MP-ALIPAY */ - touch-action: none; - /* #endif */ - &--center { top: 50%; left: 50%; @@ -112,6 +108,7 @@ } /* #ifdef MP-ALIPAY */ ::v-deep &__close-icon, + &__close-icon, /* #endif */ &__close-icon { position: absolute; diff --git a/packages/press-ui/src/packages/press-tab/demo.vue b/packages/press-ui/src/packages/press-tab/demo.vue index 712144ef..1dffe8f7 100644 --- a/packages/press-ui/src/packages/press-tab/demo.vue +++ b/packages/press-ui/src/packages/press-tab/demo.vue @@ -1,3 +1,4 @@ +