景象形容:
input 组件 type 为 button 时,设置了圆角 border-radius 属性后,点击该组件时没有点击成果了(背景色没有变动),删除该属性就是有点击成果的。
代码如下:
<template>
<div class="page-wrapper">
<input type="button" class="button" value="Animation 动画" />
</div>
</template>
<script>
</script>
<style>
.page-wrapper {
flex-direction: column;
justify-content: center;
align-items: center;
}
.button {
color: #20a0ff;
background-color: red;
padding: 10px 20px;
border-radius: 40px;
}
</style>
问题剖析:
设置圆角属性后,引擎底层受限导致不能主动实现点击成果,须要本人去实现。
解决办法:
设置了圆角属性后要实现按钮点击成果能够通过快利用的伪类实现。
批改后代码如下(见红色局部):
<template>
<div class="page-wrapper">
<input type="button" class="button" value="Animation 动画" />
</div>
</template>
<script>
</script>
<style>
.page-wrapper {
flex-direction: column;
justify-content: center;
align-items: center;
}
.button {
color: #20a0ff;
background-color: red;
padding: 10px 20px;
border-radius: 40px;
}
.button:active{background-color: green;}
</style>
欲了解更多详情,请参见:
快利用伪类:
https://developer.huawei.com/…
原文链接:https://developer.huawei.com/…
原作者:Mayism