diff --git a/src/components/ReSegmented/src/index.css b/src/components/ReSegmented/src/index.css index 22acb2b9f..97c9d7675 100644 --- a/src/components/ReSegmented/src/index.css +++ b/src/components/ReSegmented/src/index.css @@ -8,6 +8,21 @@ border-radius: 2px; } +.pure-segmented-block { + display: flex; +} + +.pure-segmented-block .pure-segmented-item { + flex: 1; + min-width: 0; +} + +.pure-segmented-block .pure-segmented-item > .pure-segmented-item-label > span { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + .pure-segmented-group { position: relative; display: flex; @@ -67,6 +82,7 @@ .pure-segmented-item-label { display: flex; align-items: center; + justify-content: center; } .pure-segmented-item-icon svg { diff --git a/src/components/ReSegmented/src/index.tsx b/src/components/ReSegmented/src/index.tsx index d8d536186..7ac4a53b2 100644 --- a/src/components/ReSegmented/src/index.tsx +++ b/src/components/ReSegmented/src/index.tsx @@ -10,7 +10,12 @@ import { } from "vue"; import type { OptionsType } from "./type"; import { useRenderIcon } from "@/components/ReIcon/src/hooks"; -import { isFunction, isNumber, useDark } from "@pureadmin/utils"; +import { + isFunction, + isNumber, + useDark, + useResizeObserver +} from "@pureadmin/utils"; const props = { options: { @@ -22,6 +27,11 @@ const props = { type: undefined, require: false, default: "0" + }, + /** 将宽度调整为父元素宽度 */ + block: { + type: Boolean, + default: false } }; @@ -77,6 +87,14 @@ export default defineComponent({ }); } + if (props.block) { + useResizeObserver(".pure-segmented", () => { + nextTick(() => { + handleInit(curIndex.value); + }); + }); + } + watch( () => curIndex.value, index => { @@ -148,7 +166,9 @@ export default defineComponent({ }; return () => ( -
+
= [ } ]; +/** block */ +const optionsBlock: Array = [ + { + label: "周一" + }, + { + label: "周二" + }, + { + label: "周三" + }, + { + label: "周四" + }, + { + label: "周五喜悦,收尾归档,周末倒计时", + tip: "周五喜悦,收尾归档,周末倒计时" + } +]; + /** 可设置图标 */ const optionsIcon: Array = [ { @@ -198,6 +218,9 @@ function onChange({ index, option }) {

禁用

+

block 属性(将宽度调整为父元素宽度)

+ +

可设置图标