Customize Switch background with text

The effect that needs to be achieved

header code implementation

	<div class="custom-switch" :class="{ 'active': value }" @click="toggle">
		<span class="custom_left" v-if="value">关灯</span>
		<div class="switch-btn"></div>
		<span class="custom_right" v-if="values">开灯</span>
	</div>
</template>

<script>
	export default {
		props: {
			value: {
				type: Boolean,
				default: false,
			},
			label: {
				type: String,
				required: true,
			},
		},
		data() {
			return {
				values: true
			}
		},
		methods: {
			toggle() {
				this.values = !this.values
				this.$emit('input', !this.value);
			},
		},
	};
</script>

<style scoped>
	.custom-switch {
		width: 130rpx;
		height: 64rpx;
		border-radius: 50rpx;
		background-color: #B2B2B2;
		cursor: pointer;
		position: relative;
		transition: background-color .3s;
	}

	.custom-switch.active {
		background-color: #07c160;
	}

	.custom-switch span {
		color: #666;
		font-size: 14px;
		display: inline-block;
		margin-top: 15rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
	}

	.custom_left {
		float: left;
		color: #008744;
		margin-left: 16rpx;
	}

	.custom_right {
		float: right;
		color: #8D8D8D;
		opacity: 100%;
		margin-right: 16rpx;
	}

	.switch-btn {
		width: 52rpx;
		height: 52rpx;
		position: absolute;
		left: 6rpx;
		top: 6rpx;
		border-radius: 50%;
		background-color: #fff;
		box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
		transition: transform .3s, background-color .3s;
	}

	.custom-switch.active .switch-btn {
		transform: translateX(66rpx);
		background-color: #fff;
	}
</style>

In the above code, we define the parameters that the component needs to receive through the props attribute:

value: Indicates the state of the switch, must be Boolean type, the default value is false.

Inside the component, we use a div element as the container of the switch, and listen to the click event of the container. When the container is clicked, call the toggle method to change the state of the switch, and send an input event to the parent component through the $emit method.

In terms of style, we define the style of the switch container, the style of the switch button and the style when selected, thus realizing a simple custom Switch component.

The way to use a custom Switch component is similar to using the Switch selector in uView. Introduce the switches component in the parent component, and bind the value of the component to the data of the parent component to realize the function of the switch.

In the parent element use:

<template>
  <div>
  	<switchs v-model="state" ></switchs>
  </div>
</template>

<script>
import CustomSwitch from '@/components/CustomSwitch.vue';

export default {
  components: {
    CustomSwitch,
  },
  data() {
    return {
     state: false,
    };
  },
};
</script>

In the above code, we introduced the custom Switch component through the import keyword and registered it in the components property. Then, use the switches tag to introduce the component in the template, and bind the v-model directive to the state data to represent the state of the switch

In this way, the custom Switch component can be used in the page, and the effect of adding text can be realized.