<text class="iconfont icon-dianzan-copy icon-large" :class="{ 'active-icon': isClicked }" @click="isClicked = !isClicked"></text>点击图标没反应ying css为 .icon-large{ font-size:36rpx; .active-icon { color: red; } }
时间: 2023-08-13 15:28:36 浏览: 139
根据你提供的CSS代码,我发现其中的.active-icon是一个嵌套在.icon-large选择器中的伪类选择器,这是不被支持的写法。正确的写法应该是:
.icon-large {
font-size: 36rpx;
}
.icon-large.active-icon {
color: red;
}
这样就能正确地显示出红色的图标了。
相关问题
<text class="iconfont icon-dianzan-copy icon-large" :class="{ 'active-icon': isClicked }" @click="agreeIschecked"></text> agreeIschecked() { this.isClicked = !this.isClicked },这样呢
根据你提供的代码,可以看出@click事件绑定在正确的元素上,并且isClicked这个属性在组件的data选项中已经定义了。因此,你可以检查一下CSS样式是否正确应用了。另外,你也可以在agreeIschecked函数中加入console.log()来查看函数是否被正确调用,以及isClicked属性是否被正确修改。如果问题仍然存在,你可以将完整的代码提供给我,这样我可以更好地帮助你解决问题。
<text class="iconfont icon-dianzan-copy icon-large" @tap='agree'></text>设置点击iconfont的颜色改变
要实现点击iconfont改变颜色可以通过以下步骤:
1. 在iconfont的样式中增加一个class,例如:`.active-icon { color: red; }`
2. 在模板中使用iconfont时,绑定一个变量来表示当前是否被点击,例如:`<text class="iconfont icon-dianzan-copy icon-large" :class="{ 'active-icon': isClicked }" @tap="isClicked = !isClicked"></text>"`
3. 在data中定义isClicked变量,初始值为false
这样,当用户点击iconfont时,isClicked会变为true,从而使得iconfont的class绑定了active-icon,从而改变了颜色。再次点击时,isClicked会变为false,class会移除,颜色恢复原来的颜色。
阅读全文