烟台网站建设外贸wordpress分类编辑器

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

默认switch是这样得

UI设计稿是这样的

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

直接魔改switch

代码Html

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

JS

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已知问题，当页面尺寸调整时会变形，例如下图（现已修复）

2025/3/4更新:现在页面尺寸变化也不会影响按钮