按钮Vue组件

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

按钮组件

包含以下组件：

按钮属性

按钮组件几乎具有与链接组件相同的属性，但有一些额外的按钮特定属性：

属性类型默认描述
<f7-button>属性
type字符串如果它是submit, button或reset那么它将渲染为<button>元素，具有相同的type属性
tab-link字符串
布尔值		启用选项卡链接并指定目标选项卡的 CSS 选择器（如果指定为字符串）
tab-link-active布尔值false使此选项卡链接处于活动状态
active布尔值false在Segmented中使用时，使此按钮处于活动状态。必须代替tab-link-active
text字符串按钮文本标签
提示字符串按钮提示按钮悬停/按下时显示的文本
tooltip-trigger字符串悬停定义如何触发（打开）提示。可以是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主题使按钮填充颜色
语气布尔值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>与加载器相关的属性
加载器布尔值false使按钮具有加载器
加载中布尔值false控制按钮状态以显示/隐藏加载器并隐藏/显示按钮文本（将按钮切换到加载状态）
preloader-color字符串按钮的加载器颜色
preloader-size数字
字符串		按钮的加载器大小
<f7-button>图标相关属性
icon-size字符串
数字		图标大小（像素）
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"则不会添加hreftag
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-button>操作相关属性
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-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>
改进此文档
在本页上
无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗