链接 Vue 组件
链接是创建用于导航、自定义动作、切换选项卡、打开/关闭面板等链接的主要组件。
链接组件
包含以下组件
f7-link
链接属性
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| <f7-link>属性 | |||
| no-link-class | boolean | 移除 "link" 类 | |
| tab-link | string boolean | 启用选项卡链接并指定目标选项卡的 CSS 选择器（如果指定为字符串） | |
| tab-link-active | boolean | 使此选项卡链接处于活动状态 | |
| text | string | 链接文本 | |
| badge | string number | 徽章计数 | |
| badge-color | string | 徽章颜色。其中一个默认颜色 | |
| icon-only | boolean | 在导航栏／工具栏内部只使用图标时启用 | |
| 工具提示 | string | 链接工具提示文本，在链接悬停／按下时显示 | |
| 工具提示触发器 | string | 悬停 | 定义如何触发（打开）工具提示。可以是悬停、单击或手动 |
| <f7-link> Smart Select 相关属性 | |||
| smart-select | boolean | 否 | 启用 Smart Select 行为 |
| smart-select-params | 对象 | 包含 Smart Select 参数的对象 | |
| <f7-link> 图标相关属性 | |||
| 图标大小 | string number | 图标大小（px） | |
| 图标颜色 | string | 其中一个默认颜色 | |
| 图标 | string | 自定义图标类 | |
| 图标 f7 | string | F7 图标字体图标的名称 | |
| 图标 material | string | Material 图标字体图标的名称 | |
| 图标 ios | string | 适用于使用 iOS 主题的图标。由冒号分隔的图标系列和图标名称组成，例如f7:house | |
| 图标 md | string | 适用于使用 MD 主题的图标。由冒号分隔的图标系列和图标名称组成，例如material:home | |
| 图标徽章 | string number | 在图标中添加徽章（打算在选项卡栏的图标中使用） | |
| <f7-link> 导航／路由器相关属性 | |||
| href | string boolean | # | 待加载的页面的 URL。如果为布尔值href="false"，它不会添加href标签 |
| target | string | 链接目标属性的值，例如_blank、_self等。 | |
| view | string | 加载页面的视图的 CSS 选择器。或current以在当前视图中加载。 | |
| external | boolean | 启用以绕过 Framework7 的链接单击处理程序 | |
| back | boolean | 启用后退导航链接 | |
| open-in | string | 允许将页面路由作为模态或面板打开。可以是popup、loginScreen、sheet、popover或panel | |
| force | boolean | 强制加载页面，并忽略历史记录中的前一页（与back属性一起使用） | |
| reload-current | boolean | 重新加载新页面，而不是当前激活的页面 | |
| reload-previous | boolean | 使用路由中的新页面替换历史记录中的前一页 | |
| reload-all | boolean | 加载新页面，并从历史记录和 DOM 中删除所有前一页 | |
| reload-detail | boolean | 在主从视图中重新加载详情页面 | |
| animate | boolean | 禁用页面动画 | |
| transition | string | 自定义页面过渡的名称 | |
| ignore-cache | boolean | 忽略缓存 | |
| route-tab-id | string | 可路由选项卡 ID | |
| route-props | 对象 | 将被传递到目标路由组件的其他属性的对象 | |
| prevent-router | boolean | 否 | 如果设置，则它不会被 Framework7 路由器处理 |
| <f7-link> 操作相关属性 | |||
| panel-open | string boolean | 点击时要打开的面板的 CSS 选择器。如果 DOM 中只有左侧或右侧的面板，也可以是“左侧”或“右侧”。 | |
| panel-close | string boolean | 单击时关闭面板 | |
| panel-toggle | string boolean | 点击时要切换的面板的 CSS 选择器。如果 DOM 中只有左侧或右侧的面板，也可以是“左侧”或“右侧”。 | |
| actions-open | string boolean | 点击时打开的操作表的 CSS 选择器 | |
| actions-close | string boolean | 点击时要关闭的操作表的 CSS 选择器。或者布尔属性可用于关闭当前打开的操作表 | |
| popup-open | string boolean | 点击时要打开的弹出框的 CSS 选择器 | |
| popup-close | string boolean | 点击时要关闭的弹出框的 CSS 选择器。或者布尔属性可用于关闭当前打开的弹出框 | |
| popover-open | string boolean | 点击时要打开的弹出框的 CSS 选择器 | |
| popover-close | string boolean | 点击时要关闭的弹出框的 CSS 选择器。或者布尔属性可用于关闭当前打开的弹出框 | |
| sheet-open | string boolean | 点击时要打开的表单模态的 CSS 选择器 | |
| sheet-close | string boolean | 点击时要关闭的表单模态的 CSS 选择器。或者布尔属性可用于关闭当前打开的表单模态 | |
| login-screen-open | string boolean | 点击时要打开的登录屏幕的 CSS 选择器 | |
| login-screen-close | string boolean | 点击时要关闭的登录屏幕的 CSS 选择器。或者布尔属性可用于关闭当前打开的登录屏幕 | |
| sortable-enable | string boolean | 点击时要启用的可排序列表的 CSS 选择器 | |
| sortable-disable | string boolean | 点击时要禁用的可排序列表的 CSS 选择器。或者布尔属性可用于关闭当前打开的可排序列表 | |
| sortable-toggle | string boolean | 点击时要切换的可排序列表的 CSS 选择器。或者布尔属性可用于切换当前打开/关闭的可排序列表 | |
| searchbar-enable | string boolean | 点击时要启用的可扩展搜索栏的 CSS 选择器。或者布尔属性可用于启用第一个找到的搜索栏 | |
| searchbar-disable | string boolean | 点击时要禁用的可扩展搜索栏的 CSS 选择器。或者布尔属性可用于禁用第一个找到的搜索栏 | |
| searchbar-toggle | string boolean | 点击时要切换的可扩展搜索栏的 CSS 选择器。或者布尔属性可用于切换第一个找到的搜索栏 | |
| searchbar-clear | string boolean | 点击时要清除的可扩展搜索栏的 CSS 选择器。或者布尔属性可用于清除第一个找到的搜索栏 | |
| card-open | string boolean | 点击时要打开的可扩展卡片的 CSS 选择器。或者布尔属性可用于打开第一个找到的可扩展卡片 | |
| card-close | string boolean | 点击时要关闭的可扩展卡片的 CSS 选择器。或者布尔属性可用于关闭当前打开的可扩展卡片 | |
| card-prevent-open | boolean | 单击具有此属性的元素不会打开其父可扩展卡片 | |
链接事件
| 事件 | 描述 |
|---|---|
| <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>