赞助商成为赞助商

按钮 Vue 组件

Button Vue 组件代表 Framework7 的 按钮 元素。

按钮组件

包括以下组件

按钮属性

按钮组件的属性与 链接 组件几乎相同，但增加了几个特定于按钮的属性

支撑物类型默认值描述
<f7-button> 属性
类型字符串如果是 submit、button 或 reset 之一，则将被渲染为 <button> 元素，具有相同的 type 属性
选项卡链接字符串
布尔值		启用选项卡链接，并指定目标选项卡的 CSS 选择器（如果指定为字符串）
tab-link-active布尔值false使该选项卡链接变为活动状态
active布尔值false使用分段控件时使该按钮变为活动状态。必须用来代替 tab-link-active
text字符串按钮文本标签
tooltip字符串按钮在悬停/按压时显示的按钮 工具提示 文本
tooltip-trigger字符串hover定义如何触发（打开）工具提示。可以是 hover、click 或 manual
round布尔值false使按钮变为圆形
round-ios布尔值false仅为 iOS 主题使按钮变为圆形
round-md布尔值false仅为 MD 主题使按钮变为圆形
large布尔值false使按钮变大
large-ios布尔值false仅为 iOS 主题使按钮变大
large-md布尔值false仅为 MD 主题使按钮变大
small布尔值false使按钮变小
small-ios布尔值false仅为 iOS 主题使按钮变小
small-md布尔值false仅为 MD 主题使按钮变小
fill布尔值false使按钮充满颜色
fill-ios布尔值false仅为 iOS 主题使按钮充满颜色
fill-md布尔值false仅为 MD 主题使按钮充满颜色
tonal布尔值false使按钮采用色调样式
tonal-ios布尔值false仅为 iOS 主题使按钮采用色调样式
tonal-md布尔值false仅为 MD 主题使按钮采用色调样式
raised布尔值false使按钮凸起
raised-ios布尔值false仅在 iOS 主题下使按钮凸起
raised-md布尔值false仅在 MD 主题下使按钮凸起
outline布尔值false使按钮变为轮廓
outline-ios布尔值false仅在 iOS 主题下使按钮变为轮廓
outline-md布尔值false仅在 MD 主题下使按钮变为轮廓
<Button> 与预加载器相关的属性
preloader布尔值false启用按钮拥有预加载器
loading布尔值false控制按钮状态以显示/隐藏预加载器和隐藏/显示按钮文本（将按钮切换到加载状态）
preloader-color字符串按钮的预加载器颜色
preloader-sizenumber
字符串		按钮的预加载器大小
<f7-button> 与图标相关的属性
icon-size字符串
number		图标大小，单位为像素
icon-color字符串图标颜色。默认颜色 之一
icon字符串自定义图标类
icon-f7字符串F7 图标字体图标名称
icon-material字符串Material 图标字体图标名称
icon-ios字符串如果使用 iOS 主题，则要使用的图标。由图标族和图标名称组成，用冒号分隔，例如 f7:house
icon-md字符串如果使用 MD 主题，则要使用的图标。由图标族和图标名称组成，用冒号分隔，例如 material:home
<f7-button> 导航/路由相关的属性
href字符串
布尔值		#要加载的页面的 URL。如果为布尔值 href="false"，则不会添加 href 标签
target字符串链接目标属性的值，例如_blank、_self等。
视图字符串用于加载页面的 View 的 CSS 选择器。或current，以在当前视图中加载。
外部布尔值启用以绕过 Framework7 的链接点击处理程序
返回布尔值启用返回导航链接
以内部方式打开字符串允许打开页面路线作为模态或面板。可以是popup、loginScreen、panel
强制布尔值强制页面加载并忽略历史记录中的上一个页面（与back道具一起使用）
重新加载当前页面布尔值重新加载新页面，而不是当前活动页面
重新加载上一个页面布尔值使用路由中的新页面替换历史记录中的上一个页面
重新加载所有页面布尔值加载新页面，并从历史记录和 DOM 中删除所有旧页面
重新加载详细页面布尔值在主从视图中重新加载详细页面
动画布尔值禁用页面动画
过渡字符串自定义页面过渡的名称
忽略缓存布尔值忽略缓存
路由选项卡 ID字符串可路由选项卡 ID
路由道具对象带有附加道具的对象，这些道具将传递给目标路由组件
防止路由布尔值false如果设置，则不会由 Framework7 路由器处理
<f7-button> 动作相关属性
打开面板字符串
布尔值		单击时打开的面板的 CSS 选择器。或可以是left或right，如果 DOM 中只有左侧或右侧面板。
关闭面板字符串
布尔值		单击时关闭面板
切换面板字符串
布尔值		单击时切换的面板的 CSS 选择器。或可以是left或right，如果 DOM 中只有左侧或右侧面板。
打开动作字符串
布尔值		单击时打开的操作表的 CSS 选择器
关闭操作字符串
布尔值		单击时关闭的操作表的 CSS 选择器。或用于关闭当前已打开操作表的布尔属性
打开弹出字符串
布尔值		单击时打开的弹出窗口的 CSS 选择器
关闭弹出字符串
布尔值		单击时关闭的弹出窗口的 CSS 选择器。或用于关闭当前已打开弹出窗口的布尔属性
打开弹出层字符串
布尔值		单击时打开的弹出层的 CSS 选择器
关闭弹出层字符串
布尔值		单击时关闭的弹出层的 CSS 选择器。或用于关闭当前已打开弹出层的布尔属性
打开表格字符串
布尔值		单击时打开表格模态的 CSS 选择器
关闭表格字符串
布尔值		单击时关闭表格模态的 CSS 选择器。或用于关闭当前已打开表格模态的布尔属性
打开登录屏幕字符串
布尔值		单击时打开的登录屏幕的 CSS 选择器
关闭登录屏幕字符串
布尔值		单击时关闭的登录屏幕的 CSS 选择器。或用于关闭当前已打开登录屏幕的布尔属性
启用可排序字符串
布尔值		单击时要启用的可排序列表的 CSS 选择器
禁用可排序字符串
布尔值		可通过点击禁用可排序的列表的 CSS 选择器，或布尔属性可关闭当前打开的可排序列表
sortable-toggle字符串
布尔值		可通过点击选择器来切换可排序的列表，或通过布尔属性来切换当前打开/关闭的可排序列表
searchbar-enable字符串
布尔值		可通过点击启用可扩展搜索栏，或通过布尔属性启用第一个可用的搜索栏
searchbar-disable字符串
布尔值		可通过点击禁用可扩展搜索栏，或通过布尔属性禁用第一个可用的搜索栏
searchbar-toggle字符串
布尔值		可通过点击切换可扩展搜索栏，或通过布尔属性切换第一个可用的搜索栏
searchbar-clear字符串
布尔值		可通过点击清除可扩展搜索栏，或通过布尔属性清除第一个可用的搜索栏
card-open字符串
布尔值		可通过点击打开可扩展卡片，或布尔值打开第一个可用的可扩展卡片
card-close字符串
布尔值		可通过点击关闭可扩展卡片，或布尔属性关闭当前打开的可扩展卡片
card-prevent-open布尔值点击具备此属性的元素不会打开其父可扩展卡片

按钮事件

事件描述
<f7-button> 事件
click事件将在点击按钮后触发

范例

buttons.vue
<template>
  <f7-page>
    <f7-navbar title="Buttons"></f7-navbar>

    <f7-block-title>Usual Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <div class="grid grid-cols-3 grid-gap">
        <f7-button>Button</f7-button>
        <f7-button>Button</f7-button>
        <f7-button round>Round</f7-button>
      </div>
    </f7-block>

    <f7-block-title>Tonal Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <div class="grid grid-cols-3 grid-gap">
        <f7-button tonal>Button</f7-button>
        <f7-button tonal>Button</f7-button>
        <f7-button tonal round>Round</f7-button>
      </div>
    </f7-block>

    <f7-block-title>Fill Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <div class="grid grid-cols-3 grid-gap">
        <f7-button fill>Button</f7-button>
        <f7-button fill>Button</f7-button>
        <f7-button fill round>Round</f7-button>
      </div>
    </f7-block>

    <f7-block-title>Outline Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <div class="grid grid-cols-3 grid-gap">
        <f7-button outline>Button</f7-button>
        <f7-button outline>Button</f7-button>
        <f7-button outline round>Round</f7-button>
      </div>
    </f7-block>

    <f7-block-title>Raised Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <p class="grid grid-cols-3 grid-gap">
        <f7-button raised>Button</f7-button>
        <f7-button raised fill>Fill</f7-button>
        <f7-button raised outline>Outline</f7-button>
      </p>
      <p class="grid grid-cols-3 grid-gap">
        <f7-button raised round>Round</f7-button>
        <f7-button raised fill round>Fill</f7-button>
        <f7-button raised outline round>Outline</f7-button>
      </p>
    </f7-block>

    <f7-block-title>Large Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <p class="grid grid-cols-2 grid-gap">
        <f7-button large>Button</f7-button>
        <f7-button large fill>Fill</f7-button>
      </p>
      <p class="grid grid-cols-2 grid-gap">
        <f7-button large raised>Raised</f7-button>
        <f7-button large raised fill>Raised Fill</f7-button>
      </p>
    </f7-block>

    <f7-block-title>Small Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <p class="grid grid-cols-3 grid-gap">
        <f7-button small>Button</f7-button>
        <f7-button small outline>Outline</f7-button>
        <f7-button small fill>Fill</f7-button>
      </p>
      <p class="grid grid-cols-3 grid-gap">
        <f7-button small round>Button</f7-button>
        <f7-button small outline round>Outline</f7-button>
        <f7-button small fill round>Fill</f7-button>
      </p>
    </f7-block>

    <f7-block-title>Preloader Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <p class="grid grid-cols-2 grid-gap">
        <f7-button preloader :loading="isLoading1" large @click="load1"> Load </f7-button>
        <f7-button preloader :loading="isLoading2" large fill @click="load2"> Load </f7-button>
      </p>
    </f7-block>

    <f7-block-title>Color Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <div class="grid grid-cols-3 grid-gap">
        <f7-button color="red">Red</f7-button>
        <f7-button color="green">Green</f7-button>
        <f7-button color="blue">Blue</f7-button>
      </div>
    </f7-block>

    <f7-block-title>Color Fill Buttons</f7-block-title>
    <f7-block strong outline-ios>
      <p class="grid grid-cols-3 grid-gap">
        <f7-button color="red">Red</f7-button>
        <f7-button color="green">Green</f7-button>
        <f7-button color="blue">Blue</f7-button>
      </p>
      <p class="grid grid-cols-3 grid-gap">
        <f7-button color="pink">Pink</f7-button>
        <f7-button color="yellow">Yellow</f7-button>
        <f7-button color="orange">Orange</f7-button>
      </p>
      <p class="grid grid-cols-3 grid-gap">
        <f7-button color="black">Black</f7-button>
        <f7-button color="white">White</f7-button>
      </p>
    </f7-block>
  </f7-page>
</template>
<script>
import { ref } from 'vue';
import { f7Navbar, f7Page, f7BlockTitle, f7Block, f7Button } from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7BlockTitle,
    f7Block,
    f7Button,
  },
  setup() {
    const isLoading1 = ref(false);
    const isLoading2 = ref(false);

    const load1 = () => {
      if (isLoading1.value) return;
      isLoading1.value = true;
      setTimeout(() => {
        isLoading1.value = false;
      }, 4000);
    };

    const load2 = () => {
      if (isLoading2.value) return;
      isLoading2.value = true;
      setTimeout(() => {
        isLoading2.value = false;
      }, 4000);
    };

    return {
      isLoading1,
      isLoading2,
      load1,
      load2,
    };
  },
};
</script>
改进此文档
在此页面上