<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>
c***@qq.com
- 发布：2022-07-28 09:01
- 更新：2022-07-31 10:12
- 阅读：510
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 12.5
HBuilderX类型： Alpha
HBuilderX版本号： 3.5.3
手机系统： iOS
手机系统版本号： iOS 15
手机厂商： 模拟器
手机机型： iPhone11 Pro
页面类型： nvue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
详见示例代码
详见示例代码
预期结果：
可以动态修改
可以动态修改
实际结果：
不能动态修改
不能动态修改
bug描述：
不能动态修改View 的 hover-class
c***@qq.com (作者)
这个需求在动态修改 button这样的组件时候是有用的
比如开始没有填写用户名密码的时候按钮是不可以用的，这个时候没有hoverclass ，但是动态设置disabled：false后，还是不会改变 hover-class了，体验差了一点。
目前可以hack 就是弄两个按钮，v-if 来动态显示，但是太LOW了。。。。
