链接 Vue 组件

链接是创建导航链接、自定义操作、切换选项卡、打开/关闭面板等的主要组件。

链接组件

包含以下组件：

f7-link

链接属性

属性	类型	默认	描述
<f7-link> 属性
no-link-class	布尔值		移除 "link" 类
tab-link	字符串布尔值		启用选项卡链接并指定目标选项卡的 CSS 选择器（如果指定为字符串）
tab-link-active	布尔值		使此选项卡链接处于活动状态
text	字符串		链接文本
badge	字符串数字		徽章计数
badge-color	字符串		徽章颜色。可以是默认颜色之一
icon-only	布尔值		在导航栏/工具栏中仅使用图标时启用
提示	字符串		链接提示链接悬停/点击时显示的文本
tooltip-trigger	字符串	悬停	定义如何触发（打开）提示。可以是`hover`, `click`或`manual`
<f7-link> 与智能选择相关的属性
smart-select	布尔值	false	启用智能选择行为
smart-select-params	对象		带有智能选择参数
<f7-link> 与图标相关的属性
icon-size	字符串数字		图标大小（像素）
icon-color	字符串		图标颜色。可以是默认颜色之一
icon	字符串		自定义图标类
icon-f7	字符串		F7 图标字体图标的名称
icon-material	字符串		Material 图标字体图标的名称
icon-ios	字符串		在使用 iOS 主题时使用的图标。由图标系列和图标名称组成，例如`f7:house`
icon-md	字符串		在使用 MD 主题时使用的图标。由图标系列和图标名称组成，例如`material:home`
icon-badge	字符串数字		为图标添加徽章（用于选项卡图标）
<f7-link> 与导航/路由相关的属性
href	字符串布尔值	#	要加载的页面的 URL。如果是布尔值`href="false"`则不会添加`href`tag
target	字符串		链接目标属性值，例如`_blank`, `_self`，等等。
view	字符串		要加载页面的视图的 CSS 选择器。或者`current`在当前视图中加载。
external	布尔值		启用以绕过 Framework7 的链接点击处理程序
back	布尔值		启用返回导航链接
open-in	字符串		允许将页面路由作为模态或面板打开。可以是`popup`, `loginScreen`, `sheet`, `popover`或`panel`
force	布尔值		强制页面加载并忽略历史记录中的先前页面（与`back`属性一起使用）
reload-current	布尔值		重新加载新页面而不是当前活动的页面
reload-previous	布尔值		用路由中的新页面替换历史记录中的先前页面
reload-all	布尔值		加载新页面并从历史记录和 DOM 中删除所有先前页面
reload-detail	布尔值		在主/详细信息视图中重新加载详细信息页面
animate	布尔值		禁用页面动画
transition	字符串		自定义页面过渡的名称custom page transition
ignore-cache	布尔值		忽略缓存
route-tab-id	字符串		可路由选项卡 ID
route-props	对象		将传递给目标路由组件的附加属性对象
prevent-router	布尔值	false	如果设置，则不会被 Framework7 路由器处理
<f7-link> 与操作相关的属性
panel-open	字符串布尔值		点击时打开的面板的 CSS 选择器。或者可以是`left`或`right`如果 DOM 中只有左侧或右侧面板。
panel-close	字符串布尔值		点击时关闭面板
panel-toggle	字符串布尔值		点击时切换的面板的 CSS 选择器。或者可以是`left`或`right`如果 DOM 中只有左侧或右侧面板。
actions-open	字符串布尔值		点击时打开的操作表的 CSS 选择器
actions-close	字符串布尔值		点击时关闭的操作表的 CSS 选择器。或者为关闭当前打开的操作表的布尔属性
popup-open	字符串布尔值		点击时打开的弹出的 CSS 选择器
popup-close	字符串布尔值		点击时关闭的弹出的 CSS 选择器。或者为关闭当前打开的弹出的布尔属性
popover-open	字符串布尔值		点击时打开的弹出窗口的 CSS 选择器
popover-close	字符串布尔值		点击时关闭的弹出窗口的 CSS 选择器。或者为关闭当前打开的弹出窗口的布尔属性
sheet-open	字符串布尔值		点击时打开的表单模态的 CSS 选择器
sheet-close	字符串布尔值		点击时关闭的表单模态的 CSS 选择器。或者为关闭当前打开的表单模态的布尔属性
login-screen-open	字符串布尔值		点击时打开的登录屏幕的 CSS 选择器
login-screen-close	字符串布尔值		点击时关闭的登录屏幕的 CSS 选择器。或者为关闭当前打开的登录屏幕的布尔属性
sortable-enable	字符串布尔值		点击时启用的可排序列表的 CSS 选择器
sortable-disable	字符串布尔值		点击时禁用的可排序列表的 CSS 选择器。或者为关闭当前打开的可排序列表的布尔属性
sortable-toggle	字符串布尔值		点击时切换的可排序列表的 CSS 选择器。或者为切换当前打开/关闭的可排序列表的布尔属性
searchbar-enable	字符串布尔值		点击时启用的可展开搜索栏的 CSS 选择器。或者为启用第一个找到的搜索栏的布尔属性
searchbar-disable	字符串布尔值		点击时禁用的可展开搜索栏的 CSS 选择器。或者为禁用第一个找到的搜索栏的布尔属性
searchbar-toggle	字符串布尔值		点击时切换的可展开搜索栏的 CSS 选择器。或者为切换第一个找到的搜索栏的布尔属性
searchbar-clear	字符串布尔值		点击时清除的可展开搜索栏的 CSS 选择器。或者为清除第一个找到的搜索栏的布尔属性
card-open	字符串布尔值		点击时打开的可展开卡片的 CSS 选择器。或者为打开第一个找到的可展开卡片的布尔值
card-close	字符串布尔值		点击时关闭的可展开卡片的 CSS 选择器。或者为关闭当前打开的可展开卡片的布尔属性
card-prevent-open	布尔值		具有此属性的元素点击不会打开其父可展开卡片

链接事件

事件	描述
<f7-link> 事件
click	点击链接后触发事件

示例

导航链接

<f7-link href="/about/">About</f7-link>

返回导航链接

<f7-link back>Back</f7-link>

带有路由参数

<f7-link href="/about/" :animate="false" :ignore-cache="true">About</f7-link>

外部链接

<f7-link href="http://google.com" external>Google</f7-link>

选项卡链接

<!-- Tabs -->
<f7-tabs>
  <f7-tab id="tab-1" tab-active>Tab 1</f7-tab>
  <f7-tab id="tab-2">Tab 2</f7-tab>
</f7-tabs>
<!-- Switch Between Tabs -->
<f7-link tab-link="#tab-1" tab-link-active>Show Tab 1</f7-link>
<f7-link tab-link="#tab-2">Show Tab 2</f7-link>

可路由选项卡

<!-- Tabs -->
<f7-tabs>
  <f7-tab id="tab-1"></f7-tab>
  <f7-tab id="tab-2"></f7-tab>
</f7-tabs>
<!-- Switch Between Tabs -->
<f7-link tab-link route-tab-id="tab-1" href="/tabs/">Show Tab 1</f7-link>
<f7-link tab-link route-tab-id="tab-2" href="/tabs/tab-2/">Show Tab 2</f7-link>

打开和关闭面板

<f7-link panel-open="left">Open Left Panel</f7-link>
<f7-link panel-close>Close Panel</f7-link>

打开和关闭弹出窗口

<f7-link popup-open="#my-popup">Open Popup</f7-link>
<f7-link popup-close="#my-popup">Close Popup</f7-link>

带有图标和颜色

<f7-link icon-f7="house" text="Home" color="red"></f7-link>

改进此文档

在本页上

链接组件
链接属性
链接事件
示例