基礎用法
el-button經常與icon搭配使用,type屬性主要用於控制其顏色,plain屬性用於控制其風格,round、circle屬性用於控制其形狀,以下是一組增刪改查的按鈕示例:
<template> <div> <el-button icon="el-icon-circle-plus" type="primary">添加</el-button> <el-button round icon="el-icon-edit" type="warning">編輯</el-button> <el-button plain icon="el-icon-delete" type="danger">刪除</el-button> <el-button plain round icon="el-icon-view" type="view">查看</el-button> <el-button circle icon="el-icon-share" type="success"></el-button> </div> </template>
一組按鈕也可以放到同一個組件el-button-group中:
<template> <el-button-group> <el-button type="primary" icon="el-icon-d-arrow-left">快退</el-button> <el-button type="primary" icon="el-icon-caret-right">播放</el-button> <el-button type="primary" icon="el-icon-d-arrow-right">快進</el-button> <el-button type="primary" icon="el-icon-bell">音量</el-button> <el-button type="primary" icon="el-icon-menu">菜單</el-button> </el-button-group> </template>
el-button屬性: