1. <label ...>
    2.     <span class='el-checkbox__input'>
    3.         <span class='el-checkbox__inner'></span>
    4.         <input type='checkbox' .../>
    5.     </span>
    6.     <span class='el-checkbox__label'>
    7.         <slot></slot>
    8.         <template v-if="!$slots.default">{{label}}</template>
    9.     </span>
    10. </label>
    1. &::after {
    2.   box-sizing: content-box;
    3.   content: "";
    4.   border: 1px solid $--checkbox-checked-icon-color;
    5.   border-left: 0;
    6.   border-top: 0;
    7.   height: 7px;
    8.   left: 4px;
    9.   position: absolute;
    10.   top: 1px;
    11.   transform: rotate(45deg) scaleY(0);
    12.   width: 3px;
    13.   transition: transform .15s ease-in .05s;
    14.   transform-origin: center;
    15. }

    使用伪元素实现勾选框里面的那个钩子的想法有点意思