组件：超链接

超链接组件用于创建可点击的链接以跳转到指定地址，支持设置地址、打开模式（_blank/_self等）、下载文件名等特性，常用于页面导航、外部链接跳转、文件下载等场景。

典型使用场景：

  • 页面内导航（章节跳转、目录链接）
  • 外部网站链接（官网、文档、资源）
  • 文件下载（PDF、文档、安装包）
  • 功能触发（打开对话框、执行操作）
  • 社交媒体链接（微博、微信、GitHub）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对-align到左(目标组件, 偏移量)、左侧对-align到右(目标组件, 偏移量)、底边对-align到顶(目标组件, 偏移量)、顶边对-align到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边 顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

操作属性/方法示例
设置链接文本文本超链接1.文本 = "访问官网"
设置链接地址地址超链接1.地址 = "https://www.example.com"
设置打开方式打开模式超链接1.打开模式 = "_blank"
设置下载文件名下载文件名超链接1.下载文件名 = "document.pdf"
设置禁用状态禁用超链接1.禁用 = 真
设置点击回调置被单击回调(回调)超链接1.置被单击回调((源对象, 事件对象) => { ... })

样式美化参考

以下为常用样式组合示例，可根据实际需求调整：

链接样式变体：

  • 普通链接：文本颜色 = "#1890ff"，无下划线 = 真，字体大小 = "14px"
  • 下划线链接：文本颜色 = "#1890ff"，下划线 = 真，字体大小 = "14px"
  • 按钮式链接：背景颜色 = "#1890ff"，文本颜色 = "#ffffff"，边框圆角 = "4px"，内边距 = "8px 16px"
  • 卡片式链接：背景颜色 = "#f5f5f5"，边框 = "1px solid #e8e8e8"，边框圆角 = "6px"，内边距 = "12px"

状态样式：

  • 默认状态：文本颜色 = "#1890ff"
  • 悬浮状态：文本颜色 = "#096dd9"（通过 置鼠标被进入回调 动态改变）
  • 点击状态：文本颜色 = "#40a9ff"（通过 置鼠标被按下回调 动态改变）
  • 访问过状态：文本颜色 = "#8c8c8c"（通过 置内联样式("color", "#8c8c8c") 设置）
  • 禁用状态：文本颜色 = "#d9d9d9"，光标样式 = "not-allowed"，透明度 = 0.6

图标链接样式：

  • 图标+文本：文本 = "📖 阅读文档"，字体大小 = "14px"，行高 = "24px"
  • 纯图标：文本 = "🔗"，字体大小 = "18px"，宽度 = 32，高度 = 32，内容水平对齐方式 = "center"
  • 图标按钮：文本 = "⬇️"，背景颜色 = "#1890ff"，文本颜色 = "#ffffff"，边框圆角 = "50%"，宽度 = 36，高度 = 36

导航链接样式：

  • 侧边栏导航：文本颜色 = "#333333"，字体大小 = "16px"，内边距 = "12px 24px"，置内联样式("display", "block")
  • 面包屑导航：文本颜色 = "#666666"，字体大小 = "12px"，置内联样式("margin-right", "8px")
  • 标签页导航：文本颜色 = "#333333"，边框底边 = "2px solid transparent"，内边距 = "8px 16px"，置内联样式("cursor", "pointer")

特殊功能链接：

  • 下载链接：下载文件名 = "file.pdf"，文本 = "📥 下载PDF"，文本颜色 = "#52c41a"
  • 外部链接：打开模式 = "_blank"，文本 = "🔗 外部链接"，置内联样式("target", "_blank")
  • 邮件链接：地址 = "mailto:example@email.com"，文本 = "📧 发送邮件"，文本颜色 = "#ff4d4f"

交互效果样式：

  • 鼠标悬浮变色：通过 置鼠标被进入回调 和 置鼠标被移出回调 动态改变颜色 
    超链接1.置鼠标被进入回调((源对象, 事件对象) => {
  超链接1.文本颜色 = "#096dd9"
})
超链接1.置鼠标被移出回调((源对象, 事件对象) => {
  超链接1.文本颜色 = "#1890ff"
})
  • 点击波纹效果：通过 置被单击回调 添加视觉反馈 
    超链接1.置被单击回调((源对象, 事件对象) => {
  超链接1.透明度 = 0.6
  延时执行(() => {
    超链接1.透明度 = 1
  }, 200)
})

基础示例

简单场景内完整的超链接使用演示

' 1. 创建超链接
变量 超链接1 = 创建 超链接()
' 2. 设置属性
超链接1.左边 = 100
超链接1.顶边 = 100
超链接1.宽度 = 120
超链接1.高度 = 36
超链接1.文本 = "访问官网"
超链接1.地址 = "https://www.example.com"
超链接1.打开模式 = "_blank"
超链接1.字体大小 = "16px"
超链接1.文本颜色 = "#1890ff"
超链接1.内容水平对齐方式 = "center"
超链接1.行高 = "36px"
' 3. 设置事件回调（可选）
超链接1.置被单击回调((源对象, 事件对象) => {
    ' 可以在这里添加自定义逻辑，比如统计点击
    调试输出("链接被点击：" + 超链接1.地址)
})
' 4. 添加到父容器
添加组件(超链接1)

综合示例：导航菜单与资源链接

本示例展示超链接在导航菜单和资源下载中的综合应用，包含多种链接样式和交互效果。

' ========== 创建页面标题 ==========
变量 标题 = 创建 标签()
标题.左边 = 20
标题.顶边 = 20
标题.宽度 = 760
标题.高度 = 48
标题.文本 = "📚 轻语言学习资源"
标题.字体大小 = "24px"
标题.字体粗细 = "粗体"
标题.文本颜色 = "#333333"
标题.内容水平对齐方式 = "center"
添加组件(标题)

' ========== 创建主导航链接组 ==========
主导航链接 = 创建 标签()
主导航链接.左边 = 20
主导航链接.顶边 = 80
主导航链接.宽度 = 760
主导航链接.高度 = 40
主导航链接.背景颜色 = "#f8f9fa"
主导航链接.边框圆角 = "6px"
主导航链接.置内联样式("display", "flex")
主导航链接.置内联样式("align-items", "center")
主导航链接.置内联样式("padding", "0 16px")
添加组件(主导航链接)

' ========== 添加导航链接 ==========
变量 链接_首页 = 创建 超链接()
链接_首页.文本 = "🏠 首页"
链接_首页.地址 = "#home"
链接_首页.文本颜色 = "#333333"
链接_首页.字体大小 = "14px"
链接_首页.行高 = "40px"
链接_首页.置内联样式("margin-right", "24px")
链接_首页.置被单击回调((源对象, 事件对象) => {
    弹出提示("导航到首页")
})
添加组件(链接_首页)

变量 链接_文档 = 创建 超链接()
链接_文档.文本 = "📖 文档"
链接_文档.地址 = "#docs"
链接_文档.文本颜色 = "#333333"
链接_文档.字体大小 = "14px"
链接_文档.行高 = "40px"
链接_文档.置内联样式("margin-right", "24px")
链接_文档.置被单击回调((源对象, 事件对象) => {
    弹出提示("打开文档中心")
})
添加组件(链接_文档)

变量 链接_示例 = 创建 超链接()
链接_示例.文本 = "💻 示例"
链接_示例.地址 = "#examples"
链接_示例.文本颜色 = "#333333"
链接_示例.字体大小 = "14px"
链接_示例.行高 = "40px"
链接_示例.置内联样式("margin-right", "24px")
链接_示例.置被单击回调((源对象, 事件对象) => {
    弹出提示("查看代码示例")
})
添加组件(链接_示例)

变量 链接_社区 = 创建 超链接()
链接_社区.文本 = "👥 社区"
链接_社区.地址 = "https://qinglang.example.com/community"
链接_社区.打开模式 = "_blank"
链接_社区.文本颜色 = "#1890ff"
链接_社区.字体大小 = "14px"
链接_社区.行高 = "40px"
链接_社区.置被单击回调((源对象, 事件对象) => {
    弹出提示("跳转到社区论坛（新窗口）")
})
添加组件(链接_社区)

' ========== 创建资源下载区域 ==========
变量 资源标题 = 创建 标签()
资源标题.左边 = 20
资源标题.顶边 = 140
资源标题.宽度 = 760
资源标题.高度 = 32
资源标题.文本 = "📥 下载资源"
资源标题.字体大小 = "18px"
资源标题.字体粗细 = "粗体"
资源标题.文本颜色 = "#333333"
添加组件(资源标题)

' ========== 创建下载链接组 ==========
下载容器 = 创建 标签()
下载容器.左边 = 20
下载容器.顶边 = 180
下载容器.宽度 = 760
下载容器.高度 = 120
下载容器.背景颜色 = "#fafafa"
下载容器.边框 = "1px solid #e8e8e8"
下载容器.边框圆角 = "8px"
下载容器.内边距 = "16px"
下载容器.置内联样式("display", "grid")
下载容器.置内联样式("grid-template-columns", "repeat(3, 1fr)")
下载容器.置内联样式("gap", "16px")
添加组件(下载容器)

' ========== 添加下载链接 ==========
变量 下载_手册 = 创建 超链接()
下载_手册.文本 = "📘 用户手册.pdf"
下载_手册.地址 = "/downloads/user-manual.pdf"
下载_手册.下载文件名 = "轻语言用户手册.pdf"
下载_手册.文本颜色 = "#1890ff"
下载_手册.字体大小 = "14px"
下载_手册.行高 = "32px"
下载_手册.置内联样式("padding", "8px")
下载_手册.置内联样式("background-color", "#f0f9ff")
下载_手册.置内联样式("border-radius", "4px")
下载_手册.置被单击回调((源对象, 事件对象) => {
    弹出提示("开始下载用户手册")
})
添加组件(下载_手册)

变量 下载_示例 = 创建 超链接()
下载_示例.文本 = "💻 示例代码.zip"
下载_示例.地址 = "/downloads/examples.zip"
下载_示例.下载文件名 = "轻语言示例代码.zip"
下载_示例.文本颜色 = "#52c41a"
下载_示例.字体大小 = "14px"
下载_示例.行高 = "32px"
下载_示例.置内联样式("padding", "8px")
下载_示例.置内联样式("background-color", "#f6ffed")
下载_示例.置内联样式("border-radius", "4px")
下载_示例.置被单击回调((源对象, 事件对象) => {
    弹出提示("开始下载示例代码")
})
添加组件(下载_示例)

变量 下载_工具 = 创建 超链接()
下载_工具.文本 = "🔧 开发工具.exe"
下载_工具.地址 = "/downloads/dev-tool.exe"
下载_工具.下载文件名 = "轻语言开发工具.exe"
下载_工具.文本颜色 = "#fa8c16"
下载_工具.字体大小 = "14px"
下载_工具.行高 = "32px"
下载_工具.置内联样式("padding", "8px")
下载_工具.置内联样式("background-color", "#fff7e6")
下载_工具.置内联样式("border-radius", "4px")
下载_工具.置被单击回调((源对象, 事件对象) => {
    弹出提示("开始下载开发工具")
})
添加组件(下载_工具)

' ========== 创建联系我们链接 ==========
变量 联系我们 = 创建 标签()
联系我们.左边 = 20
联系我们.顶边 = 320
联系我们.宽度 = 760
联系我们.高度 = 40
联系我们.文本 = "需要帮助？"
联系我们.字体大小 = "14px"
联系我们.文本颜色 = "#666666"
联系我们.内容水平对齐方式 = "center"
添加组件(联系我们)

变量 链接_支持 = 创建 超链接()
链接_支持.文本 = "📞 联系技术支持"
链接_支持.地址 = "mailto:support@example.com"
链接_支持.文本颜色 = "#1890ff"
链接_支持.字体大小 = "14px"
链接_支持.行高 = "40px"
链接_支持.置被单击回调((源对象, 事件对象) => {
    弹出提示("打开邮件客户端联系支持团队")
})
添加组件(链接_支持)

' ========== 创建页脚链接 ==========
变量 页脚 = 创建 标签()
页脚.左边 = 20
页脚.顶边 = 380
页脚.宽度 = 760
页脚.高度 = 32
页脚.文本 = "© 2024 轻语言团队 | "
页脚.字体大小 = "12px"
页脚.文本颜色 = "#999999"
页脚.内容水平对齐方式 = "center"
添加组件(页脚)

变量 链接_隐私 = 创建 超链接()
链接_隐私.文本 = "隐私政策"
链接_隐私.地址 = "#privacy"
链接_隐私.文本颜色 = "#999999"
链接_隐私.字体大小 = "12px"
链接_隐私.行高 = "32px"
链接_隐私.置被单击回调((源对象, 事件对象) => {
    弹出提示("查看隐私政策")
})
添加组件(链接_隐私)

变量 链接_条款 = 创建 超链接()
链接_条款.文本 = "服务条款"
链接_条款.地址 = "#terms"
链接_条款.文本颜色 = "#999999"
链接_条款.字体大小 = "12px"
链接_条款.行高 = "32px"
链接_条款.置被单击回调((源对象, 事件对象) => {
    弹出提示("查看服务条款")
})
添加组件(链接_条款)

属性：地址

  • 类型： 文本型
  • 说明： 设置或获取当前超链接指向的目标地址。支持：
    • 普通URL："https://www.example.com"
    • 页面内锚点："#section1"
    • 邮件地址："mailto:example@email.com"
    • 电话号码："tel:+8613800138000"

属性：下载文件名

  • 类型： 文本型
  • 说明： 设置或获取当前超链接指向的待下载文件的名称。设置该属性后，点击超链接将会自动下载指定文件。

属性：打开模式

  • 类型： 文本型
  • 说明： 设置或获取当前超链接的打开方式，常见取值及含义：
    • _blank：在新窗口打开链接
    • _self：在当前窗口打开链接（默认值）
    • _parent：在父窗口打开链接，如果没有父窗口则等同于 _self
    • _top：在顶级窗口打开链接，如果没有父窗口则等同于 _self
    • 框架名称：在指定的框架中打开链接

⚠️ 注意事项

  1. 安全性：外部链接建议使用 _blank 模式，避免当前页面被替换。
  2. 无障碍访问：建议为链接添加适当的 aria-label 属性，提升可访问性。
  3. 用户体验：重要操作（如下载）建议添加确认提示，避免用户误操作。
  4. 性能优化：大量链接时建议使用事件委托，减少内存占用。
  5. 样式一致性：保持链接样式的一致性，避免用户混淆。

相关文档

  • 文档框架基础类_视图 —— 视图类提供的所有通用属性和方法
  • 文档文本类组件_标签 —— 与超链接配合使用的标签组件
  • 文档文本类组件_按钮 —— 与超链接配合使用的按钮组件
  • 文档轻语言网站：轻语言语法速查 —— 拉姆达表达式语法规则
  • 文档综合演示：导航菜单设计 —— 完整导航菜单示例