DIY组件库——基于Vue2打造花式UI组件（四）

前言

在前面几篇文章中，我们介绍了如何在Vue2中构建一个简单的UI组件库，包括了按钮组件、对话框组件和输入组件。在本文中，我们将继续构建更高级的组件，如下拉菜单、表格和弹出菜单，并讨论组件库开发的最佳实践，提供一些有用的提示和技巧，帮助你创建自己的组件库。

下拉菜单

下拉菜单是一个常见的UI组件，它允许用户从一组选项中选择一个选项。我们可以使用Vue2来创建一个下拉菜单组件，如下所示：

<template>
  <div class="dropdown">
    <button class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      {{ label }}
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" v-for="option in options" :key="option" @click="selectOption(option)">{{ option }}</a>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: '请选择'
    },
    options: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      selectedOption: null
    }
  },
  methods: {
    selectOption(option) {
      this.selectedOption = option
      this.$emit('input', option)
    }
  }
}
</script>

<style>
.dropdown {
  position: relative;
}

.dropdown-toggle {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: none;
}

.dropdown-item {
  padding: 5px 10px;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
}

.dropdown-item.active {
  background-color: #ccc;
}
</style>

表格

表格是一个用来展示数据的UI组件。我们可以使用Vue2来创建一个表格组件，如下所示：

<template>
  <table class="table">
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td v-for="cell in row.cells" :key="cell">{{ cell }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    headers: {
      type: Array,
      required: true
    },
    rows: {
      type: Array,
      required: true
    }
  }
}
</script>

<style>
.table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 5px 10px;
  border: 1px solid #ccc;
}

thead {
  background-color: #f5f5f5;
}
</style>

弹出菜单

弹出菜单是一个当用户点击某个元素时出现的UI组件。我们可以使用Vue2来创建一个弹出菜单组件，如下所示：

<template>
  <div class="popover">
    <button class="popover-toggle" type="button" @click="showPopover">
      {{ label }}
    </button>
    <div class="popover-content" v-show="show">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: '更多'
    }
  },
  data() {
    return {
      show: false
    }
  },
  methods: {
    showPopover() {
      this.show = true
    }
  }
}
</script>

<style>
.popover {
  position: relative;
}

.popover-toggle {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.popover-content {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  display: none;
}

.popover-content:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 10px solid transparent;
  border-bottom-color: #ccc;
}

.popover-content.show {
  display: block;