<template>
|
<!-- <el-button type="primary" class="el-button-custom" size="small">
|
|
{{ checkValue ? activeText : inactiveText }}
|
</el-button> -->
|
<el-checkbox
|
ref="checkboxRef"
|
:disabled="loading"
|
:model-value="modelValue"
|
@update:model-value="(e) => emits('update:modelValue', e)"
|
@change="handleChange"
|
border
|
size="small"
|
>
|
<template #default>
|
<el-space>
|
<el-icon v-if="loading" class="is-loading" color="#00fff2"><Loading /></el-icon>
|
{{ activeText }}
|
</el-space>
|
</template>
|
</el-checkbox>
|
</template>
|
<script setup>
|
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
// import $ from 'jquery';
|
|
const props = defineProps({
|
modelValue: {
|
type: Boolean
|
},
|
loading: {
|
type: Boolean
|
},
|
defaultValue: {
|
type: Boolean
|
},
|
activeText: {
|
type: String,
|
default: '开'
|
},
|
inactiveText: {
|
type: String,
|
default: '关'
|
}
|
});
|
|
const emits = defineEmits(['change', 'update:modelValue']);
|
|
const checkboxRef = ref();
|
const checkValue = ref(false);
|
|
watch(
|
() => props.defaultValue,
|
(nV, oV) => {
|
if (nV != oV) {
|
checkValue.value = nV;
|
}
|
},
|
{ immediate: true }
|
);
|
|
watch(
|
() => props.loading,
|
(nV, oV) => {
|
if (nV != oV) {
|
// setTimeout(() => {
|
// const e1 = checkboxRef.value.$el.querySelector('.el-checkbox__input');
|
// console.log(e1);
|
|
// // e1.classList.toggle('is-disabled');
|
// e1.classList.toggle('checkbox__input_none');
|
// const e2 = checkboxRef.value.$el.querySelector('.el-checkbox__label');
|
// console.log(e2);
|
// e2.classList.toggle('checkbox__label_nopadding');
|
// }, 500);
|
|
// if (props.id) {
|
// console.log(
|
// checkboxRef.value.$el.querySelector('.el-checkbox__input').classList
|
// );
|
// console.log(
|
// checkboxRef.value.$el.querySelector('.el-checkbox__label').classList
|
// );
|
// }
|
}
|
}
|
);
|
|
onMounted(() => {
|
if (props.id) {
|
console.log(
|
checkboxRef.value.$el.querySelector('.el-checkbox__input').classList
|
);
|
console.log(
|
checkboxRef.value.$el.querySelector('.el-checkbox__label').classList
|
);
|
}
|
});
|
|
function handleChange(value) {
|
emits('change', value);
|
}
|
</script>
|
<style scoped>
|
.el-checkbox {
|
--el-checkbox-text-color: white;
|
/*--main-color: #00fff2;*/
|
--main-color: #23dad1;
|
--el-checkbox-checked-text-color: var(--main-color);
|
--el-checkbox-checked-input-border-color: var(--main-color);
|
--el-checkbox-checked-bg-color: var(--main-color);
|
--el-checkbox-input-border-color-hover: var(--main-color);
|
|
--el-checkbox-disabled-checked-input-fill: var(--main-color);
|
--el-checkbox-disabled-checked-input-border-color: var(--main-color);
|
--el-checkbox-disabled-checked-icon-color: white;
|
margin-right: 6px;
|
/* height: initial; */
|
}
|
|
.el-checkbox__input.is-disabled + span.el-checkbox__label {
|
color: var(--el-color-primary);
|
}
|
|
:deep(.checkbox__input_none) {
|
display: none !important;
|
}
|
|
:deep(.checkbox__label_nopadding) {
|
padding-left: 0px;
|
}
|
</style>
|
