<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>
- 发布:2022-07-28 09:01
- 更新:2022-07-31 10:12
- 阅读:384
产品分类: 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了。。。。