ZSegmented

分段控制器。

基础用法

第一步

第二步

第三步

第四步

<template>
  <z-segmented v-model:value="selectValue" :options="options"></z-segmented>
</template>

<script setup lang="ts">
import type { SegmentedOptions } from "@d7ee/z-base-ui/dist/types/components/ZSegmented";
import { ref } from "vue";

const options: SegmentedOptions[] = ["第一步", "第二步", "第三步", "第四步"];
const selectValue = ref<string>(options[0]);
</script>

不可用

添加属性 disabled 用于控制是否可选。

第一步

第二步

第三步

第四步

第一步

第二步

第三步

第四步

<template>
  <z-segmented v-model:value="selectValue" :options="options" disabled></z-segmented>
  <br/>
  <z-segmented v-model:value="value" :options="option"></z-segmented>
</template>

<script setup lang="ts">
import type { SegmentedOptions } from "@d7ee/z-base-ui/dist/types/components/ZSegmented";
import { ref } from "vue";

const options: SegmentedOptions[] = ["第一步", "第二步", "第三步", "第四步"];
const selectValue = ref<string>(options[0]);

const option: SegmentedOptions[] = ["第一步", "第二步", {
  label: "第三步",
  disabled: true
}, "第四步"];
const value = ref<string>(options[0]);
</script>

平均

添加属性 average 使其适合父元素宽度，且每个Item 宽度一致。

第一步

第二步

第三步

这是一段超长的文本内容这是一段超长的文本内容

<template>
  <z-segmented v-model:value="selectValue" :options="options" average></z-segmented>
</template>

<script setup lang="ts">
import type { SegmentedOptions } from "@d7ee/z-base-ui/dist/types/components/ZSegmented";
import { ref } from "vue";

const options: SegmentedOptions[] = ["第一步", "第二步", "第三步","这是一段超长的文本内容这是一段超长的文本内容"];
const selectValue = ref<string>(options[0]);
</script>

大小

添加属性 size 用于控制大小，内置大、中、小三种类型，默认为中。

第一步

第二步

第三步

第四步

第一步

第二步

第三步

第四步

第一步

第二步

第三步

第四步

<template>
  <z-segmented v-model:value="selectValue" :options="options" size="large"></z-segmented>
  <br/>
  <z-segmented v-model:value="value" :options="options" size="middle"></z-segmented>
  <br/>
  <z-segmented v-model:value="smallValue" :options="options" size="small"></z-segmented>
</template>

<script setup lang="ts">
import type { SegmentedOptions } from "@d7ee/z-base-ui/dist/types/components/ZSegmented";
import { ref } from "vue";

const options: SegmentedOptions[] = ["第一步", "第二步", "第三步", "第四步"];

const selectValue = ref<string>(options[0]);
const value = ref<string>(options[0]);
const smallValue = ref<string>(options[0]);
</script>

动态数据

第一步

第二步

第三步

第四步

<template>
  <div>
    <z-segmented v-model:value="selectValue" :options="options"></z-segmented>
    <br/>
    <z-button type="primary" @click="loadMore" :disabled="options.length > 4">加载更多</z-button>
  </div>
</template>

<script setup lang="ts">
import type { SegmentedOptions } from "@d7ee/z-base-ui/dist/types/components/ZSegmented";
import { ref } from "vue";

const options = ref<SegmentedOptions[]>(["第一步", "第二步", "第三步", "第四步"]);
const selectValue = ref<string>(options.value[0]);

const loadMore = () => {
  options.value = [...options.value, ...["第五步", "第六步"]];
};
</script>

自定义渲染

使用插槽 bodyCell 进行自定义渲染每一个item。

自定义每项：

❤

第一步

❤

第二步

❤

第三步

❤

第四步

自定义其中某项或多项：

第一步

❤ 自定义内容

第三步

第四步

<template>
  <div>
    <h5>自定义每项：</h5>
    <z-segmented v-model:value="selectValue" :options="options">
      <template #bodyCell="{item}">
        <div class="items">
          <div>❤</div>
          <div>{{item.label}}</div>
        </div>
      </template>
    </z-segmented>

    <br/>
    <h5>自定义其中某项或多项：</h5>
    <z-segmented v-model:value="value" :options="options">
      <template #bodyCell="{item}">
        <div class="items" v-if="item.label === '第二步'">
          <div>❤ 自定义内容</div>
        </div>
      </template>
    </z-segmented>
  </div>
</template>

<script setup lang="ts">
import type { SegmentedOptions } from "@d7ee/z-base-ui/dist/types/components/ZSegmented";
import { ref } from "vue";

const options: SegmentedOptions[] = ["第一步", "第二步", "第三步", "第四步"];
const selectValue = ref<string>(options[0]);

const value = ref<string>(options[0]);
</script>

<style lang="css" scoped>
.items {
  text-align: center;
}
</style>

自定义色彩

属性 bg 用于修改默认背景色，color 修改选中和 hover 时的文字颜色，itemBg 修改选中时的背景色。

第一步

第二步

第三步

第四步

<template>
  <z-segmented v-model:value="selectValue" :options="options" bg="pink" item-bg="#409eff" color="red"></z-segmented>
</template>

<script setup lang="ts">
import type { SegmentedOptions } from "@d7ee/z-base-ui/dist/types/components/ZSegmented";
import { ref } from "vue";

const options: SegmentedOptions[] = ["第一步", "第二步", "第三步", "第四步"];
const selectValue = ref<string>(options[0]);
</script>

Segmented 属性

属性名	说明	类型	默认值
options 必填	内容	Array，详见options	—
value 必填	用于获取或设置选中项，通过 v-model:value 绑定	string | number | undefined	undefined
disabled	禁用整行	boolean	—
size	控制尺寸大小	large | middle | small	—
bg	背景色	string	—
itemBg	选中时的背景色	string	—
color	选中和hover时的文字颜色	string	—

options

options 配置项，options 接收以下3种参数类型

• string[]
• SegmentedOption[]
• Array<string | SegmentedOption>

字段	说明	类型
label 必填	名称	string
value 必填	值	string | number
disabled	禁止选中当前项	boolean

参数类型示范

// 第一种 string[]
["1", "2", "3"]

// 第二种 SegmentedOption[]
[{label: "", value: "", disabled: true, icon: ""}]

// 第三种 Array<string | SegmentedOption>
["1", "2", {label: "3", disabled: true, icon: ""}]

SegmentedOption

interface SegmentedOption {
  label: string;
  value?: string | number;
  disabled?: boolean;
  icon?: string | null;
}

Segmented 事件

配合 select 使用，用于更新选中状态，当此事件不存在时，您将无法选中或取消选中任意内容。

事件名称	说明	回调参数
change	状态发生改变时时回调	(event: string | number) => void