73 lines
1.2 KiB
Vue
73 lines
1.2 KiB
Vue
<!--
|
|
filename: Switcher.vue
|
|
author: liubin
|
|
date: 2023-12-05 14:29:29
|
|
description: 开关
|
|
-->
|
|
|
|
<template>
|
|
<div class="switcher" style="display: flex; align-items: center; gap: 12px">
|
|
<el-switch v-model="value" @change="handleClick"></el-switch>
|
|
<span style="color: #fff; font-size: 16px">{{ mode }}</span>
|
|
;
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Switcher',
|
|
components: {},
|
|
props: {
|
|
showTitle:{
|
|
type: Array,
|
|
required: true,
|
|
default: () => {
|
|
return []
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
value: false,
|
|
};
|
|
},
|
|
computed: {
|
|
mode() {
|
|
return this.value ? this.showTitle[0]: this.showTitle[1];
|
|
},
|
|
},
|
|
methods: {
|
|
handleClick(v) {
|
|
this.value = v;
|
|
this.$emit('emitFun', v);
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.switcher {
|
|
:deep(.el-switch__core) {
|
|
border: none;
|
|
background-color:#02457e;
|
|
height: 18px;
|
|
|
|
&::after {
|
|
background-color: #03233c;
|
|
}
|
|
}
|
|
|
|
:deep(.is-checked) {
|
|
.el-switch__core {
|
|
border: none;
|
|
height: 18px;
|
|
background-color: rgba(180, 255, 252, 0.71);
|
|
|
|
&::after {
|
|
background-color: #08d8cd;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|