SLink <s-link>

跳转到其他页面或 URL，或执行命令的文本链接。 SLink 是 Shopify Polaris <s-link> web component 的带类型 Vue 3 wrapper。

import { SLink } from 'polaris-vue-elements'

最佳实践

• 只在新标签页中打开外部链接。 对后台以外的 URL（例如帮助文档或合作伙伴网站）设置 target="_blank"。后台内部的链接应保持在同一标签页中，让商家不会在工作流程中迷失位置。

参阅 Shopify 关于 <s-link> 的最佳实践（英文）以获取完整指南。

示例

Neutral linkCritical link

<script setup>
import { SLink } from 'polaris-vue-elements'
</script>

<template>
  <SLink href="https://polaris.shopify.com" target="_blank">Neutral link</SLink>
  <SLink href="https://polaris.shopify.com" target="_blank" tone="critical">Critical link</SLink>
</template>

Props

Prop	类型	说明
accessibilityLabel	string	为屏幕阅读器等辅助技术描述组件用途或内容的标签。当仅凭可见内容无法清楚传达组件用途时，可用它提供额外的上下文。
command	"--auto" | "--show" | "--hide" | "--toggle" | "--copy"	设置此可点击元素被激活时 commandFor 应执行的操作。有关各组件支持的操作，请参阅相应组件的文档。 - --auto：目标组件的默认操作。 - --show：显示目标组件。 - --hide：隐藏目标组件。 - --toggle：切换目标组件。 - --copy：复制目标 ClipboardItem。
commandFor	string	应响应此组件上激活操作（例如点击）的组件 ID。有关如何控制目标的行为，请参阅 command。
download	string	使浏览器将链接的 URL 视为下载，并以该字符串作为文件名。下载仅适用于同源 URL 或 blob: 和 data: 协议。
href	string	要链接到的 URL。 - 如果设置，在执行 click 事件后会导航到 href 指定的位置。 - 如果设置了 commandFor，则会执行 command 而不是导航。
interestFor	string	应响应此组件上关注操作（例如悬停和聚焦）的组件 ID。
lang	string	文本内容的语言。当文本所用语言与页面其余部分不同时使用，以便屏幕阅读器等辅助技术采用正确的发音。该值应为 IANA 语言子标签注册表中的有效语言子标签。
target	"auto" | "_blank" | "_self" | "_parent" | "_top"	指定在何处显示链接的 URL。
tone	"auto" | "neutral" | "critical"	组件的语义含义和配色处理。 - critical：紧急问题或破坏性操作。 - auto：根据上下文自动确定。 - neutral：无特定意图的一般信息。

Events

Event	类型
click	MouseEvent

在 <SLink> 上使用 @click 形式的监听器来监听这些事件。

Slots

Slot	说明
default	链接组件中显示的文本或元素，激活时会将用户导航到其他位置。