[uniapp][swtich开关]阻止切换状态(类似阻止事件冒泡)

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是一个很好解决的问题,但奈何我懒得改源码,而且其他项目使用还的单独修改一次源码,不方面,网官方有所改进把。

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值