[Vue3] ON/OFF Toggle 만들기

ON / OFF

이 블로그 보고 만들었음.

 

나는 Vue.js & SCSS로 만들어봄.

 

1. View.vue 작성

<template>
... 생략 ...
	<input type="checkbox" id="toggle" v-model="onOff">
	<label for="toggle" class="toggle-label">
		<span class="toggle-button"></span>
		<input class="toggle-value" type="text" :value="onOff?'ON':'OFF'" disabled>
	</label>
... 생략 ...
</template>

<script>
import { ref } from '@vue'

export default {
	name: 'View',
	setup() {
    	const onOff = ref("on");
        return {
        	onOff
        }
    }
}
</script>

On, Off 넣어주고 싶었는데 어떻게 해야 편하게 넣을 수 있을까 고민해봄.

span으로 넣었더니 value 넣어줄 때 귀찮아짐.

조금 고민하다가 input type을 text로 줌.

disabled 해주면 값도 안 바뀌고 괜찮을 것이라 생각했음.

 

span이 움직이는 구체 역할을 해줄것임.

 

2. SCSS 작성

<style>
#toggle  {
	position: absolute;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	&:checked+.toggle-label {
		background: rgb(113, 175, 245);
		.toggle-button {
			left: 36.5px;
			background: #fff;
		}
		.toggle-value {
			margin-left: 5px;
			color: #fff;;
		}
	}
}

.toggle-label {
	position: relative;
	cursor: pointer;
	display: inline-block;
	width: 58px;
	height: 20px;
	background: rgb(241, 241, 241);
	border-radius: 20px;
	transition: 0.2s;
	
	.toggle-value {
		margin-top: 1.5px;
		margin-left: 22px;
		border: none;
		outline: none;
		background: none;
	}
}

.toggle-button {
	position: absolute;
	top: 1px;
	left: 3px;
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 20px;
	background: rgb(131, 131, 131);
	transition: 0.2s;
}
</style>