自定义选择框

 前提摘要：背景为#0e121c

    

实现这样一个选择框

<template>
  <div class="rember">
    <div
      :isKeepPassword="isKeepPassword"
      class="choose"
      :class="{ isSelect: isKeepPassword }"
      @click="selectPwd"
    ></div>
    <div class="text-pwd" :class="{ islabel: isKeepPassword }">记住密码</div>
  </div>
</template>

<script setup>
import { ref } from "vue"

// 记住密码的状态
let isKeepPassword = ref(false)

// 切换记住密码的状态
function selectPwd() {
  isKeepPassword.value = !isKeepPassword.value
}
</script>

<style lang="less" scoped>
.rember {
  font-size: 13px;
  color: #798493;
  display: flex;
  margin-right: 10px;
  .choose {
    width: 14px;
    height: 14px;
    background-color: transparent;
    border: 1px solid #798493;
  }
  .isSelect {
    position: relative;
    border: 1px solid #1e95f9;
    box-shadow: 0px 0px 2px 2px rgba(30, 120, 193, 0.5);
  }
  .islabel {
    color: #1e95f9;
    text-shadow: 0px 0px 12px rgba(30, 120, 193, 0.5);
  }
  .isSelect::after {
    position: absolute;
    content: "";
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    background-color: #1e95f9;
  }
  .text-pwd {
    margin-left: 10px;
  }
}
</style>