Element组件（按钮、单选框、多选框）

---

button按钮

---

button		<el-button>Defalut</el-button>		type="primary|success|info|warning|danger"
		<el-button plain>Plain</el-button>		type="primary|success|info|warning|danger"
		<el-button round>Round</el-button>		type="primary|success|info|warning|danger"
		<el-button :icon="Search" circle />		<script  setup> import {   Check,   Delete,   Edit,   Message,   Search,   Star, } from '@element-plus/icons-vue' </script>
		<el-button type="primary" :icon="Edit" circle />
		<el-button type="success" :icon="Check" circle />
		<el-button type="info" :icon="Message" circle />
		<el-button type="warning" :icon="Star" circle />
		<el-button type="danger" :icon="Delete" circle />
禁用状态		<el-button disabled>Default</el-button>		添加disabled
链接按钮		<el-button link>button</el-button>		添加link
添加样式： 1. type="primary|success|info|warning|danger" 2.渲染         <template>             <el-button v-for="button in buttons" :key="button.text" :type="button.type" link >                 {{ button.text }}</el-button> </template> <script setup>         const buttons = [           { type: '', text: 'plain' },           { type: 'primary', text: 'primary' },           { type: 'success', text: 'success' },           { type: 'info', text: 'info' },           { type: 'warning', text: 'warning' },           { type: 'danger', text: 'danger' },         ] </script>
文字按钮		<el-button text bg>button</el-button>		没有边框（text）和背景色（bg）的按钮 添加样式同上
按钮图标		<el-button type="..." :icon="..." />		type="primary|success|info|warning|danger" :icon="Delete | Edit | Search | Share | Upload | ArrowLeft | ArrowRight"
格式：        1. <el-button type="..." :icon="..." />        2.  //在图标后面添加内容            <el-button type="..." :icon="...">                 text            </el-button>                    3. //在图标前面添加内容            <el-button type="...">               text<el-icon class="el-icon--right"><Delete | Edit | Search | Share | Upload /></el-icon>            </el-button>           需要添加style <script setup > import { ArrowLeft，ArrowRight，Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue' </script>
按钮组		<el-button-group>按钮组</el-button-group>		通过<el-button-group>将一组按钮包裹起来
加载按钮		<el-button type="..." loading>Loading</el-button>		添加loading
按钮大小		<el-button size="..">Large</el-button>		size="large | small"  ，不写默认中等
按钮颜色		<el-button color="..." :dark="isDark">Default</el-button>		添加color=" " :dark="isDark" js中添加 import { isDark } from '~/composables/dark'

         button API

Button属性
size	尺寸	type	类型
plain	是否为朴素按钮	text	是否为文字按钮
bg	是否显示文字按钮背景颜色	link	是否为链接按钮
round	是否为圆角按钮	circle	是否为圆形按钮
loading	是否为加载中状态	loading-icon	自定义加载中状态图标组件
disabled	按钮是否为禁用状态	icon	图标组件
autofocus	原生autofocus属性	native-type	原生 type 属性
auto-insert-space	自动在两个中文字符之间插入空格	color	自定义按钮颜色, 并自动计算hover和active触发后的颜色
dark	dark 模式, 意味着自动设置color为 dark 模式的颜色
Button插槽
default	自定义默认内容	loading	自定义加载中组件
icon	自定义图标组件
Button对外暴露的方法
ref	按钮 html 元素	size	按钮尺寸
type	按钮类型	disabled	按钮已禁用
shouldAddSpace	是否在两个字符之间插入空格

         ButtonGroup API

属性
size	用于控制该按钮组内按钮的大小
type	用于控制该按钮组内按钮的类型
插槽
default	自定义按钮组内容

---

Radio单选框

---

         单选框格式  <el-radio>

<template>
    <el-radio v-model="radio" label="1">选项</el-radio>
    <el-radio v-model="radio" label="2">选项</el-radio>
</template>

<script>
    export default {
        data(){
            //默认选中的按钮
            return{
                radio:'1'
            }
        }
    }
</script>

        单选框组格式： <el-radio-group>

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

<script>
    export default {
        data(){
            return{
                radio:'1'
            }
        }
    }
</script>

        单选按钮格式 <el-radio-button>

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

<script>
    export default {
        data(){
            return{
                radio:'1'
            }
        }
    }
</script>

        Radio Attributes

label	Radio的value	label="number|number|boolean
disabled	是否禁用		默认false
border	是否显示边框		默认false
size	Radio的尺寸，仅当border为true时有效	size="medium|small|mini
name	原生name属性

         Radio Event

change

绑定值变化时触发的事件

@change=" "

回调参数为选中的Radio label值

        Radio-group Attributes

size	按钮组尺寸，仅对按钮形式或带有边框的Radio有效	size="medium|small|mini
disabled
text-color	按钮形式的Radio激活时的文本颜色	text-color=""	默认#fff
fill	按钮形式的Radio被激活时的填充色和边框色	fill=""	默认#409EFF

        Radio-group Events

change

绑定值变化时触发

@change=""

返回选中的Radio label值

---

Checkbox多选框

---

         格式：<el-checkbox>

<template>
    <el-checkbox v-model="checked">选项</el-checkbox>
</template>
<script>
    export default{
        data(){
            return{
                checked:true
            }
        }
    }
</script>

        多选框组<el-checkbox-group>

<template>
    <el-checkbox-group v-model="checkList">
        <el-checkbox label="A"></el-checkbox>
        <el-checkbox label="B"></el-checkbox>
        <el-checkbox label="C"></el-checkbox>
    </el-checkbox-group>
</template>
<script>
    export default {
        data(){
            //多选
            return{
                checkList:["A","C"]
            }
        }
    }
</scrpit>

         多选按钮<el-checkbox-button> 

<template>
  <el-checkbox-group v-model="checkList">
      <el-checkbox-button label="A"></el-checkbox-button>
      <el-checkbox-button label="B"></el-checkbox-button>
      <el-checkbox-button label="C"></el-checkbox-button>
  </el-checkbox-group>
</template>
<script>
  export default {
      data(){
          //多选
          return{
              checkList:["A","C"]
          }
      }
  }
</script>

        与单选框Radio不同的Attributes

checkbox | checkbox-button
true-label	选中时的值
false-label	没有选中的值
checked	当前是否勾选	默认false
indeterminate	设置indeterminate状态，只负责样式控制	默认false
label	选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）	label="string|number|boolean"
checkbox-group
min	可被勾选的checkbox最小数量	min="number"
max	可被勾选的checkbox最大数量	max="number

        获取选中的checkbox的label值

        

<template>
  <el-checkbox-group v-model="checkedList">
    <el-checkbox label="1">A</el-checkbox>
    <el-checkbox label="2">B</el-checkbox>
  </el-checkbox-group>
  <div>你选择{{checkedList}}</div>
</template>
<script>
  export default{
    data(){
      return{
        checkedList:[]
      }
    }
  }
</script>