el-segmented详解

el-segmented 是 Element Plus 框架中的分段控制器组件，用于在多个选项之间进行切换。它常用于筛选条件、选项选择等场景。

一。 el-segmented 属性详解

1. model-value / v-model:

   • 类型: String | Number | Boolean
   • 用途: 绑定的值。

2. options:

   • 类型: Array<Object>
   • 用途: 选项列表。
   • 默认值: []

3. size:

   • 类型: String
   • 用途: 控制器的大小，可选值为 large、medium、small、mini。
   • 默认值: medium

4. disabled:

   • 类型: Boolean
   • 用途: 是否禁用控制器。
   • 默认值: false

5. name:

   • 类型: String
   • 用途: 原生属性，用于表单提交。

6. border:

   • 类型: Boolean
   • 用途: 是否显示边框。
   • 默认值: true

7. fill:

   • 类型: String
   • 用途: 填充颜色。

8. text-color:

   • 类型: String
   • 用途: 文字颜色。

9. disabled-text-color:

   • 类型: String
   • 用途: 禁用状态的文字颜色。

二。 el-segmented 事件详解

1. update:model-value:

   • 事件名称: update:model-value
   • 用途: 当绑定值发生变化时触发。
   • 参数: 新的绑定值。

2. change:

   • 事件名称: change
   • 用途: 当选项改变时触发。
   • 参数: 新的绑定值。

三。 el-segmented 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 自定义选项内容。

四。示例代码

<template>
  <div>
    <h2>Segmented 分段控制器示例</h2>

    <!-- 基本用法 -->
    <el-segmented v-model="selectedOption" :options="options" @change="handleChange" />

    <!-- 自定义大小 -->
    <el-segmented v-model="selectedOption" :options="options" size="large" />

    <!-- 禁用状态 -->
    <el-segmented v-model="selectedOption" :options="options" disabled />

    <!-- 自定义样式 -->
    <el-segmented v-model="selectedOption" :options="options" fill="#409EFF" text-color="white" disabled-text-color="#999" />

    <!-- 自定义选项内容 -->
    <el-segmented v-model="selectedOption" :options="optionsWithSlots">
      <template #default="{ option }">
        <span>{{ option.label }} <i class="el-icon-check"></i></span>
      </template>
    </el-segmented>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElSegmented } from 'element-plus'

const selectedOption = ref('option1')

const options = [
  { label: '选项一', value: 'option1' },
  { label: '选项二', value: 'option2' },
  { label: '选项三', value: 'option3' }
]

const optionsWithSlots = [
  { label: '选项一', value: 'option1' },
  { label: '选项二', value: 'option2' },
  { label: '选项三', value: 'option3' }
]

const handleChange = (value) => {
  console.log('选项改变:', value)
}
</script>

五，代码解释

1. 基本用法:

   • 使用 el-segmented 组件并设置 v-model 和 options 属性，绑定 change 事件。

   • <el-segmented v-model="selectedOption" :options="options" @change="handleChange" />
     

2. 自定义大小:

   • 使用 size 属性设置控制器的大小。

   • <el-segmented v-model="selectedOption" :options="options" size="large" />
     

3. 禁用状态:

   • 使用 disabled 属性设置控制器的禁用状态。

   • <el-segmented v-model="selectedOption" :options="options" disabled />
     

4. 自定义样式:

   • 使用 fill、text-color 和 disabled-text-color 属性设置控制器的样式。

   • <el-segmented v-model="selectedOption" :options="options" fill="#409EFF" text-color="white" disabled-text-color="#999" />
     

5. 自定义选项内容:

   • 使用默认插槽自定义选项内容。

   • <el-segmented v-model="selectedOption" :options="optionsWithSlots">
       <template #default="{ option }">
         <span>{{ option.label }} <i class="el-icon-check"></i></span>
       </template>
     </el-segmented>
     

六。 数据和方法

• 数据绑定:

  • 定义 selectedOption 变量，用于绑定分段控制器的值。

  • const selectedOption = ref('option1')
    

• 选项列表:

  • 定义 options 和 optionsWithSlots 数组，包含选项的标签和值。

  • const options = [
      { label: '选项一', value: 'option1' },
      { label: '选项二', value: 'option2' },
      { label: '选项三', value: 'option3' }
    ]
    
    const optionsWithSlots = [
      { label: '选项一', value: 'option1' },
      { label: '选项二', value: 'option2' },
      { label: '选项三', value: 'option3' }
    ]
    

• 选项改变事件:

  • 定义 handleChange 方法，处理选项改变时的逻辑。

  • const handleChange = (value) => {
      console.log('选项改变:', value)
    }
    

自定义样式

• 自定义分段控制器样式:

  • 使用 <style scoped> 自定义分段控制器的样式。

  • .el-segmented {
      margin-bottom: 20px;
    }