From f486ba60a048b20ab5cf2ad9fddc54d7fb3bfe36 Mon Sep 17 00:00:00 2001 From: Fifteen <66454152+QFifteen@users.noreply.github.com> Date: Sun, 24 Mar 2024 13:55:44 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20`ReSegmented`=E5=88=86=E6=AE=B5?= =?UTF-8?q?=E6=8E=A7=E5=88=B6=E5=99=A8=E6=96=B0=E5=A2=9E`size`=E5=B1=9E?= =?UTF-8?q?=E6=80=A7=EF=BC=8C=E4=BB=A5=E4=BE=BF=E9=80=82=E9=85=8D=E4=B8=8D?= =?UTF-8?q?=E5=90=8C=E7=9A=84=E5=9C=BA=E6=99=AF=20(#1016)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: `ReSegmented`分段控制器新增`size`属性，以便适配不同的场景 --- src/components/ReSegmented/src/index.css | 101 ++++++++++++++++++----- src/components/ReSegmented/src/index.tsx | 36 +++++--- src/views/components/segmented.vue | 35 +++++--- 3 files changed, 131 insertions(+), 41 deletions(-) diff --git a/src/components/ReSegmented/src/index.css b/src/components/ReSegmented/src/index.css index 97c9d7675..503bbe43f 100644 --- a/src/components/ReSegmented/src/index.css +++ b/src/components/ReSegmented/src/index.css @@ -1,11 +1,20 @@ .pure-segmented { + --pure-control-padding-horizontal: 12px; + --pure-control-padding-horizontal-sm: 8px; + --pure-segmented-track-padding: 2px; + --pure-segmented-line-width: 1px; + + --pure-segmented-border-radius-small: 4px; + --pure-segmented-border-radius-base: 6px; + --pure-segmented-border-radius-large: 8px; + box-sizing: border-box; display: inline-block; - padding: 2px; - font-size: 14px; + padding: var(--pure-segmented-track-padding); + font-size: var(--el-font-size-base); color: rgba(0, 0, 0, 0.65); background-color: rgb(0 0 0 / 4%); - border-radius: 2px; + border-radius: var(--pure-segmented-border-radius-base); } .pure-segmented-block { @@ -23,6 +32,75 @@ text-overflow: ellipsis; } +/* small */ +.pure-segmented.pure-segmented--small { + border-radius: var(--pure-segmented-border-radius-small); +} +.pure-segmented.pure-segmented--small .pure-segmented-item { + border-radius: var(--el-border-radius-small); +} +.pure-segmented.pure-segmented--small .pure-segmented-item > div { + min-height: calc( + var(--el-component-size-small) - var(--pure-segmented-track-padding) * 2 + ); + line-height: calc( + var(--el-component-size-small) - var(--pure-segmented-track-padding) * 2 + ); + padding: 0 + calc( + var(--pure-control-padding-horizontal-sm) - + var(--pure-segmented-line-width) + ); +} + +/* large */ +.pure-segmented.pure-segmented--large { + border-radius: var(--pure-segmented-border-radius-large); +} +.pure-segmented.pure-segmented--large .pure-segmented-item { + border-radius: calc( + var(--el-border-radius-base) + var(--el-border-radius-small) + ); +} +.pure-segmented.pure-segmented--large .pure-segmented-item > div { + min-height: calc( + var(--el-component-size-large) - var(--pure-segmented-track-padding) * 2 + ); + line-height: calc( + var(--el-component-size-large) - var(--pure-segmented-track-padding) * 2 + ); + padding: 0 + calc( + var(--pure-control-padding-horizontal) - var(--pure-segmented-line-width) + ); + font-size: var(--el-font-size-medium); +} + +/* default */ +.pure-segmented-item { + position: relative; + text-align: center; + cursor: pointer; + border-radius: var(--el-border-radius-base); + transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); +} +.pure-segmented .pure-segmented-item > div { + min-height: calc( + var(--el-component-size) - var(--pure-segmented-track-padding) * 2 + ); + line-height: calc( + var(--el-component-size) - var(--pure-segmented-track-padding) * 2 + ); + padding: 0 + calc( + var(--pure-control-padding-horizontal) - var(--pure-segmented-line-width) + ); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + transition: 0.1s; +} + .pure-segmented-group { position: relative; display: flex; @@ -52,23 +130,6 @@ will-change: transform, width; } -.pure-segmented-item { - position: relative; - text-align: center; - cursor: pointer; - border-radius: 4px; - transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); -} - -.pure-segmented-item > div { - min-height: 28px; - line-height: 28px; - padding: 0 11px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - .pure-segmented-item > input { position: absolute; inset-block-start: 0; diff --git a/src/components/ReSegmented/src/index.tsx b/src/components/ReSegmented/src/index.tsx index 7ac4a53b2..2c66b58fb 100644 --- a/src/components/ReSegmented/src/index.tsx +++ b/src/components/ReSegmented/src/index.tsx @@ -1,5 +1,14 @@ import "./index.css"; +import type { OptionsType } from "./type"; +import { useRenderIcon } from "@/components/ReIcon/src/hooks"; import { + useDark, + isNumber, + isFunction, + useResizeObserver +} from "@pureadmin/utils"; +import { + type PropType, h, ref, toRef, @@ -8,14 +17,6 @@ import { defineComponent, getCurrentInstance } from "vue"; -import type { OptionsType } from "./type"; -import { useRenderIcon } from "@/components/ReIcon/src/hooks"; -import { - isFunction, - isNumber, - useDark, - useResizeObserver -} from "@pureadmin/utils"; const props = { options: { @@ -32,6 +33,10 @@ const props = { block: { type: Boolean, default: false + }, + /** 控件尺寸 */ + size: { + type: String as PropType<"small" | "default" | "large"> } }; @@ -81,13 +86,14 @@ export default defineComponent({ function handleInit(index = curIndex.value) { nextTick(() => { const curLabelRef = instance?.proxy?.$refs[`labelRef${index}`] as ElRef; + if (!curLabelRef) return; width.value = curLabelRef.clientWidth; translateX.value = curLabelRef.offsetLeft; initStatus.value = true; }); } - if (props.block) { + function handleResizeInit() { useResizeObserver(".pure-segmented", () => { nextTick(() => { handleInit(curIndex.value); @@ -95,6 +101,8 @@ export default defineComponent({ }); } + props.block && handleResizeInit(); + watch( () => curIndex.value, index => { @@ -103,11 +111,12 @@ export default defineComponent({ }); }, { - deep: true, immediate: true } ); + watch(() => props.size, handleResizeInit); + const rendLabel = () => { return props.options.map((option, index) => { return ( @@ -167,7 +176,12 @@ export default defineComponent({ return () => (
-import { h, ref } from "vue"; +import { h, ref, watch } from "vue"; import { message } from "@/utils/message"; import HomeFilled from "@iconify-icons/ep/home-filled"; import { useRenderIcon } from "@/components/ReIcon/src/hooks"; @@ -11,6 +11,8 @@ defineOptions({ /** 基础用法 */ const value = ref(4); // 必须为number类型 +const size = ref("default"); +const dynamicSize = ref(); const optionsBasis: Array = [ { @@ -192,13 +194,22 @@ function onChange({ index, option }) { type: "success" }); } + +watch(size, val => (dynamicSize.value = size.value)); From eeb09a8da2770276e4203efadc07ada31caffc8b Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Sun, 24 Mar 2024 14:02:03 +0800 Subject: [PATCH 2/2] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E7=89=B9?= =?UTF-8?q?=E5=88=AB=E4=BB=A3=E7=A0=81=E8=B4=A1=E7=8C=AE=E5=90=8D=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.en-US.md | 1 + README.md | 1 + 2 files changed, 2 insertions(+) diff --git a/README.en-US.md b/README.en-US.md index 8e8da5c35..d13d7856b 100644 --- a/README.en-US.md +++ b/README.en-US.md @@ -183,6 +183,7 @@ Thank you very much for your in-depth understanding of the source code and your | [skyline523](https://github.com/skyline523) | [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=skyline523) | | [shark-lajiao](https://github.com/shark-lajiao) | [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=shark-lajiao) | | [WitMiao](https://github.com/WitMiao) | [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=WitMiao) | +| [QFifteen](https://github.com/QFifteen) | [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=QFifteen) | ## Git Contribution submission specification diff --git a/README.md b/README.md index a473a634b..f4d612d8f 100644 --- a/README.md +++ b/README.md @@ -184,6 +184,7 @@ docker run -dp 8080:80 --name pure-admin vue-pure-admin | [skyline523](https://github.com/skyline523) | [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=skyline523) | | [shark-lajiao](https://github.com/shark-lajiao) | [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=shark-lajiao) | | [WitMiao](https://github.com/WitMiao) | [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=WitMiao) | +| [QFifteen](https://github.com/QFifteen) | [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=QFifteen) | ## `Git` 贡献提交规范