列表按钮 Vue 组件

列表按钮 Vue 组件表示 Framework7 的列表按钮元素。它们旨在供列表 Vue 组件内部使用。

列表按钮组件

包含以下组件

f7-list-button

列表按钮属性

属性	类型	默认值	说明
title	字符串		按钮内部文本
text	字符串		按钮内部文本，与`title`相同
tab-link	字符串/布尔值		启用选项卡链接并指定目标选项卡的 CSS 选择器（如果指定为字符串）
tab-link-active	布尔值		激活此选项卡链接
target	字符串		链接目标属性
tooltip	字符串		列出按钮工具提示悬停/按下按钮时显示的文本
tooltip-trigger	字符串	悬停	定义如何触发（打开）工具提示。可以是 `hover`、`click` 或 `manual`
<f7-list-button> 导航/路由相关属性
href	字符串布尔值	#	要加载的页面的 URL。对于布尔值 `href="false"`，它不会添加 `href` 标签
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	字符串		自定义页面转换的名称
ignore-cache	布尔值		忽略缓存
route-tab-id	字符串		可路由的标签 ID
route-props	对象		包含要传递给目标路由组件的其他属性的对象
prevent-router	布尔值	false	如果设置，则不会由 Framework7 路由处理
<f7-list-button> 操作相关属性
panel-open	字符串布尔值		点击时要打开的面板的 CSS 选择器。如果 DOM 中只有左侧或右侧面板，也可以是 `left` 或 `right`。
panel-close	字符串布尔值		点击时关闭面板
panel-toggle	字符串布尔值		点击时要切换的面板的 CSS 选择器。如果 DOM 中只有左侧或右侧面板，也可以是 `left` 或 `right`。
actions-open	字符串布尔值		点击时要打开的操作表的 CSS 选择器
actions-close	字符串布尔值		点击时要关闭的操作表的 CSS 选择器。或布尔属性以关闭当前打开的操作表
popup-open	字符串布尔值		点击时要打开的弹出窗口的 CSS 选择器
popup-close	字符串布尔值		点击时要关闭的弹出窗口的 CSS 选择器。或布尔属性以关闭当前打开的弹出窗口
popover-open	字符串布尔值		点击时要打开的弹出层的 CSS 选择器
popover-close	字符串布尔值		点击时要关闭的弹出层的 CSS 选择器。或布尔属性以关闭当前打开的弹出层
sheet-open	字符串布尔值		点击时要打开的 Sheet 模态的 CSS 选择器
sheet-close	字符串布尔值		点击时要关闭的 Sheet 模态的 CSS 选择器。或布尔属性以关闭当前打开的 Sheet 模态
login-screen-open	字符串布尔值		单击时要打开的登录界面 CSS 选择器
login-screen-close	字符串布尔值		单击时要关闭的登录界面 CSS 选择器。或者用于关闭当前打开的登录界面布尔属性
sortable-enable	字符串布尔值		单击时要启用的 Sortable 列表 CSS 选择器
sortable-disable	字符串布尔值		单击时要禁用的 Sortable 列表 CSS 选择器。或者用于关闭当前打开的 Sortable 列表布尔属性
sortable-toggle	字符串布尔值		单击时要切换的 Sortable 列表 CSS 选择器。或者用于切换当前打开/关闭的 Sortable 列表布尔属性
searchbar-enable	字符串布尔值		单击时要启用的可扩展搜索框 CSS 选择器。或者用于启用第一个找到的搜索框布尔属性
searchbar-disable	字符串布尔值		单击时要禁用的可扩展搜索框 CSS 选择器。或者用于禁用第一个找到的搜索框布尔属性
searchbar-toggle	字符串布尔值		单击时要切换的可扩展搜索框 CSS 选择器。或者用于切换第一个找到的搜索框布尔属性
searchbar-clear	字符串布尔值		单击时要清除的可扩展搜索框 CSS 选择器。或者用于清除第一个找到的搜索框布尔属性
card-open	字符串布尔值		单击时要打开的可扩展卡片 CSS 选择器。或者在单击时打开第一个找到的可扩展卡片布尔属性
card-close	字符串布尔值		单击时要闭合的可扩展卡片 CSS 选择器。或者用于关闭目前打开的可扩展卡片布尔属性
card-prevent-open	布尔值		单击具有此属性的元素不会打开其父可扩展卡片

列表按钮事件

事件	说明
<f7-list-button> 事件
click	单击按钮后将触发事件

示例

list-button.vue

<template>
  <f7-page>
    <f7-navbar title="List Button"></f7-navbar>

    <f7-list inset strong>
      <f7-list-button title="List Button 1"></f7-list-button>
      <f7-list-button title="List Button 2"></f7-list-button>
      <f7-list-button title="List Button 3"></f7-list-button>
    </f7-list>
    <f7-list inset strong>
      <f7-list-button title="Large Red Button" color="red"></f7-list-button>
    </f7-list>
  </f7-page>
</template>
<script>
import { f7Navbar, f7Page, f7List, f7ListButton } from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7List,
    f7ListButton,
  },
  setup() {},
};
</script>

完善此文档

在此页面上

列表按钮组件
列表按钮属性
列表按钮事件
示例