uni-app nvue模式下uni-data-checkbox出现两个复选框

uni-app nvue模式下uni-data-checkbox出现两个复选框

HbuildX4.57

开发环境 版本号 项目创建方式
HBuilderX 4.57 Vue3
<template> <view class="login"> <view style="flex-direction: row; align-items: center;width:200px;"> <uni-data-checkbox multiple v-model="remember" :localdata="remembers"></uni-data-checkbox> </view> <view style="flex-direction: row; align-items: center;width:200px;"> <uni-data-checkbox multiple mode="button" v-model="remember" :localdata="remembers"></uni-data-checkbox> </view> <view style="flex-direction: row; align-items: center;width:200px;"> <uni-data-checkbox multiple mode="tag" v-model="remember" :localdata="remembers"></uni-data-checkbox> </view> <view style="flex-direction: row; align-items: center;width:200px;"> <uni-data-checkbox multiple mode="list" v-model="remember" :localdata="remembers"></uni-data-checkbox> </view> <text>remember: {{remember}}</text> </view> </template> <script setup lang="ts"> const remember = ref() const remembers = ref([{text: '记住密码', value: 1}]) </script> <style lang="scss" scoped> .login { align-items: center; } </style>

在mode为default、button、list页面会出现两个复选框，为tag的时候不会出现两个复选框，但是大的复选框都点不了，只有小的复选框和文字可以点，而且复选框和文字上下展示没并排展示


更多关于uni-app nvue模式下uni-data-checkbox出现两个复选框的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

新建了个空白项目，把实例代码贴进来，如果是vue文件，展示是正常的，但如果是nvue就展示异常了，所以可以排除其他全局样式污染
<view> <checkbox-group> <label> <checkbox value="cb" checked="true" />选中 </label> <label> <checkbox value="cb" />未选中 </label> </checkbox-group> </view>

更多关于uni-app nvue模式下uni-data-checkbox出现两个复选框的实战教程也可以访问 https://www.itying.com/category-93-b0.html


确定那个大框不是uni-label的边框，我用插件市场里面的那个demo是没问题的

回复 恭喜n发财: uni-label是啥，你用的哪个demo，是nvue的文件后缀吗

这是nvue模式下uni-data-checkbox组件的已知问题，主要是由于原生渲染和Vue组件样式冲突导致的。以下是具体原因和解决方案：

  1. 出现双选框问题：
  • 在nvue模式下，组件会同时渲染原生checkbox和Vue组件样式
  • 这是nvue特有的渲染机制导致的
  1. 点击区域问题：
  • 原生checkbox和Vue组件点击区域重叠
  • 只有小复选框可点击是因为原生事件冒泡处理问题
  1. 布局问题：
  • tag模式下未正确应用flex布局样式
  • 这是nvue对CSS支持的限制导致的

解决方案（修改template部分）：

<uni-data-checkbox 
  multiple 
  v-model="remember" 
  :localdata="remembers"
  style="flex-direction: row; align-items: center;"
></uni-data-checkbox>
回到顶部