Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

Default switch component

Ant Design Vue Switch website: antdv.com/components/…

By default, checkedChildren and unCheckedChildren define checked and unchecked content, which can be defined as ICONS or text. Take text as an example:

<a-switch checked-children="Open" un-checked-children="Closed" default-checked />
<a-switch checked-children="Open" un-checked-children="Closed" />
Copy the code

Retrofit switch assembly

The switch component above is to indicate the switch state or the switch between two states, but in fact the use of the “English” switch component, is essentially a radio component, just make a switch form.

The main style modification is to create a pseudo-element with ::after to fill in the content

<template>
  <a-input v-if="isChecked" placeholder="Please enter your Chinese name" 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="English"
    un-checked-children="In"
    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: "English";
      width: 20px;
      height: 20px;
      border-radius: 20px;
      color: #1890ff;
      font-size: 12px;
      top: 1px;
    }
    &.ant-switch-checked::after {
      content: "In"; }}</style>
Copy the code

The difference between pseudo-elements and pseudo-classes

See MDN Web Docs for details

Pseudo-classes: used to select elements in a specific state, such as :first-child, : last-Child, :hover, :focus, etc., mainly used to add styles.

Pseudo-elements: behave like new HTML elements added to markup text, such as ::first-line, ::before, ::after, mainly for adding content, but also for content-defining styles.