ant-design-vue/components/segmented/demo/custom.vue

<docs>
---
order: 5
title:
  zh-CN: 自定义渲染
  en-US: Custom
---

## zh-CN

自定义渲染每一个 Segmented Item。

## en-US
Custom each Segmented Item.
</docs>
<template>
  <a-segmented v-model:value="value" :options="data">
    <template #label="{ value: val, payload = {} }">
      <div style="padding: 4px 4px">
        <template v-if="payload.icon">
          <a-avatar :src="payload.src" :style="payload.style">
            <template #icon><component :is="payload.icon" /></template>
            {{ payload.content }}
          </a-avatar>
        </template>
        <template v-else>
          <a-avatar :src="payload.src" :style="payload.style">
            {{ payload.content }}
          </a-avatar>
        </template>
        <div>{{ val }}</div>
      </div>
    </template>
  </a-segmented>
  <br />
  <br />
  <a-segmented v-model:value="value2" :options="options2">
    <template #label="{ payload }">
      <div style="padding: 4px 4px">
        <div>{{ payload.title }}</div>
        <div>{{ payload.subTitle }}</div>
      </div>
    </template>
  </a-segmented>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { UserOutlined } from '@ant-design/icons-vue';
import ASegmented from 'ant-design-vue/es/segmented/src/segmented';
const data = ref([
  {
    value: 'user1',
    payload: {
      src: 'https://joeschmoe.io/api/v1/random',
      style: { backgroundColor: '#f56a00' },
    },
  },
  {
    value: 'user2',
    payload: {
      style: { backgroundColor: '#f56a00' },
      content: 'K',
    },
  },
  {
    value: 'user3',
    payload: {
      icon: UserOutlined,
      style: { backgroundColor: '#f56a00' },
    },
  },
]);
const options2 = ref([
  {
    value: 'spring',
    payload: {
      title: 'Spring',
      subTitle: 'Jan-Mar',
    },
  },
  {
    value: 'summer',
    payload: {
      title: 'Summer',
      subTitle: 'Apr-Jun',
    },
  },
  {
    value: 'autumn',
    payload: {
      title: 'Autumn',
      subTitle: 'Jul-Sept',
    },
  },
  {
    value: 'winter',
    payload: {
      title: 'Winter',
      subTitle: 'Oct-Dec',
    },
  },
]);
const value = ref('user1');
const value2 = ref('spring');
</script>