element-plus的button按钮详解

Button按钮

标签

<el-button></el-button>

基本属性

type:类型【'primary'| 'success'| 'warning'| 'danger'| 'info'| 'text'(delete)】
size:尺寸【large/default/small】
plain:是否镂空
round:    是否为圆角按钮
circle:是否为圆形按钮
color:自定义按钮颜色
loading:是否为加载中状态
disabled:按钮是否为禁用状态

图标按钮

icon:图标组件

<el-button type="primary" :icon="Edit" />

import { Edit} from '@element-plus/icons-vue'

结合字体图标和文字使用

<el-button round @click="addHander" class="button" size="large" type="primary">
  <el-icon>
    <DocumentAdd/>
  </el-icon> 添加
</el-button>

制作按钮a标签

tag:自定义元素标签,如a标签

<el-button tag="a" href="https://github.com/element-plus/element-plus" target="_blank">跳转页面</el-button>

文字按钮

text:是否为文字按钮

bg:是否显示文字按钮背景颜色,即白色,不设置则为页面背景色

<el-button type="primary" text bg>文字按钮</el-button>

猜你喜欢

转载自blog.csdn.net/m0_63040701/article/details/131651393