关于appgallery-connect:Input组件无点击效果

38次阅读

共计 909 个字符，预计需要花费 3 分钟才能阅读完成。

景象形容：

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

正文完