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..65741ab9e 100644 --- a/src/components/ReSegmented/src/index.tsx +++ b/src/components/ReSegmented/src/index.tsx @@ -5,6 +5,7 @@ import { toRef, watch, nextTick, + type PropType, defineComponent, getCurrentInstance } from "vue"; @@ -32,6 +33,10 @@ const props = { block: { type: Boolean, default: false + }, + /** 配置尺寸,可使用 large和small两种值 */ + size: { + type: String as PropType<"small" | "default" | "large"> } }; @@ -87,13 +92,11 @@ export default defineComponent({ }); } - if (props.block) { - useResizeObserver(".pure-segmented", () => { - nextTick(() => { - handleInit(curIndex.value); - }); + useResizeObserver(".pure-segmented", () => { + nextTick(() => { + handleInit(curIndex.value); }); - } + }); watch( () => curIndex.value, @@ -167,7 +170,12 @@ export default defineComponent({ return () => (
tooltip 提示
-change 事件
-禁用
-block 属性(将宽度调整为父元素宽度)
-可设置图标
-只设置图标
-自定义渲染
-