Switch “中英文”开关组件

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

默认开关组件

Ant Design Vue Switch 官网地址：antdv.com/components/…

默认可以通过 checkedChildren 和 unCheckedChildren 定义选中和非选中时的内容，可以定义成图标或者文字。如下以文字为例：

<a-switch checked-children="开" un-checked-children="关" default-checked />
<a-switch checked-children="开" un-checked-children="关" />

改造开关组件

上面的开关组件是表示开关状态或两种状态之间的切换，但实际上使用的“中英文”切换组件，本质上是一个单选组件，只是做成开关的形式。

主要是样式的改造，用::after创建一个伪元素，填充内容

<template>
  <a-input v-if="isChecked" placeholder="请输入中文姓名" ref="name" />
  <template v-else>
    <a-input
      placeholder="姓 (拼音) Surname"
      style="margin-right: 8px"
    />
    <a-input
      placeholder="名 (拼音) Given name"
    />
  </template>
  <a-switch
    v-model="isChecked"
    checked-children="英"
    un-checked-children="中"
    class="m-switch"
  />
</template>

<script>
  export default {
    data() {
      return {
        isChecked: true,
      };
    },
  };
</script>

<style lang="scss">
  .m-switch {
    background-color: #1890ff;
    min-width: 48px;
    height: 24px;
    &::after {
      content: "英";
      width: 20px;
      height: 20px;
      border-radius: 20px;
      color: #1890ff;
      font-size: 12px;
      top: 1px;
    }
    &.ant-switch-checked::after {
      content: "中";
    }
  }
</style>

伪元素和伪类的区别

详细可查看 MDN Web Docs

伪类：用于选择处于特定状态的元素，例如:first-child，:last-child，:hover，:focus 等，主要用来添加样式的。

伪元素：表现得是像往标记文本中加入全新的 HTML 元素一样，例如::first-line，::before，::after，主要是添加内容的，当然也可以内容定义样式。