从零撸一个pc端vue的ui组件库( 计数器组件 )

作为一位前端工程师，设计并构建 UI 组件库是一项必要的技能。这样的能力会让你更加熟悉 Vue 的生态系统，同时也能够更好地理解别人编写代码和维护他们的理念。所以，在本文中，我们将会从零开始设计并制作一个基于 Vue 的 UI 组件库，我们以计数器组件为例进行介绍。

1. 开始计数器组件的设计

在我们开始设计计数器组件的代码之前，我们需要先确定它的结构。一个计数器组件应该有：

* 一个开始计数的默认值

* 一个增加计数的按钮

* 一个减少计数的按钮

* 当前计数

在 Vue 语法中，这个组件的模板将会长成这样：

<template>
  <div>
    <button>-</button>
    <span>0</span>
    <button>+</button>
  </div>
</template>

2. 增加和减少计数器值

在我们的模板中，有两个按钮，但是它们还没有实际功能。让我们先通过添加一些自定义方法来完成增加和减少计数器值的功能。我们可以考虑通过 methods，data 和 computed 来实现这些功能。

首先，在 data 选项中，我们需要定义一个变量来存储计数器当前的值，并默认设为零。然后，在增加或减少按钮被按下时，我们需要更新这个值，并重新计算该值的 output 以通过 computed 选项把它渲染出来。

<template>
  <div>
    <button @click="decrement">-</button>
    <span>{{ count }}</span>
    <button @click="increment">+</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
  computed: {
    output() {
      return 当前计数：${this.count};
    },
  },
};
</script>

3. 添加样式

最后，我们需要给组件添加样式以便它可以以某种方式呈现给用户。让我们利用 scoped 属性把计数器组件的样式嵌入到组件内部，而不是在全局上下文中定义。这样可以防止组件对外部元素产生影响。

为了使组件看起来更加美观和专业，我们采用了一些基本的 CSS 样式：

<template>
  <div class="counter">
    <button @click="decrement">-</button>
    <span>{{ count }}</span>
    <button @click="increment">+</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
  computed: {
    output() {
      return 当前计数：${this.count};
    },
  },
};
<style scoped>
.counter {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #dedede;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
button {
  background-color: #ffffff;
  color: #444444;
  border: 1px solid #dedede;
  border-radius: 4px;
  cursor: pointer;
  font-size: 24px;
  font-weight: bold;
  padding: 5px 10px;
  margin: 5px;
}
</style>

现在，我们已经拥有了一个完美的计数器组件。我们可以重复利用这个组件，将它用在 Vue 项目的不同地方。并且，通过类似的方式进行构建，可以构建多个其他不同的组件来形成我们自己的 UI 组件库。