vue开关样式切换_如何使用vue js构建可重用和可访问的切换开关

vue开关样式切换

There are a lot of different UI components you can find on an app. The ones you’ll find the most will probably be buttons, inputs, forms, or images. They are so common that HTML even provides default elements for them! However, it’s not rare to encounter lesser-known components that you have to build by yourself.

您可以在应用程序上找到很多不同的UI组件。 您会发现最多的可能是按钮，输入，表单或图像。 它们是如此普遍，以至于HTML甚至为它们提供了默认元素！ 但是，遇到鲜为人知的必须自己构建的组件并不罕见。

We started building our design system within my company and I found myself working on the switch component, something like this:

我们开始在公司内部构建设计系统，发现自己正在研究开关组件，如下所示：

At first, it seems like a simple UI component. But building it can be tricky when you need to consider all the different states, its accessibility, and its reusability.

首先，它似乎是一个简单的UI组件。 但是，当您需要考虑所有不同的状态，可访问性和可重用性时，构建它可能会很棘手。

Well, lucky you! Today I’m going to share with you how you can do the same.

好吧，幸运的你！ 今天，我将与您分享如何做同样的事情。

Note: though I’m building it with Vue, the concepts can easily be applied to React. Also, I’m using Vue 3, but don’t be scared, there are not many differences with Vue 2 here! 😉

注意：尽管我使用Vue构建它，但是这些概念可以轻松地应用于React。 另外，我正在使用Vue 3，但是请不要害怕，这里与Vue 2的区别并不多！ 😉

一点概念 (A Bit of Conception)

Before jumping straight to your keyboard and start coding, you have few things to consider, especially the switch's purpose. Indeed, a switch can be used in two ways:

在直接跳到键盘上并开始编码之前，您没有什么要考虑的事情，尤其是开关的用途。 实际上，可以通过两种方式使用开关：

1. To turn on or off something (as you would do with a light switch)
   打开或关闭某物(如电灯开关一样)
2. To select between two choices (a theme switcher for example)
   在两个选项之间进行选择(例如主题切换器)

It’s essential to know which use case is the right one for you because it impacts the underlying implementation. In our case, we’re going to go for the first use case.

必须知道哪种用例适合您，因为它会影响基础实现。 在我们的案例中，我们将使用第一个用例。

Additionally, we want to label our toggle switch, so the user knows what is going to happen if he toggles the switch.

另外，我们要标记切换开关，因此用户知道如果切换切换开关，将会发生什么。

Let’s look at a real-world example where a user would choose to receive a newsletter. You can think of a first implementation where you would use a checked prop and a label prop and a toggle event:

让我们看一个真实的示例，用户将选择接收新闻通讯。 您可以想到第一个实现，其中将使用checked道具和label道具以及toggle事件：

<Switch
  :checked="shouldReceiveNewsletter"
  @toggle="toggle"
  label="Receive newsletter"
/>

That’s good. But we can achieve the same result by using v-model like so:

非常好。 但是我们可以通过使用v-model来达到相同的结果，如下所示：

<Switch v-model:checked="shouldReceiveNewsletter" label="Receive newsletter" />

If you’re familiar with Vue, you might be surprised with the use of v-model in the example above. That’s one of the changes introduced by Vue 3: You can now use an argument name directly on the template. The code above passes a checked prop to <Switch> that you can update by emitting an update:checked event.

如果您熟悉Vue，可能会对上面的示例中的v-model感到惊讶。 这是Vue 3引入的更改之一：现在，您可以直接在模板上使用参数名称。 上面的代码将一个checked道具传递给<Switch> ，您可以通过发出update:checked事件来对其进行update:checked 。

建立范本 (Build the Template)

The switch UI we’re building

我们正在构建的切换UI

Whenever you have to choose HTML elements, you need to select the ones that make sense semantic