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> {
{ button.text }}</el-button> <script setup> |
||||
| 文字按钮 | <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 3. //在图标前面添加内容 <el-button type="..."> 需要添加style <script setup > |
||||
| 按钮组 | <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>