<button type="primary" class="query-button" bindtap="submitApplication" wx:if="{{!isOpenGroupMember&&!isHidden}}" >点击申请</button>怎么让这个按钮显示为灰色
时间: 2023-07-06 10:43:13 浏览: 106
要让按钮显示为灰色,可以通过在按钮的 class 属性中添加一个名为 disabled 的类来实现。代码如下:
```
<button type="primary" class="query-button disabled" bindtap="submitApplication" wx:if="{{!isOpenGroupMember&&!isHidden}}" >点击申请</button>
```
然后在 CSS 中定义 disabled 类的样式:
```
.disabled{
opacity: 0.5;
cursor: not-allowed;
}
```
这样就可以让按钮显示为灰色,且在被禁用时不再响应点击事件。
相关问题
<button type="primary" class="query-button" bindtap="submitApplication" wx:if="{{!isOpenGroupMember&&!isHidden}}" >点击申请</button>
这是一个按钮的 HTML 代码,它的类型是 primary,当且仅当 isOpenGroupMember 为 false 且 isHidden 为 false 时才会显示。它还绑定了一个名为 submitApplication 的函数,可以在用户点击按钮时触发。该函数可以在 JavaScript 中定义并实现相应的逻辑。
<div class="map-buttons"> <button class="map-button" @click="detectConflict"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">冲突检测</span> </div> </button> <button class="map-button" @click="captureScreenshot"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">截图</span> </div> </button> <button class="map-button" @click="generateMap"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">制图</span> </div> </button> <button class="map-button" @click="zoomIn"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">放大</span> </div> </button> <button class="map-button" @click="zoomOut"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">缩小</span> </div> </button> <button class="map-button" @click="showFullMap"> <div class="map-button-content"> <span class="map-button-icon"></span> <span class="map-button-name">全图</span> </div> </button> </div>改写成按钮名不在按钮元素中,而在按钮正下方
<div class="map-buttons">
<button class="map-button" @click="detectConflict">冲突检测</button>
<button class="map-button" @click="captureScreenshot">截图</button>
<button class="map-button" @click="generateMap">制图</button>
<button class="map-button" @click="zoomIn">放大</button>
<button class="map-button" @click="zoomOut">缩小</button>
<button class="map-button" @click="showFullMap">全图</button>
<div class="map-button-descriptions">
<span class="map-button-description">检测是否有冲突</span>
<span class="map-button-description">捕捉屏幕截图</span>
<span class="map-button-description">生成地图</span>
<span class="map-button-description">放大地图</span>
<span class="map-button-description">缩小地图</span>
<span class="map-button-description">查看全图</span>
</div>
</div>
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)