Input组件无点击效果,input点击事件不能用,input标签设置不可编辑-ESG跨境

Input组件无点击效果,input点击事件不能用,input标签设置不可编辑

输入组件没有点击效果。

现象描述:

当组件的输入类型为按钮时，设置圆角边框半径属性后，点击组件时没有点击效果(背景颜色没有变化)。删除此属性将产生点击效果。

代码如下:

模板

div class =页面包装

type = button class = button value = animation animation/

/div

/模板

脚本

/脚本

风格

。页面包装{

伸缩方向:列；

justifycontent:居中；

对齐项目:居中；

}

。按钮{

颜色:# 20a0ff

背景色:红色；

填充:10px 20px

边框半径:40px

}

/风格

问题分析:

设置圆角属性后，引擎底部受限，无法自动实现点击效果，需要自己实现。

解决方案:

设置圆角属性后，可以通过快速应用的伪类实现按钮点击效果。

修改后的代码如下(见红色部分):

模板

div class =页面包装

type = button class = button value = animation animation/

/div

/模板

脚本

/脚本

风格

。页面包装{

伸缩方向:列；

justifycontent:居中；

对齐项目:居中；

}

。按钮{

颜色:# 20a0ff

背景色:红色；

填充:10px 20px

边框半径:40px

}

。按钮:活动{

背景色:绿色；

}

/风格

有关更多详细信息，请参见:

快速应用程序伪类:

https://developer . Huawei . com/consumer/cn/doc/development/quick appReferences/quick appstyle # h1578402140607

特别声明：以上文章内容仅代表作者本人观点，不代表ESG跨境电商观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与ESG跨境电商联系。