魔改switch样式

玩代码的菜鸟

已于 2025-03-04 11:55:16 修改

阅读量271

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 javascript vue.js html

于 2025-03-01 16:52:57 首次发布

本文链接：https://blog.youkuaiyun.com/junhian/article/details/145950050

大人世道变了，现在ui图都不按照框架来画，简直难为前端马农

默认switch是这样得

UI设计稿是这样的

你难道要我受挫组件，哈哈，这个可以有但没必要

直接魔改switch

代码Html

<switch :checked="1 === isDefault" color="#BB0015" @change="switch1Change" />

const switch1Change = (e) => {
		isDefault.value = e.detail.value ? 1 : 0
	}

CSS（这个比较重要，需要穿透，不然不生效）

::v-deep .uni-switch-input {
		border: none;
		border-radius: 0;
		// background: red;
		width: 112upx;
		height: 54upx;
		transform: scaleX(-1);

		&::before {
			border-radius: 0;
			background: #dfdfdf;
			height: 54upx;
			width: 54upx;
		}

		&::after {
			height: 54upx;
			width: 54upx;
			border-radius: 0;
		}
		
	}
	::v-deep .uni-switch-input.uni-switch-input-checked:after{
		transform: translateX(58upx);
	}

成品：

2025/3/4已知问题，当页面尺寸调整时会变形，例如下图（现已修复）