uniapp 的switch按钮是默认点击后就切换状态的,但是有时回根据业务需求提前进行业务流程判断后再提示开关启闭状态。
比如,我有个开关是开启用户信息采集的,点击开关后需要弹框等在用户确认后在更改开关状态,但是默认情况下,你点击后无论如何,开关状态都会改变。
我试过网上的什么在父元素添加“@tap.stop.prevent”,如下图,但不止为何,行不通。
<view v-for="item in UserRight">
<view class="device-switch" @tap.stop.prevent>
<switch :checked="item.isAccepted" @change="switchChange"/>
</view>
</view>
后来又试了网上的另一个方法,增加隐藏遮蔽层
<view v-for="item in UserRight" class="switch-box">
<view class="device-switch" @tap.stop.prevent>
<switch :checked="item.isAccepted" @change="switchChange"/>
<view class="switch_shade" @tap='changeChecked()'></view>
</view>
</view>
//stylesheet如下
.switch-box{
position: relative;
display: inline-block;
}
.switch_shade{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
}
结果还是不行,最后干脆把switch禁用,在另外添加自定义的click事件,这样就解决问题了,代码如下。
<view v-for="item in UserRight">
<view class="device-switch">
<switch :checked="item.isAccepted" disabled @click="switchChange"/>
</view>
</view>
但是这个是uniapp组件没设计好,其实添加一个beforeChange是一个很好解决的问题,但奈何我懒得改源码,而且其他项目使用还的单独修改一次源码,不方面,网官方有所改进把。