跳到主要内容

链接

WdLink

适用场景#

用于实现超链接点击后跳转。

基础能力说明#

  1. 链接的基础属性支持配置链接的文本内容、跳转页面、是否打开新窗口(仅对外部链接有效)、携带参数、是否展示内容插槽。当展示内容插槽时,链接的跳转配置适用于内容插槽中的所有组件
  2. 链接的高级属性支持配置链接的展示图标,可配置带图标的链接;支持配置链接是否禁用 注:链接组件暂不支持在小程序端使用

扩展场景说明#

如何实现页面跳转时传递参数#

示例

通过链接组件跳转到目标页面时,传递【你好】给目标页面做展示

配置方法

  1. 添加一个链接组件,配置跳转链接的内容:

  1. 打开链接组件的跳转页面,在页面中新建一个名字为 key1 的 url 参数变量:

  1. 在跳转页面中添加一个文本,文本内容绑定 key1 参数变量:

  2. 返回链接所在页面,在预览区域点击链接,可以看到跳转页面的文本展示你好:

限制说明#

由于小程序仅支持通过 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;}

属性#

组件接收的外部传入的属性

属性名
属性标识
类型
属性分组
默认值
说明
文本内容contentstring基础属性"这是一个链接"跳转的文字
跳转页面urlstring基础属性""通过下拉选择应用页面,可以实现内部页面跳转
是否打开新窗口isOpenInNewWindowboolean基础属性false仅外部链接生效
携带参数paramsarray基础属性[]填写跳转页面时携带的参数,用于页面传参
展示内容插槽enableSlotboolean基础属性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"选择预置图标
自定义图标iconSrcimage高级属性""设置自定义图标地址
图标位置iconPosition"before"|"after"高级属性"before"设置图标位置
是否禁用disabledboolean高级属性false开启后链接将无法进行点击

事件#

组件暴露的事件,可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
点击tapWEB端-

属性 API#

通过属性 API,可以获取组件内部的状态和属性值

只读属性名
属性标识
类型
说明
文本内容contentstring跳转的文字
跳转页面urlstring通过下拉选择应用页面,可以实现内部页面跳转
是否禁用disabledboolean开启后链接将无法进行点击

方法 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 端的链接编写样式

了解样式 API

版本变化#

相比旧版链接

  • 链接新增支持链接中图标的配置能力