跳到主要内容

链接

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

可以配置页面id, 也可以通过下拉选择应用页面，可以实现内部页面跳转

是否打开新窗口isOpenInNewWindowboolean

仅外部链接生效

仅外部链接生效

携带参数paramsarray

填写跳转页面时携带的参数，用于页面传参，数组对象格式，[{key: params1, value: value1}, {key: params2, value: value2}]

默认值：[]

展示内容插槽enableSlotboolean

是否展示链接中插槽的内容

默认值：true

展示图标iconTypestring

设置图标按钮

默认值："none"

图标类型iconSourcestring

选择图标的类型

默认值："inner"

图标样式iconstring

选择预置图标

默认值："td:link"

自定义图标iconSrcstring

设置自定义图标地址

图标位置iconPositionstring

设置图标位置

默认值："before"

是否禁用disabledboolean

开启后链接将无法进行点击

事件​

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

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

-

属性 API​

通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API

只读属性名
属性标识
类型
说明
文本内容contentstring

跳转的文字

跳转页面urlstring

可以配置页面id, 也可以通过下拉选择应用页面，可以实现内部页面跳转

是否禁用disabledboolean

开启后链接将无法进行点击

方法 API​

无

样式 API​

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

名称
类名
说明和示例
根元素.wd-link链接组件根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-link {
  /* 在这里编写CSS 样式 */
}
图标.wd-link__icon链接的图标元素（共享样式）
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-link__icon {
  /* 在这里编写CSS 样式 */
}
前置图标.wd-link__before-icon链接内的前置图标
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-link__before-icon {
  /* 在这里编写CSS 样式 */
}
后置图标.wd-link__after-icon链接内的后置图标
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-link__after-icon {
  /* 在这里编写CSS 样式 */
}
文本.wd-link__text链接内显示的文本
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-link__text {
  /* 在这里编写CSS 样式 */
}
禁用状态.wd-link__icon.is-disabled链接禁用状态
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-link__icon.is-disabled {
  /* 在这里编写CSS 样式 */
}
PC 端链接根元素.wd-pc-link可以为 PC 端的链接编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-pc-link {
  /* 在这里编写CSS 样式 */
}
H5 端链接根元素.wd-h5-link可以为 H5 端的链接编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-h5-link {
  /* 在这里编写CSS 样式 */
}

了解样式 API

版本变化​

相比旧版链接

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