万丈高楼从地起，前端从基础开始：构建自定义toolbar组件

2023-10-26 15:56:34

距离国庆还有不到一周的时间，在这短短的7天里，咱们这些前端码农们是否做好了迎接国庆的准备？当然，准备工作中除了备好大碗宽面，充电学习也是至关重要的。国庆期间，大家都有时间静下心来补足前段时间的知识空缺，提升自己的编程技能，接下来这一周，我将给大家送上一系列「前端知识硬核干货」，让你在国庆期间也能够愉快提升自我，让这个国庆假期不虚度。

今天，我们就来一起构建一个通用toolbar组件。在分享这个组件之前，大家可以猜一猜，toolbar是什么？我们生活中的各种工具栏或者菜单栏都可以被称作toolbar，比如我们电脑上的任务栏、浏览器上方的导航栏等等。它在网页中是作为一种UI控件存在的，可以包含标题、按钮、图标等元素。

了解完toolbar后，我们就来看看这个组件是如何构建的。本次构建将采用Vue框架，它是一款轻量级的渐进式框架，非常适合构建UI组件。当然，你也可以使用你所熟悉的其他框架或库来构建这个组件。

// 引入需要的依赖项
import Vue from 'vue'
import { Button, Icon } from 'element-ui'

// 定义Toolbar组件
const Toolbar = {
  name: 'Toolbar',
  components: {
    Button,
    Icon
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    buttons: {
      type: Array,
      default: () => []
    }
  },
  render(h) {
    return (
      <div class="toolbar">
        <div class="toolbar-title">{this.title}</div>
        <div class="toolbar-buttons">
          {
            this.buttons.map((button, index) => {
              return (
                <Button key={index} type="primary" size="small" icon={button.icon}>{button.text}</Button>
              )
            })
          }
        </div>
      </div>
    )
  }
}

// 将Toolbar组件注册为全局组件
Vue.component('Toolbar', Toolbar)

// 使用Toolbar组件
const app = new Vue({
  el: '#app',
  data() {
    return {
      title: '这是一个通用Toolbar组件',
      buttons: [
        {
          text: '按钮1',
          icon: 'el-icon-plus'
        },
        {
          text: '按钮2',
          icon: 'el-icon-minus'
        }
      ]
    }
  }
})