第二章：基础组件

Button 按钮

基本用法

<template>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
  <el-button type="info">信息按钮</el-button>
</template>

按钮样式

<template>
  <!-- 朴素按钮 -->
  <el-button type="primary" plain>朴素按钮</el-button>

  <!-- 圆角按钮 -->
  <el-button type="primary" round>圆角按钮</el-button>

  <!-- 圆形按钮 -->
  <el-button type="primary" circle>
    <el-icon><Plus /></el-icon>
  </el-button>

  <!-- 禁用状态 -->
  <el-button type="primary" disabled>禁用按钮</el-button>

  <!-- 加载状态 -->
  <el-button type="primary" loading>加载中</el-button>
</template>

按钮尺寸

<template>
  <el-button size="large">大型按钮</el-button>
  <el-button>默认按钮</el-button>
  <el-button size="small">小型按钮</el-button>
</template>

按钮组

<template>
  <el-button-group>
    <el-button type="primary">上一页</el-button>
    <el-button type="primary">下一页</el-button>
  </el-button-group>
</template>

Input 输入框

基本用法

<template>
  <el-input v-model="input" placeholder="请输入内容" />
</template>

<script setup>
import { ref } from 'vue'
const input = ref('')
</script>

输入框样式

<template>
  <!-- 禁用 -->
  <el-input v-model="input" disabled />

  <!-- 可清空 -->
  <el-input v-model="input" clearable />

  <!-- 密码框 -->
  <el-input v-model="password" show-password />

  <!-- 带图标 -->
  <el-input v-model="input" prefix-icon="Search" />
  <el-input v-model="input" suffix-icon="Calendar" />

  <!-- 文本域 -->
  <el-input v-model="textarea" type="textarea" :rows="3" />
</template>

复合输入框

<template>
  <!-- 前置/后置内容 -->
  <el-input v-model="input">
    <template #prepend>Http://</template>
    <template #append>.com</template>
  </el-input>

  <!-- 前置/后置按钮 -->
  <el-input v-model="input">
    <template #append>
      <el-button :icon="Search" />
    </template>
  </el-input>
</template>

Select 选择器

基本用法

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
const options = [
  { value: 'vue', label: 'Vue' },
  { value: 'react', label: 'React' },
  { value: 'angular', label: 'Angular' }
]
</script>

多选

<template>
  <el-select v-model="values" multiple placeholder="请选择">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>

<script setup>
const values = ref([])
</script>

可搜索

<template>
  <el-select v-model="value" filterable placeholder="请选择">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>

分组

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option-group v-for="group in groups" :key="group.label" :label="group.label">
      <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value" />
    </el-option-group>
  </el-select>
</template>

Radio 单选框

基本用法

<template>
  <el-radio-group v-model="radio">
    <el-radio :value="1">选项1</el-radio>
    <el-radio :value="2">选项2</el-radio>
  </el-radio-group>
</template>

<script setup>
import { ref } from 'vue'
const radio = ref(1)
</script>

按钮样式

<template>
  <el-radio-group v-model="radio">
    <el-radio-button :value="1">选项1</el-radio-button>
    <el-radio-button :value="2">选项2</el-radio-button>
    <el-radio-button :value="3">选项3</el-radio-button>
  </el-radio-group>
</template>

Checkbox 复选框

基本用法

<template>
  <el-checkbox-group v-model="checkList">
    <el-checkbox value="Vue">Vue</el-checkbox>
    <el-checkbox value="React">React</el-checkbox>
    <el-checkbox value="Angular">Angular</el-checkbox>
  </el-checkbox-group>
</template>

<script setup>
import { ref } from 'vue'
const checkList = ref(['Vue'])
</script>

全选

<template>
  <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAll">
    全选
  </el-checkbox>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :key="city" :value="city">{{ city }}</el-checkbox>
  </el-checkbox-group>
</template>

<script setup>
import { ref } from 'vue'

const checkAll = ref(false)
const isIndeterminate = ref(true)
const cities = ['北京', '上海', '广州', '深圳']
const checkedCities = ref(['北京', '上海'])

function handleCheckAll(val) {
  checkedCities.value = val ? cities : []
  isIndeterminate.value = false
}

function handleCheckedCitiesChange(value) {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}
</script>

Switch 开关

<template>
  <el-switch v-model="value" />

  <!-- 带文字 -->
  <el-switch v-model="value" active-text="开" inactive-text="关" />

  <!-- 自定义颜色 -->
  <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" />

  <!-- 禁用 -->
  <el-switch v-model="value" disabled />
</template>

<script setup>
import { ref } from 'vue'
const value = ref(true)
</script>

Slider 滑块

<template>
  <el-slider v-model="value" />

  <!-- 带输入框 -->
  <el-slider v-model="value" show-input />

  <!-- 范围选择 -->
  <el-slider v-model="range" range :max="100" />

  <!-- 显示标记 -->
  <el-slider v-model="value" :marks="marks" />
</template>

<script setup>
import { ref } from 'vue'

const value = ref(50)
const range = ref([20, 80])
const marks = {
  0: '0°C',
  50: '50°C',
  100: '100°C'
}
</script>

小结

本章学习了：

• ✅ Button 按钮
• ✅ Input 输入框
• ✅ Select 选择器
• ✅ Radio 单选框
• ✅ Checkbox 复选框
• ✅ Switch 开关
• ✅ Slider 滑块

下一章

第三章：表单组件 - 学习表单相关组件。