feat(components): segmented组件新增block属性，可使其适合父元素宽度 (#997)

* feat: `segmented`组件新增`block`属性，可将宽度调整为父元素宽度

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 {

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 () => (
-      <div class="pure-segmented">
+      <div
+        class={["pure-segmented", props.block ? "pure-segmented-block" : ""]}
+      >
         <div class="pure-segmented-group">
           <div
             class="pure-segmented-item-selected"