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"

src/views/components/segmented.vue

@@ -75,6 +75,26 @@ const optionsDisabled: Array<OptionsType> = [
   }
 ];
 
+/** block */
+const optionsBlock: Array<OptionsType> = [
+  {
+    label: "周一"
+  },
+  {
+    label: "周二"
+  },
+  {
+    label: "周三"
+  },
+  {
+    label: "周四"
+  },
+  {
+    label: "周五喜悦，收尾归档，周末倒计时",
+    tip: "周五喜悦，收尾归档，周末倒计时"
+  }
+];
+
 /** 可设置图标 */
 const optionsIcon: Array<OptionsType> = [
   {
@@ -198,6 +218,9 @@ function onChange({ index, option }) {
       <p class="mb-2">禁用</p>
       <Segmented :options="optionsDisabled" />
       <el-divider />
+      <p class="mb-2">block 属性(将宽度调整为父元素宽度)</p>
+      <Segmented :options="optionsBlock" block />
+      <el-divider />
       <p class="mb-2">可设置图标</p>
       <Segmented :options="optionsIcon" />
       <el-divider />