elementui toolbar
ElementUI Toolbar 组件
ElementUI 的 Toolbar 是一个用于快速构建工具栏的组件，通常用于表单操作、表格操作等场景。以下是关于 ElementUI Toolbar 的详细介绍和使用方法。
基本用法
Toolbar 通常结合 el-button 或其他组件使用，提供一组操作按钮。以下是一个基本示例：
<el-toolbar>
<el-button type="primary">新增</el-button>
<el-button type="success">编辑</el-button>
<el-button type="danger">删除</el-button>
</el-toolbar>自定义样式
可以通过 style 或 class 属性自定义 Toolbar 的样式。例如：
<el-toolbar style="background-color: #f5f7fa; padding: 10px;">
<el-button type="primary">保存</el-button>
<el-button>取消</el-button>
</el-toolbar>结合其他组件
Toolbar 可以与其他 ElementUI 组件结合使用，例如 el-input、el-select 等：
<el-toolbar>
<el-input placeholder="请输入关键词" style="width: 200px;"></el-input>
<el-button type="primary">搜索</el-button>
</el-toolbar>响应式布局
使用 el-row 和 el-col 可以实现响应式布局的 Toolbar：
<el-toolbar>
<el-row :gutter="20">
<el-col :span="12">
<el-button type="primary">操作1</el-button>
</el-col>
<el-col :span="12" style="text-align: right;">
<el-button>操作2</el-button>
</el-col>
</el-row>
</el-toolbar>事件处理
Toolbar 中的按钮可以绑定事件处理函数：
<el-toolbar>
<el-button type="primary" @click="handleAdd">新增</el-button>
<el-button @click="handleCancel">取消</el-button>
</el-toolbar>methods: {
handleAdd() {
console.log('新增操作');
},
handleCancel() {
console.log('取消操作');
}
}插槽使用
Toolbar 支持插槽，可以灵活插入自定义内容：
<el-toolbar>
<el-button type="primary">默认按钮</el-button>
<slot name="custom-content"></slot>
</el-toolbar>国际化
Toolbar 中的文本可以通过国际化配置实现多语言支持：
// main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en';
Vue.use(ElementUI, { locale });<el-toolbar>
<el-button type="primary">{{ $t('button.add') }}</el-button>
</el-toolbar>注意事项
- Toolbar 本身是一个容器组件，具体功能需要结合其他组件实现。
- 样式自定义时，注意避免覆盖 ElementUI 的默认样式。
- 插槽的使用可以增强组件的灵活性，适合复杂场景。
