daimp-front/sub-operation-service/src/views/userCenter/components/ischeck.vue

<template>
  <div class="c-is-check" :style="{ height: size, width: size }" :class="isVal ? 'act' : 'normal'">
    <!-- @click.stop="doCheck" -->
    <div class="check-icon">
      <el-icon><Check /></el-icon>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

const props = defineProps({
  size: {
    type: String,
    default: '28px',
  },
  value: {
    type: Boolean,
    default: false,
  },
});

let isVal = ref(props.value);

watch(
  () => props.value,
  () => {
    isVal.value = props.value;
  },
  {
    immediate: true,
  }
);

const doCheck = () => {
  //   isVal.value = !isVal.value;
};
</script>
<style lang="scss" scoped>
.c-is-check {
  position: relative;
  display: inline-block;
  width: 100%;
  border-radius: 20%;
  vertical-align: middle;
  cursor: pointer;
  &.normal {
    border: 1px solid $color-999;
    background: $color-fff;
  }
  &.act {
    border: 1px solid $color-main;
    background: $color-main;
  }
  .check-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .el-icon {
      font-size: 24px;
      font-weight: bold;
      color: $color-fff;
    }
  }
}
</style>