72 lines
1.3 KiB
Vue
72 lines
1.3 KiB
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 {
|
||
|
|
width: 100%;
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
vertical-align: middle;
|
||
|
|
cursor: pointer;
|
||
|
|
border-radius: 20%;
|
||
|
|
&.normal {
|
||
|
|
border: 1px solid $color-999;
|
||
|
|
background: $color-fff;
|
||
|
|
}
|
||
|
|
&.act {
|
||
|
|
border: 1px solid $color-main;
|
||
|
|
background: $color-main;
|
||
|
|
}
|
||
|
|
|
||
|
|
.check-icon {
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
top: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
.el-icon {
|
||
|
|
color: $color-fff;
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|