AppGallery Connect：Input組件無點(diǎn)擊效果

現(xiàn)象描述：

input組件type為button時(shí)，設(shè)置了圓角border-radius屬性后，點(diǎn)擊該組件時(shí)沒有點(diǎn)擊效果了（背景色沒有變化），刪除該屬性就是有點(diǎn)擊效果的。

代碼如下：

<template>

  <div class="page-wrapper">

    <input type="button" class="button"  value="Animation 動(dòng)畫" />

  </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>

問題分析：

設(shè)置圓角屬性后，引擎底層受限導(dǎo)致不能自動(dòng)實(shí)現(xiàn)點(diǎn)擊效果，需要自己去實(shí)現(xiàn)。

解決方法：

設(shè)置了圓角屬性后要實(shí)現(xiàn)按鈕點(diǎn)擊效果可以通過快應(yīng)用的偽類實(shí)現(xiàn)。

修改后代碼如下（見紅色部分）：

<template>

  <div class="page-wrapper">

    <input type="button" class="button"  value="Animation 動(dòng)畫" />

  </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>

欲了解更多詳情，請(qǐng)參見：

快應(yīng)用偽類：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-style#h1-1578402140607