1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- <template>
- <div
- class="slider-box"
- :class="[isSliderOpen && 'slider-open']"
- @click="toggleSlider"
- >
- <span class="slider-block" />
- </div>
- </template>
- <script lang="ts" setup>
- import { ref, watchEffect } from '../../../adapter-vue';
- const props = defineProps({
- open: {
- type: Boolean,
- default: false,
- },
- });
- const isSliderOpen = ref(false);
- const emits = defineEmits(['change']);
- watchEffect(() => {
- isSliderOpen.value = props.open;
- });
- const toggleSlider = () => {
- isSliderOpen.value = !isSliderOpen.value;
- emits('change', isSliderOpen.value);
- };
- </script>
- <style lang="scss" scoped>
- @import "../../../assets/styles/common";
- .slider {
- &-box {
- display: flex;
- align-items: center;
- width: 40px;
- height: 20px;
- border-radius: 10px;
- background: #e1e1e3;
- }
- &-open {
- background: #006eff !important;
- justify-content: flex-end;
- }
- &-block {
- display: inline-block;
- width: 16px;
- height: 16px;
- border-radius: 8px;
- margin: 0 2px;
- background: #fff;
- border: 0 solid rgba(0, 0, 0, 0.85);
- box-shadow: 0 2px 4px 0 #d1d1d1;
- }
- }
- </style>
|