uni-app 在元素设置样式 display 后 v-show 的默认 UA 样式无法使其有效
uni-app 在元素设置样式 display 后 v-show 的默认 UA 样式无法使其有效
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Windows | 1909 18363.1379 | HBuilderX |
## 示例代码:
```vue
<template>
<view class="fill-card analysis-answer-card">
<view class="subject">
<view class="tip"></view>
<view>{{ subject }}</view>
</view>
<view class="content" :class="showAnalysis ? 'has-show-line' : ''">
<view class="toggle-layout" @tap="handleToggleAnalysisShow">
<text>{{ showAnalysis ? '隐藏' : '显示'}}解析</text>
<text class="icon cuIcon" :class="showAnalysis ? 'cuIcon-fold' : 'cuIcon-unfold'"></text>
</view>
</view>
<view class="analysis" v-show="showAnalysis">
<view class="score-layout">
<view>
<text>正确答案:</text>
<text class="user-answer" :class="doRightClass">{{ correct }}</text>
</view>
<view v-if="score">得分:{{ score }}</view>
</view>
<view class="description">
{{ analysis }}
</view>
</view>
</view>
</template>
<script>
export default {
name: 'FillCard',
props: {
subject: String,
userAnswer: String,
correct: String,
doRight: Number,
score: Number,
analysis: String
},
computed: {
doRightClass () {
if (this.doRight === 1) {
return 'has-correct'
} else if (this.doRight === 2) {
return 'has-error'
} else {
return ''
}
}
},
data () {
return {
showAnalysis: false
}
},
methods: {
handleToggleAnalysisShow () {
this.showAnalysis = !this.showAnalysis
}
}
}
</script>
<style lang="scss">
[@import](/user/import) url("./index.scss");
</style>
操作步骤:
给元素设置display:flex
给元素加上v-show
通过按钮切换v-show
隐藏显示
预期结果:
正常隐藏显示
实际结果:
隐藏显示切换无效
更多关于uni-app 在元素设置样式 display 后 v-show 的默认 UA 样式无法使其有效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
已知问题,后续会考虑优化
原因:你写的样式权重更高
临时解决方案:使用权重更高的样式覆盖
app.vue style
[hidden]{display: none !important;}
更多关于uni-app 在元素设置样式 display 后 v-show 的默认 UA 样式无法使其有效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在uni-app中,当给元素设置display: flex
后,v-show
失效的问题通常是由于样式优先级冲突导致的。v-show
在uni-app中通过内联样式display: none
来控制显示/隐藏,但如果外部CSS中设置了display: flex
,其优先级可能高于内联样式,导致切换无效。
解决方案:
-
使用条件类名替代:通过动态绑定class来控制显示状态,例如:
<view class="analysis" :class="{ 'hidden': !showAnalysis }">
在CSS中定义:
.analysis.hidden { display: none !important; }
-
调整样式优先级:确保
v-show
的内联样式不被覆盖,可以在flex样式后添加!important
:.analysis { display: flex !important; }