@fiscozen/链接
弹性链接组件支持内部通路(vue-router)和外通通路. 自动制作内部路由的路由器-链接,外部 URL 的锚标记,或禁用时的非交互间距.
特征
- 内部路线: 使用vue-router进行有 RouteLocationRaw支持的SPA导航(字符串或对象)
- 外部导航: 支持带有锁定标签的外部 URL
- 残疾状态: 与已禁用型号的非交互跨度的渲染器
- 多种变式: 默认和危险类型
- 文本样式: 默认( 在悬浮上下行) 或总是下划线
- 大小选项: sm, md (英语)
- 类型脚本类型安全: 歧视工会类型执行正确的道具组合
- 完全无障碍: ARIA 支持和键盘导航
- 警卫: 自动rel="noopener noreferrer" 用于外部链接,目标=" blank"
安装
npm install @fiscozen/link
基本用途
内部路由( 线条路径)
<script setup lang="ts">
import { FzLink } from '@fiscozen/link'
</script>
<template>
<FzLink to="/dashboard" size="md">Go to Dashboard</FzLink>
</template>
内部路由( 有名称的对象)
<template>
<FzLink :to="{ name: 'user', params: { id: 123 }}">
User Profile
</FzLink>
</template>
内部路由( 有路径和查询对象)
<template>
<FzLink :to="{ path: '/search', query: { q: 'vue' }}">
Search Results
</FzLink>
</template>
外部链接
<template>
<FzLink to="https://example.com" external target="_blank">
External Site
</FzLink>
</template>
道具
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
to | RouteLocationRaw | string | - 说吧 | 目标路径或 URL 。 类型取决于 external 道具 : 内部 (外部=虚假或未定义): 接受vue-router RouteLocationRaw(字符串路径或对象有名称/路径,参数,查询等). 外部 必须是字符串 URL. |
type | 'default' | 'danger' | 'default' | 视觉变体表示链接目的. 影响颜色方案. |
linkStyle | 'default' | 'underline' | 'default' | 文字装饰风格. “ 默认” 显示在悬浮上下划线,“ 下行” 显示总是下划线 . |
size | 'sm' | 'md' | 'md' | 影响字体大小和行高的文本大小. |
disabled | boolean | false | 禁用链接, 渲染为与已禁用样式的非交互跨度 . |
target | string | - 说吧 | 锚标记的目标属性(例如" blank","自"). 可同时使用内部(router-link)和外部链接. |
external | boolean | false | 当真实时, 以href 而不是路由器- link 作为锚标记 。 用于外部 URL 或当不想要路由器导航时 . |
replace | boolean | false | 使用路由器. 取而代之 路由器. push 用于导航. 只适用于内部路线(当外部是虚假的). |
类型脚本类型安全
该部分使用受歧视的工会类型强制实施正确的道具组合:
-
内部链接 (单位:千美元)
external=false或者说undefined:to接受RouteLocationRaw(字符串路径或对象有名称/路径,参数,查询等)replace可用于target可用于(在新标签/窗口中打开内部路由)
-
外部链接 (单位:千美元)
external=true:to必须是字符串 URLtarget可用于replace无法使用( 不适用于外部链接)
TypeScript 如果尝试使用不兼容道具组合,则会显示出错.
实例
导航菜单
<template>
<nav>
<FzLink to="/dashboard" size="md">Dashboard</FzLink>
<FzLink to="/settings" size="md">Settings</FzLink>
<FzLink :to="{ name: 'profile', params: { id: userId }}" size="md">
Profile
</FzLink>
</nav>
</template>
与安全的外部联系
<template>
<FzLink to="https://example.com" external target="_blank">
Visit Example Site
</FzLink>
</template>
组件自动添加 rel="noopener noreferrer" 何时 target="_blank" 已使用.
残疾状态
<template>
<FzLink to="/premium" disabled>
Premium Feature (Requires Upgrade)
</FzLink>
</template>
危险链接
<template>
<FzLink to="/delete-account" type="danger" size="md">
Delete Account
</FzLink>
</template>
替换导航
<template>
<FzLink to="/redirect" replace>
Redirect Without History
</FzLink>
</template>
无障碍
FzLink完全无障碍,符合WCAG 2.1 AA标准:
- 键盘导航: 所有链接都可以访问键盘(Tab, Enter)
- 屏幕阅读器: 残疾状态的适当ARIA属性
- 重点指标: 有适当对比的可见焦点大纲
- 语义 HTML: 内部路线使用路由器-链接,外部定位
- 残疾状态: 有aria- disabled, 角色="link", 和 aria- label 的横幅
ARIA 属性
aria-disabled: 当链接被禁用( Vue 3 兼容性的字符串值) 时设定为“ true ”role: 设置为“ 链接” ,用于保留语义意义aria-label: 为已禁用的链接提供无障碍标签rel: 自动为目标=" blank"的外部链接添加"Noopener noreferrer"
警卫
外部链接 target="_blank" 自动包含 rel="noopener noreferrer" 改为:
- 防止安全弱点(窗口.开口)
- 改善隐私(没有发送裁判员信息)
相关构成部分
- 弗兹纳夫林克: 与活动状态支持的导航链接
- Fz 按钮: 用于行动的按钮组件
- Fz鲁特-纳夫林克: 路由器-意识导航链接