c***@qq.com
c***@qq.com
  • 发布:2022-07-28 09:01
  • 更新:2022-07-31 10:12
  • 阅读:262

【报Bug】NVUE2、NVUE3 下View 不能动态修改 hover-class,请问这是bug吗?

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 12.5

HBuilderX类型: Alpha

HBuilderX版本号: 3.5.3

手机系统: iOS

手机系统版本号: iOS 15

手机厂商: 模拟器

手机机型: iPhone11 Pro

页面类型: nvue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
  <view style="display: flex; flex-direction: column">  
    <view style="display: flex; flex-direction: column">  
      <text style="padding: 12px">https://uniapp.dcloud.io/component/view.html#view</text>  
      <text style="padding: 12px">NVUE2、NVUE3 不能动态修改View的hover-class DEMO</text>  
    </view>  
    <view style="padding: 12px ; ">  
      <text style="color: #ff4d4f">这个例子默认有:但是不能取消</text>  
    </view>  
    <view :hover-class="setupHover"  
          class="btn">  
      <text>先点击我,看看效果,再点击按钮</text>  
      <text>hoverClass:{{setupHover}}</text>  
    </view>  
  
    <button @tap="handleTap">{{hasHoverBtnTitle}}</button>  
  
    <view style="padding: 12px;">  
      <text style="color: #ffa940">这个例子默认没有Hover:但是不能动态设置</text>  
    </view>  
    <view :hover-class="setupHover2"  
          class="btn">  
      <text>先点击我,看看效果,再点击按钮</text>  
      <text>hoverClass:{{setupHover2}}</text>  
    </view>  
  
    <button @tap="handleTap2">{{hasHoverBtnTitle2}}</button>  
  </view>  
</template>  
  
<script>  
  
export default {  
  data() {  
    return {  
      hasHover: true,  
      noneHover: false,  
    }  
  },  
  computed: {  
    hasHoverBtnTitle() {  
      if (this.hasHover) {  
        return '目前有Hover点击关闭'  
      }  
      return 'Hover None 点击设置'  
    },  
    setupHover() {  
      if (this.hasHover) {  
        return 'hover-class'  
      }  
      return 'none'  
    },  
    hasHoverBtnTitle2() {  
      if (this.noneHover) {  
        return '目前有Hover点击关闭'  
      }  
      return 'Hover None 点击设置'  
    },  
    setupHover2() {  
      if (this.noneHover) {  
        return 'hover-class2'  
      }  
      return 'none'  
    }  
  },  
  onReady() {  
  
  },  
  methods: {  
    handleTap() {  
      this.hasHover = !this.hasHover  
    },  
    handleTap2() {  
      this.noneHover = !this.noneHover  
    }  
  },  
}  
</script>  
  
<style lang="scss" scoped>  
.hover-class {  
  opacity          : 0.5;  
  background-color : #bae7ff;  
}  
  
.hover-class2 {  
  opacity          : 0.5;  
  background-color : #ffe7ba;  
}  
  
.btn {  
  display         : flex;  
  justify-content : center;  
  align-items     : center;  
  margin-top      : 10px;  
  margin-bottom   : 10px;  
  height          : 54px;  
  border-width    : 1px;  
  border-style    : solid;  
  border-color    : #E3E3E3  
}  
</style>  

操作步骤:

详见示例代码

预期结果:

可以动态修改

实际结果:

不能动态修改

bug描述:

不能动态修改View 的 hover-class

2022-07-28 09:01 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

bug已确认后续优化,已加分感谢您的反馈!

c***@qq.com

c***@qq.com (作者)

这个需求在动态修改 button这样的组件时候是有用的

比如开始没有填写用户名密码的时候按钮是不可以用的,这个时候没有hoverclass ,但是动态设置disabled:false后,还是不会改变 hover-class了,体验差了一点。

目前可以hack 就是弄两个按钮,v-if 来动态显示,但是太LOW了。。。。

要回复问题请先登录注册