链接
WdLink
适用场景#
用于实现超链接点击后跳转。
基础能力说明#
- 链接的基础属性支持配置链接的文本内容、跳转页面、是否打开新窗口（仅对外部链接有效）、携带参数、是否展示内容插槽。当展示内容插槽时，链接的跳转配置适用于内容插槽中的所有组件
- 链接的高级属性支持配置链接的展示图标，可配置带图标的链接；支持配置链接是否禁用 注：链接组件暂不支持在小程序端使用
扩展场景说明#
如何实现页面跳转时传递参数#
示例
通过链接组件跳转到目标页面时，传递【你好】给目标页面做展示
配置方法
- 添加一个链接组件，配置跳转链接的内容：
- 打开链接组件的跳转页面，在页面中新建一个名字为 key1 的 url 参数变量：
在跳转页面中添加一个文本，文本内容绑定 key1 参数变量：
返回链接所在页面，在预览区域点击链接，可以看到跳转页面的文本展示你好：
限制说明#
由于小程序仅支持通过 webview 组件的方式进行外部链接的跳转，因此链接组件不支持在小程序中进行构建使用。
示例#
交互式预览#
带图标的文字链接#
禁用的链接#
样式 API 自定义样式#
#wd-page-root .wd-link { font-size: 20px;}
#wd-page-root .wd-link:hover .wd-link__text { text-decoration: none; color: green;}
#wd-page-root .wd-icon { color: orange;}
#wd-page-root .wd-link__text { color: skyblue;}属性#
组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 属性分组 | 默认值 | 说明 |
|---|
| 文本内容 | content | string | 基础属性 | "这是一个链接" | 跳转的文字 |
| 跳转页面 | url | string | 基础属性 | "" | 通过下拉选择应用页面，可以实现内部页面跳转 |
| 是否打开新窗口 | isOpenInNewWindow | boolean | 基础属性 | false | 仅外部链接生效 |
| 携带参数 | params | array | 基础属性 | [] | 填写跳转页面时携带的参数，用于页面传参 |
| 展示内容插槽 | enableSlot | boolean | 基础属性 | true | 是否展示链接中插槽的内容 |
| 展示图标 | iconType | "none"|"text-with-icon"|"icon-only" | 高级属性 | "none" | 设置图标按钮 |
| 图标类型 | iconSource | "inner"|"custom" | 高级属性 | "inner" | 选择图标的类型 |
| 图标样式 | icon | "td:add-circle"|"td:add-rectangle"|"td:add"|"td:app"|"td:arrow-down-rectangle"|"td:arrow-down"|"td:arrow-left"|"td:arrow-right"|"td:arrow-up"|"td:attach"|"td:backtop-rectangle"|"td:backtop"|"td:backward"|"td:barcode"|"td:books"|"td:browse-off"|"td:browse"|"td:bulletpoint"|"td:calendar"|"td:call"|"td:caret-down-small"|"td:caret-down"|"td:caret-left-small"|"td:caret-left"|"td:caret-right-small"|"td:caret-right"|"td:caret-up-small"|"td:caret-up"|"td:cart"|"td:chart-bar"|"td:chart-bubble"|"td:chart-pie"|"td:chart"|"td:chat"|"td:check-circle-filled"|"td:check-circle"|"td:check-rectangle-filled"|"td:check-rectangle"|"td:check"|"td:chevron-down-circle"|"td:chevron-down-rectangle"|"td:chevron-down"|"td:chevron-left-circle"|"td:chevron-left-double"|"td:chevron-left-rectangle"|"td:chevron-left"|"td:chevron-right-circle"|"td:chevron-right-double"|"td:chevron-right-rectangle"|"td:chevron-right"|"td:chevron-up-circle"|"td:chevron-up-rectangle"|"td:chevron-up"|"td:circle"|"td:clear"|"td:close-circle-filled"|"td:close-circle"|"td:close-rectangle"|"td:close"|"td:cloud-download"|"td:cloud-upload"|"td:cloud"|"td:code"|"td:control-platform"|"td:creditcard"|"td:dashboard"|"td:delete"|"td:desktop"|"td:discount-filled"|"td:discount"|"td:download"|"td:edit-1"|"td:edit"|"td:ellipsis"|"td:enter"|"td:error-circle-filled"|"td:error-circle"|"td:error"|"td:file-add"|"td:file-copy"|"td:file-excel"|"td:file-image"|"td:file-paste"|"td:file-pdf"|"td:file-powerpoint"|"td:file-unknown"|"td:file-word"|"td:file"|"td:filter-clear"|"td:filter"|"td:flag"|"td:folder-add"|"td:folder-open"|"td:folder"|"td:fork"|"td:format-horizontal-align-bottom"|"td:format-horizontal-align-center"|"td:format-horizontal-align-top"|"td:format-vertical-align-center"|"td:format-vertical-align-left"|"td:format-vertical-align-right"|"td:forward"|"td:fullscreen-exit"|"td:fullscreen"|"td:gender-female"|"td:gender-male"|"td:gift"|"td:heart-filled"|"td:heart"|"td:help-circle-filled"|"td:help-circle"|"td:help"|"td:history"|"td:home"|"td:hourglass"|"td:image"|"td:info-circle-filled"|"td:info-circle"|"td:internet"|"td:jump"|"td:laptop"|"td:layers"|"td:link-unlink"|"td:link"|"td:location"|"td:lock-off"|"td:lock-on"|"td:login"|"td:logo-android"|"td:logo-apple-filled"|"td:logo-apple"|"td:logo-chrome-filled"|"td:logo-chrome"|"td:logo-codepen"|"td:logo-github-filled"|"td:logo-github"|"td:logo-ie-filled"|"td:logo-ie"|"td:logo-windows-filled"|"td:logo-windows"|"td:logout"|"td:mail"|"td:menu-fold"|"td:menu-unfold"|"td:minus-circle-filled"|"td:minus-circle"|"td:minus-rectangle"|"td:mobile-vibrate"|"td:mobile"|"td:money-circle"|"td:more"|"td:move"|"td:next"|"td:notification-filled"|"td:notification"|"td:order-adjustment-column"|"td:order-ascending"|"td:order-descending"|"td:page-first"|"td:page-last"|"td:pause-circle-filled"|"td:photo"|"td:play-circle-filled"|"td:play-circle-stroke"|"td:play-circle"|"td:play"|"td:poweroff"|"td:precise-monitor"|"td:previous"|"td:print"|"td:qrcode"|"td:queue"|"td:rectangle"|"td:refresh"|"td:remove"|"td:rollback"|"td:root-list"|"td:round"|"td:save"|"td:scan"|"td:search"|"td:secured"|"td:server"|"td:service"|"td:setting"|"td:share"|"td:shop"|"td:slash"|"td:sound"|"td:star-filled"|"td:star"|"td:stop-circle-1"|"td:stop-circle-filled"|"td:stop-circle"|"td:stop"|"td:swap-left"|"td:swap-right"|"td:swap"|"td:thumb-down"|"td:thumb-up"|"td:time-filled"|"td:time"|"td:tips"|"td:tools"|"td:unfold-less"|"td:unfold-more"|"td:upload"|"td:usb"|"td:user-add"|"td:user-avatar"|"td:user-circle"|"td:user-clear"|"td:user-talk"|"td:user"|"td:usergroup-add"|"td:usergroup-clear"|"td:usergroup"|"td:video"|"td:view-column"|"td:view-list"|"td:view-module"|"td:wallet"|"td:wifi"|"td:zoom-in"|"td:zoom-out"|"nointernet"|"success"|"warning"|"pending"|"refresh"|"folder"|"arrowup"|"arrowdown"|"arrowleft"|"arrowright"|"chevronup"|"chevrondown"|"chevronleft"|"chevronright"|"delete"|"edit"|"search"|"check"|"close"|"add"|"download"|"success-fill"|"close-fill"|"info-fill"|"pending-fill"|"warning-fill"|"more"|"star"|"star-fill"|"location"|"question" | 高级属性 | "td:link" | 选择预置图标 |
| 自定义图标 | iconSrc | image | 高级属性 | "" | 设置自定义图标地址 |
| 图标位置 | iconPosition | "before"|"after" | 高级属性 | "before" | 设置图标位置 |
| 是否禁用 | disabled | boolean | 高级属性 | false | 开启后链接将无法进行点击 |
事件#
组件暴露的事件，可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
|---|
| 点击 | tap | WEB端 | - |
属性 API#
通过属性 API，可以获取组件内部的状态和属性值
只读属性名 | 属性标识 | 类型 | 说明 |
|---|
| 文本内容 | content | string | 跳转的文字 |
| 跳转页面 | url | string | 通过下拉选择应用页面，可以实现内部页面跳转 |
| 是否禁用 | disabled | boolean | 开启后链接将无法进行点击 |
方法 API#
无样式 API#
通过样式 API，可以覆盖组件中内部元素的样式来实现自定义
名称 | 类名 | 说明 |
|---|
| 根元素 | .wd-link | 链接组件根元素 |
| 图标 | .wd-link__icon | 链接的图标元素（共享样式） |
| 前置图标 | .wd-link__before-icon | 链接内的前置图标 |
| 后置图标 | .wd-link__after-icon | 链接内的后置图标 |
| 文本 | .wd-link__text | 链接内显示的文本 |
| 禁用状态 | .wd-link__icon.is-disabled | 链接禁用状态 |
| PC 端链接根元素 | .wd-pc-link | 可以为 PC 端的链接编写样式 |
| H5 端链接根元素 | .wd-h5-link | 可以为 H5 端的链接编写样式 |
版本变化#
相比旧版链接
- 链接新增支持链接中图标的配置能力