# 按钮

来源快照：`result_data_new_260518.json`

- 来源 ID：`1183668642903433234`
- 模块：低代码平台e-builder
- 目录：页面引擎 - 页面设计器 - 页面组件 - 基础组件 - 基础组件/基础类
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

# 按钮

## 一、功能背景及价值用途

在低代码平台开发过程中，按钮作为用户与应用交互的关键入口，其功能多样性和个性化需求日益凸显。为满足开发者在无需编写复杂代码的情况下，就能实现多样化的交互逻辑和个性化页面设计，基于低代码平台的按钮组件应运而生，允许用户通过简单的拖拽操作，即可快速生成并定制符合业务需求的按钮。

## 二、功能概述

按钮提供了一般按钮组、层级按钮组及平铺按钮组三种按钮类型，用户可根据业务需求配置合适的名称、图标、样式及事件动作等

## 三、使用说明

### 1、功能入口

设计器左侧“基础组件/基础类”分类下选中按钮组件，在右侧配置面板操作相关配置。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544848260431917&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 2、基础配置

按钮分为一般按钮类型、层级按钮组及平铺按钮组

#### 2.1、一般按钮类型

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544904095006807&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

一般按钮类型可配置按钮名称、状态、尺寸、悬停提示及图标。

1、

【名称】：配置按钮的展示名称， 默认名称为按钮。

2、

【状态】：分为普通和禁用，禁用状态如下图所示。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544895630901328&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

3、

【尺寸】：按钮尺寸分为小、中、大及自定义。

 ![](https://weapp.eteams.cn/papi/file/preview?fileId=1160545002916069511&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

选择【自定义】时，可通过鼠标拖拽改变按钮大小。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544934377881759&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

4、

【悬停提示】：分为默认提示、自定义提示及不提示。默认为默认提示，即鼠标悬停时默认显示按钮名称。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544607907938340&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

选择自定义提示时，下方会出现提示内容的多行文本框，可自行设置，支持多语言。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544736725499950&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

5、

【显示设置】：分为仅名称、仅图标及图标+名称，决定按钮如何展示。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544607725486176&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

6、

【图标】：点击后会打开素材库，从素材库中选择合适图标。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544470415622349&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

7、

【图标大小】：设置图标大小，图标最小12px，最大36px。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544813875527684&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544642068447327&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

#### 2.2、层级按钮组

层级按钮类型可配置主按钮及下级按钮,每项可配置按钮的名称、图标、事件配置、展示开合图标、下级按钮、隐藏、悬浮提示、分割线以及设置其他操作。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544899865051170&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

8、

【展示开合图标】： 默认开启，展示右侧展开图标，取消勾选则不展示开合图标。下图从左到右分别是不展示开合图标及展示开合图标。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544453121343716&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

9、

【下级按钮】： 配置下级按钮后可在鼠标移至按钮时显示下级按钮，最多支持两级（首项按钮作为主按钮，不支持增加下级按钮），配置及效果如下图。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544951465476183&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

10、

【分割线】：可通过【按钮组设置】标题右侧图标增加分割线，对按钮进行分组展示，下级按钮同样支持，如下图。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544706490859588&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

按钮配置右上角更多按钮（三个点）悬浮下拉后有仅图标、设置其他操作、设置悬浮提示及隐藏选项。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544762509156398&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

11、

【仅图标】： 选择后右侧会出现√，此按钮若设置了图标，图标会隐藏。

12、

【设置其他操作】： 可配置图标、事件配置及悬浮提示，默认显示在按钮的右侧区域。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544796760670213&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

13、

【隐藏】： 选择后即不展示该项按钮。

#### 2.3、平铺按钮组

平铺按钮组可配置按钮最多展示数量， 超出的按钮则展示在【更多】按钮的下拉菜单中，当配置的按钮数量小于或等于最多展示数量，则不展示【更多按钮】。其他按钮功能和【层级按钮组】一致。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544710922141725&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

#### 2.4、移动端差异

1、移动端中，一般按钮和平铺按钮展示和pc端一致。

2、层级按钮组在移动端中增加了固定区域及开合方式。

14、

【固定区域】： 移动端中可配置按钮固定于屏幕顶部、底部。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544543535857727&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

下图分别是固定于顶部、默认及底部的效果。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544680776745202&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

15、

【开合方式】：移动端点击“更多”之后，下级按钮的展开方式。。

（1）树状展开，效果同pc端 ；

（2）底部滑出： 从底部滑出弹窗展示，如下图。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160545037208698920&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 3、样式配置

#### 3.1、自定义样式设置

自定义样式设置可针对按钮类型， 配置各种状态下按钮图标、文字、背景及边框的颜色，以及下划线和图标位置。

注意点：

1.

按钮类型需与当前按钮类型一致，否则不生效；

2.

pc端的悬停效果在移动端中为单击效果；

3.

下划线的颜色与按钮名称一致，下划线仅对按钮名称生效；

4.

层级按钮及平铺按钮是区分pc及移动端的，pc端的样式对移动端无效，反之亦然，根据场景设置对应样式。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544989966262292&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

#### 3.2、选择组件样式

系统已配置好多种按钮样式，用户可根据需求选择对应的样式，减少操作成本。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544745153953916&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 4、事件配置

用户可通过事件配置设置按钮的点击事件，其中事件动作类型可分为“打开页面 ”、"关闭窗口"、"条件控制"、"显示/隐藏组件"、"JavaScript"、"刷新组件"、"显示菜单"、"扫描上传"、"复制链接"、"打开企业微信会话"、"分享到企业微信会话"、"触发动作流"、  "身份验证"等(详情可见[ _事件配置参考文档_](https://www.e-cology.com.cn/sp/doc/docDetail/1124192575847580693))。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1160544543535857671&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

## 四、上下游关联功能点

1、[ _事件配置参考文档_](https://www.e-cology.com.cn/sp/doc/docDetail/1124192575847580693) ；

2、[ _组件二开口子文档_](https://weapp.eteams.cn/ecode/playground/doc/share/view/1011798190977867776#%E6%8C%89%E9%92%AE%E7%BB%84%E4%BB%B6%E4%BA%8C%E5%BC%80%E5%8F%A3%E5%AD%90%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%A3) 。

## 五、常见问题

### 1、表单中按钮如何控制显隐及禁用状态（eb页面中按钮组件可参考四-2二开文档）

1.设置类名 ， 按钮右侧配置-自定义属性-class中填写类名， 如 demo

2.事件配置中选择JavaScript方式， 如果是进入页面就需控制，则在按钮的事件配置-加载完成事件中写js

3.控制按钮显隐js参考如下： 

document.querySelector('.demo').style.display = 'none' 隐藏  
     document.querySelector('.demo').style.display = 'block'  显示

4.控制按钮禁用状态参考如下

const dom = document.querySelector('.demo .ui-btn')

dom.disabled = true 禁用  
     dom.disabled = false 取消禁用
