ZhongRuan-ImProject/im-uniapp/components/bar/switch-bar.vue

<template>
	<view class="switch-bar">
		<text class="title">{{ title }}</text>
		<switch class="switch" :checked="checked" color="#18bc37" @change="onChange"></switch>
	</view>
</template>

<script>
export default {
	name: "switch-bar",
	props: {
		title: {
			type: String,
			required: true
		},
		checked: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			value: this.checked
		}
	},
	methods: {
		onChange(e) {
			this.value = true;
			setTimeout(() => {
				this.value = false;
			}, 100)
			//this.value = false;

			this.$emit('change', e);
		}
	}

}
</script>

<style lang="scss" scoped>
.switch-bar {
	width: 100%;
	height: 100rpx;
	font-size: 34rpx;
	color: black;
	margin-top: 5rpx;
	background-color: white;
	line-height: 100rpx;
	display: flex;

	.title {
		flex: 1;
		margin-left: 40rpx;
	}

	.switch {
		margin-right: 40rpx;
	}
}
</style>