amis Link 链接组件JSON 配置实现超链接、图标与禁用态【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amisLink 是 amis 前端低代码框架中用于渲染超链接的展示型组件通过一段 JSON 即可生成a标签支持外链跳转、新标签页打开、图标增强、禁用与富文本内容等能力。读完本文你将掌握 Link 组件的全部属性用法、与 Table/Card/List/Form静态展示等场景的组合技巧以及它在源码中的真实渲染链路与埋点行为可直接套用于自己的 amis 页面配置。基本用法Link 组件通过type: link声明配合href指定链接地址、body指定标签内文本即可生成一个可点击的超链接。最小可用配置如下{ type: page, body: { type: link, href: https://www.baidu.com, body: 百度一下你就知道 } }从源码 packages/amis/src/renderers/Link.tsx 的render()实现可以看到组件最终渲染为amis-ui提供的 Link 组件即一个原生a标签href会经过filter(href, data, | raw)做模板变量解析详见下文“支持变量与数据联动”再传给abody通过render(body, body)递归渲染因此body不止支持纯字符串还可以是任意 amis 子 Schema例如tpl、icon等模板甚至可以在链接内部嵌套其他组件当body为空时组件会退化为直接展示解析后的href值若 href 也未提供则显示国际化文案link。新标签页打开超链接默认在当前页面跳转设置blank: true即可让链接在新标签页中打开{ type: page, body: { type: link, href: https://www.baidu.com, body: 百度一下你就知道, blank: true } }底层实现中Link.tsx渲染时会根据blank计算a标签的target属性blank为true时target _blank否则target _self若同时显式设置了htmlTarget则htmlTarget优先级更高直接作为target值例如可传_parent、_top或自定义 frame 名称。另外LinkCmpt的defaultPropsLink.tsx中blank的默认值是true即不写blank时组件默认也是新窗口打开这与文档属性表中“默认值为空”的表格写法存在差异——以实际源码行为为准。若希望当前页跳转请显式设置blank: false。禁用超链接当链接在特定场景下不应可点击时如流程状态不可操作设置disabled: true即可禁用{ type: page, body: { type: link, href: https://www.baidu.com, body: 百度一下你就知道, blank: true, disabled: true } }禁用后的表现由 amis-ui 的 Link 组件 负责点击事件被拦截handleClick中调用e.preventDefault()阻止默认跳转并e.stopPropagation()阻止事件冒泡视觉上增加is-disabled样式类Link.tsx由主题样式决定置灰等禁用外观。注意disabled属性同样会透传到上层LinkCmpt的默认 props默认false。添加图标通过icon与rightIcon可以为链接增加前置或后置图标增强可读性与视觉引导{ type: page, body: { type: link, href: https://www.baidu.com, body: 百度一下你就知道, blank: true, icon: fa fa-search } }图标渲染逻辑位于 amis-ui Link.tsxicon渲染在文本之前rightIcon渲染在文本之后两者均通过Icon组件加载值为图标字体类名如fa fa-search并附带Link-icon样式类。默认情况下不传icon/rightIcon时不渲染任何图标。属性表属性名类型默认值说明typestring如果在 Table、Card 和 List 中为link在 Form 中用作静态展示为static-linkbodystring标签内文本hrefstring链接地址blankboolean是否在新标签页打开htmlTargetstringa 标签的 target优先于 blank 属性titlestringa 标签的 titledisabledboolean禁用超链接iconstring超链接图标以加强显示rightIconstring右侧图标对照渲染器源码 Link.tsx 的AMISLinkSchema接口上述属性均有对应字段此外该 Schema 还声明了badge角标属性由withBadge装饰器Link.tsx接入 amis 的角标能力可用于在链接右上角叠加状态角标。属性细节说明body标签内文本实际通过render(body, body)渲染支持模板字符串与其他 Schema实现“图文混排”式链接href链接地址支持变量表达式见下一节htmlTarget原生target属性优先级高于blank最终透传到a target...title原生title属性鼠标悬停时的提示文字disabled禁用后阻止点击并应用is-disabled样式icon / rightIcon图标字体类名分别渲染于文本前后。支持变量与数据联动href和body都支持 amis 的模板变量语法可以实现数据驱动的动态链接。例如在一个crud或table列中href可以引用当前行的字段{ type: table, columns: [ { type: link, label: 详情, href: /detail/${id}, body: 查看详情 } ] }其原理在 Link.tsxhref会先通过filter(href, data, | raw)进行模板解析data为当前作用域数据body为空时则回退到getPropValue(this.props)即直接展示变量解析后的链接文本。这意味着链接地址、显示文本都可以完全由数据驱动例如结合source、接口返回或表单联动字段动态生成。在 Table / Card / List 中作为单元格在 Table、Card、List 等数据展示组件中type: link可直接作为列或字段的渲染类型使用此时该组件会接管单元格内容的展示。一个典型的 CRUD 表格列配置{ type: crud, api: /api/sample, columns: [ { name: name, type: link, href: https://www.baidu.com/s?wd${name}, blank: true }, { name: email, type: link, href: mailto:${email} } ] }值得注意的是在导出 Excel 时 Link 的语义会被保留。见 packages/amis/src/renderers/Table/exportExcel.ts当列类型为link或static-link时导出逻辑会读取column.pristine.href同样经过filter(href, rowData, | raw)解析出实际 URL并用getAbsoluteUrl转为绝对地址后作为单元格的超链接写入 Excel文本为空时直接使用 URL。这保证了线上表格里的可点击链接导出到 Excel 后依然可点击。在 Form 中作为静态展示static-link在表单场景中Link 组件可以配合static系列属性以只读静态方式展示。原文档属性表中提到在 Form 中用作静态展示时类型为static-link。典型用法是在表单项上开启静态展示{ type: form, body: [ { type: static-link, name: homepage, label: 个人主页, href: ${homepage} } ] }static-link的语义同样被导出链路识别见上文 exportExcel.ts 中type link || type static-link的分支判断即在表单静态展示或表格导出时链接都能被正确识别与保留而不会退化成纯文本。事件与埋点点击 Link 组件时会触发 amis 的 tracker 埋点。在 Link.tsx 的handleClick中组件会调用env?.tracker上报一条事件eventType: url与 amis action 中的命名保持一致方便后续统一分析eventData中携带{url: href, blank, label: body}即链接地址、是否新窗口打开以及链接文本。如果你在amis初始化时配置了env.tracker回调即可在用户点击任意 Link 时捕获到对应埋点数据用于行为分析或访问统计。禁用态disabled下点击会被底层 amis-ui Link 组件拦截preventDefaultstopPropagation因此不会触发该埋点。小结与常见配置速查Link 组件虽小但在表格单元格、卡片描述、详情页、表单静态展示等场景中应用极广。实际开发中可结合以下要点快速配置默认blank: true需当前页跳转时显式设置blank: false需要自定义 target如_parent、_top时使用htmlTarget它优先于blankhref支持${变量}模板解析可与表格行数据、接口返回联动body支持子 Schema 渲染可在链接内部嵌入图标、模板等富内容需要更强的视觉表达时使用icon/rightIcon需要状态提示时使用badge角标表格导出 Excel 时link/static-link单元格会保留超链接语义点击行为默认上报eventType: url埋点可在env.tracker中统一处理。【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
