SanoUI

Appearance

Link 链接 ​

链接组件，用于文字链接。支持通过 data-* 属性自动初始化。

基础用法 ​

方式 1：自动初始化（推荐） ​

通过 data-* 属性自动初始化，无需编写 JavaScript 代码。

html
<div id="auto-init-link-demo">
  <div data-href="https://example.com" data-type="primary">主要链接</div>
  <div data-href="https://example.com" data-type="success" data-underline="true">成功链接</div>
  <div data-href="https://example.com" data-type="danger" data-disabled="true">禁用链接</div>
</div>

<script>
SA.init('#auto-init-link-demo');
</script>
加载 SanoUI 组件中...

方式 2：JavaScript 方式 ​

html
<div id="demo-link"></div>

<script>
  const link = new SaLink('#demo-link', {
    href: 'https://example.com',
    text: '基础链接'
  });
</script>
加载 SanoUI 组件中...

不同类型 ​

通过 type 配置链接类型，支持 default、primary、success、warning、danger、info。

html
<div id="demo-link-types">
  <div id="demo-link-default"></div>
  <div id="demo-link-primary"></div>
  <div id="demo-link-success"></div>
  <div id="demo-link-warning"></div>
  <div id="demo-link-danger"></div>
  <div id="demo-link-info"></div>
</div>

<script>
  new SaLink('#demo-link-default', {
    href: '#',
    text: '默认链接',
    type: 'default'
  });
  
  new SaLink('#demo-link-primary', {
    href: '#',
    text: '主要链接',
    type: 'primary'
  });
  
  new SaLink('#demo-link-success', {
    href: '#',
    text: '成功链接',
    type: 'success'
  });
  
  new SaLink('#demo-link-warning', {
    href: '#',
    text: '警告链接',
    type: 'warning'
  });
  
  new SaLink('#demo-link-danger', {
    href: '#',
    text: '危险链接',
    type: 'danger'
  });
  
  new SaLink('#demo-link-info', {
    href: '#',
    text: '信息链接',
    type: 'info'
  });
</script>
加载 SanoUI 组件中...

打开方式 ​

通过 target 配置链接打开方式。

html
<div id="demo-link-target">
  <div id="demo-link-self"></div>
  <div id="demo-link-blank"></div>
</div>

<script>
  // 当前窗口打开
  new SaLink('#demo-link-self', {
    href: 'https://example.com',
    text: '当前窗口打开',
    target: '_self'
  });
  
  // 新窗口打开
  new SaLink('#demo-link-blank', {
    href: 'https://example.com',
    text: '新窗口打开',
    target: '_blank'
  });
</script>
加载 SanoUI 组件中...

带图标的链接 ​

通过 icon 配置或 data-icon 属性添加图标。

html
<div id="demo-link-icon">
  <div data-href="https://example.com" data-type="primary" data-icon="plus">新建</div>
  <div data-href="https://example.com" data-type="success" data-icon="edit">编辑</div>
  <div data-href="https://example.com" data-type="danger" data-icon="delete">删除</div>
</div>

<script>
SA.init('#demo-link-icon');
</script>
加载 SanoUI 组件中...

下划线 ​

通过 underline 配置是否显示下划线。

html
<div id="demo-link-underline"></div>

<script>
  // 显示下划线
  new SaLink('#demo-link-underline', {
    href: '#',
    text: '有下划线的链接',
    underline: true
  });
  
  // 无下划线
  new SaLink('#demo-link-underline', {
    href: '#',
    text: '无下划线的链接',
    underline: false
  });
</script>
加载 SanoUI 组件中...

禁用状态 ​

通过 disabled: true 禁用链接。

html
<div id="demo-link-disabled"></div>

<script>
  const link = new SaLink('#demo-link-disabled', {
    href: '#',
    text: '禁用链接',
    disabled: true
  });
</script>
加载 SanoUI 组件中...

API ​

构造函数参数 ​

参数说明类型默认值
container容器选择器或元素string | HTMLElement-
options配置选项SaLinkOptions{}

配置选项 ​

参数说明类型可选值默认值
href链接地址string-'#'
text链接文本string-''
type链接类型stringdefault / primary / success / warning / danger / infodefault
underline是否显示下划线boolean-true
disabled是否禁用boolean-false
target打开方式string_self / _blank_self

静态方法 ​

方法名说明参数返回值
SaLink.init(element)初始化单个链接元素element: HTMLElement
链接元素		SaLink | void
SaLink.initAll(container?)初始化容器内所有带 data-* 属性的链接container?: HTMLElement | string
容器元素或选择器，默认为 document		Array<SaLink>

实例方法 ​

方法名说明参数返回值
setDisabled设置禁用状态disabled: booleanSaLink
destroy销毁实例-SaLink

HTML 属性 ​

属性说明类型默认值示例
data-href链接地址string-data-href="https://example.com"
data-type链接类型string'default'data-type="primary"
data-underline是否显示下划线booleanfalsedata-underline="true"
data-disabled是否禁用booleanfalsedata-disabled="true"
data-target打开方式string'_self'data-target="_blank"
data-icon图标名称string-data-icon="plus"

自动初始化 ​

链接组件支持自动初始化，主要作用包括：

  1. 自动渲染链接：如果元素有 data-href 或其他 data-* 属性，会自动渲染对应的链接
  2. 自动读取配置：从 data-type、data-underline、data-disabled、data-target、data-icon 属性自动读取配置
  3. 动态元素支持：通过 MutationObserver 自动监听 DOM 变化，动态添加的链接元素也会自动初始化

注意：

  • 链接组件会在 SA.init() 时自动初始化所有带有 data-href 或其他 data-* 属性的元素
  • 动态添加：通过 JavaScript 动态添加到页面的链接元素（如 AJAX 加载、模板渲染等），会自动被检测并初始化，无需手动调用 SaLink.init() 或 SA.init()
html
<div id="auto-init-demo">
  <!-- 普通元素：只需 data-href，自动初始化会自动渲染链接 -->
  <div data-href="https://example.com" data-type="primary">主要链接</div>

  <!-- 带下划线的链接：自动初始化会自动读取 data-underline -->
  <div data-href="https://example.com" data-type="success" data-underline="true">成功链接</div>

  <!-- 禁用的链接：自动初始化会自动读取 data-disabled -->
  <div data-href="https://example.com" data-type="danger" data-disabled="true">禁用链接</div>
</div>

<script>
// 自动初始化所有带 data-* 属性的链接
SA.init('#auto-init-demo');
</script>
加载 SanoUI 组件中...

示例代码 ​

自动初始化 ​

html
<div id="example-auto-init">
  <div data-href="https://example.com" data-type="primary" data-underline="true">自动初始化链接</div>
</div>

<script>
SA.init('#example-auto-init');
</script>

手动创建实例 ​

javascript
const link = new SaLink('#my-link', {
  href: 'https://example.com',
  text: '访问示例网站',
  type: 'primary',
  underline: true,
  target: '_blank'
});

// 更新链接状态
link.setDisabled(true);

实际使用场景 ​

场景 1：导航链接 ​

在导航栏中使用链接组件。

html
<div style="display: flex; gap: 1rem; align-items: center; padding: 1rem; border-bottom: 1px solid #eee;">
  <div id="nav-home"></div>
  <div id="nav-about"></div>
  <div id="nav-contact"></div>
</div>

<script>
  new SaLink('#nav-home', {
    href: '/',
    text: '首页',
    type: 'primary',
    underline: false
  });
  
  new SaLink('#nav-about', {
    href: '/about',
    text: '关于我们',
    type: 'default',
    underline: false
  });
  
  new SaLink('#nav-contact', {
    href: '/contact',
    text: '联系我们',
    type: 'default',
    underline: false
  });
</script>
加载 SanoUI 组件中...

场景 2：操作链接 ​

在表格或列表中提供操作链接。

html
<div id="action-links" style="display: flex; gap: 1rem;"></div>

<script>
  const actions = [
    { text: '查看', href: '/view/1', type: 'primary' },
    { text: '编辑', href: '/edit/1', type: 'default' },
    { text: '删除', href: '/delete/1', type: 'danger' }
  ];
  
  const actionLinksContainer = Dom.query('#action-links');
  if (actionLinksContainer) {
    actions.forEach((action, index) => {
      const container = document.createElement('div');
      actionLinksContainer.appendChild(container);
      
      new SaLink(container, {
        href: action.href,
        text: action.text,
        type: action.type,
        underline: false
      });
    });
  }
</script>
加载 SanoUI 组件中...

注意事项 ​

  1. 自动初始化：链接组件会在 SA.init() 时自动初始化所有带有 data-href 或其他 data-* 属性的元素。通过 MutationObserver 自动监听 DOM 变化，动态添加的链接元素也会自动初始化
  2. 图标依赖：链接图标功能依赖 SaIcons 全局对象，确保已加载图标库
  3. 必需属性：使用自动初始化时，至少需要 data-href 或其他 data-* 属性之一
  4. 文本内容：链接文本可以从元素的 textContent 自动读取，也可以通过构造函数参数 text 指定
  5. 与按钮组件冲突：如果元素有 sa-button 类（即使同时有 data-href 等属性），SaLink 会自动跳过初始化，由 SaButton 处理该元素。建议不要在同一元素上同时使用两个组件
  6. 性能优化：
    • 动态添加大量链接时，建议先构建 DOM 结构，再一次性添加到页面，减少 MutationObserver 的触发次数
    • 对于需要频繁更新的链接，建议手动创建实例并使用 setHref()、setText() 等方法更新，而不是销毁重建

Released under the MIT License.

Copyright © 2025 SanoUI