Action Sheet Vue 组件

Action Sheet 是一个向上滑动面板，向用户展示一系列如何处理既定任务的备选方案。您还可以使用该 Actions Sheet 来提示用户确认某项潜在的危险操作。该 Action Sheet 含有可选的标题以及一个或多个按钮，每一个按钮都对应一个将要执行的操作。

Action Sheet Vue 组件表示 Action Sheet 组件。

Action Sheet 组件

包括以下组件

f7-actions - Action Sheet 元素
f7-actions-group - Action Sheet 按钮组
f7-actions-button - Action Sheet 按钮
f7-actions-label - Action Sheet 标签

Action Sheet 属性

属性	类型	默认值	描述
<f7-actions> 属性
opened	布尔值	false	允许打开/关闭操作表并设置其初始状态
grid	布尔值	false	启用网格按钮布局
convert-to-popover	布尔值		启用时，操作表在较大的屏幕上将转换为弹出框。默认继承相同的应用参数值
force-to-popover	布尔值		启用时，操作表将始终转换为弹出框。默认继承相同的应用参数值
target	HTMLElement 字符串		目标元素的 HTML 元素或字符串 CSS 选择器。当使用转换为弹出框时，此项是必需的
backdrop	布尔值		启用操作表的背景（半透明的深色图层）。默认继承相同的应用参数值（`true`）
backdrop-el	字符串 object		定制背景元素的 HTML 元素或字符串 CSS 选择器
backdrop-unique	布尔值		启用后，它将专门为此模态创建唯一的背景元素
close-by-backdrop-click	布尔值	true	启用时，单击背景将关闭操作表。默认继承相同的应用参数值
close-by-outside-click	布尔值	false	启用时，单击操作表之外将关闭操作表。默认继承相同的应用参数值
close-on-escape	布尔值		启用后，按下 ESC 键盘键时将关闭操作表
animate	布尔值		模态是否应使用动画打开/关闭
container-el	HTMLElement 字符串		用于加载模态的元素（默认为应用根元素）
<f7-actions-label> 属性
strong	布尔值	false	定义标签文本是否加粗
<f7-actions-button> 属性
strong	布尔值	false	定义按钮文本是否加粗
close	布尔值	true	单击按钮后是否应关闭操作表

操作表事件

事件	描述
<f7-actions> 事件
actions:open	当操作表开始其打开动画时，会触发此事件
actions:opened	当操作表完成其打开动画时，会触发此事件
actions:close	当操作表开始其关闭动画时，会触发此事件
actions:closed	当操作表完成其关闭动画时，会触发此事件

操作表 v-model

操作表组件支持 opened 属性上的 v-model

<template>
  <f7-page>
    <f7-actions v-model:opened="isOpened">
      ...
    </f7-actions>
    <p>Modal is opened: {{ isOpened }}</p>
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        isOpened: false,
      };
    }
  };
</script>

打开和关闭操作表

除了操作表的 open()/close() 方法外，你还可以通过

使用操作表 API 来打开和关闭它
通过向其 opened 属性传递 true 或 false

示例

action-sheet.vue

<template>
  <f7-page @page:beforeremove="onPageBeforeRemove">
    <f7-navbar title="Action Sheet"></f7-navbar>
    <f7-block strong inset>
      <p class="grid grid-cols-2 grid-gap">
        <!-- One group, open by direct accessing instance .open() method -->
        <f7-button fill actions-open="#actions-one-group">One group</f7-button>
        <!-- Two groups, open by "actions-open" attribute -->
        <f7-button fill actions-open="#actions-two-groups">Two groups</f7-button>
      </p>
      <p>
        <!-- Actions Grid, open by changing actionGridOpened prop -->
        <f7-button fill @click="actionGridOpened = true">Action Grid</f7-button>
      </p>
    </f7-block>

    <f7-block-title>Action Sheet To Popover</f7-block-title>
    <f7-block strong inset>
      <p>
        Action Sheet can be automatically converted to Popover (for tablets). This button will open
        Popover on tablets and Action Sheet on phones:
        <f7-button
          style="display: inline-block"
          class="button-to-popover"
          @click="openActionsPopover"
          >Actions</f7-button
        >
      </p>
    </f7-block>

    <!-- One Group -->
    <f7-actions id="actions-one-group">
      <f7-actions-group>
        <f7-actions-label>Do something</f7-actions-label>
        <f7-actions-button strong>Button 1</f7-actions-button>
        <f7-actions-button>Button 2</f7-actions-button>
        <f7-actions-button color="red">Cancel</f7-actions-button>
      </f7-actions-group>
    </f7-actions>

    <!-- Two Groups -->
    <f7-actions id="actions-two-groups">
      <f7-actions-group>
        <f7-actions-label>Do something</f7-actions-label>
        <f7-actions-button strong>Button 1</f7-actions-button>
        <f7-actions-button>Button 2</f7-actions-button>
      </f7-actions-group>
      <f7-actions-group>
        <f7-actions-button color="red">Cancel</f7-actions-button>
      </f7-actions-group>
    </f7-actions>

    <!-- Grid -->
    <f7-actions v-model:opened="actionGridOpened" :grid="true">
      <f7-actions-group>
        <f7-actions-button>
          <template #media>
            <img
              src="https://cdn.framework7.io/placeholder/people-96x96-1.jpg"
              width="48"
              style="max-width: 100%; border-radius: 8px"
            />
          </template>
          <span>Button 1</span>
        </f7-actions-button>
        <f7-actions-button>
          <template #media>
            <img
              src="https://cdn.framework7.io/placeholder/people-96x96-2.jpg"
              width="48"
              style="max-width: 100%; border-radius: 8px"
            />
          </template>
          <span>Button 2</span>
        </f7-actions-button>
        <f7-actions-button>
          <template #media>
            <img
              src="https://cdn.framework7.io/placeholder/people-96x96-3.jpg"
              width="48"
              style="max-width: 100%; border-radius: 8px"
            />
          </template>
          <span>Button 3</span>
        </f7-actions-button>
      </f7-actions-group>
      <f7-actions-group>
        <f7-actions-button>
          <template #media>
            <img
              src="https://cdn.framework7.io/placeholder/fashion-96x96-4.jpg"
              width="48"
              style="max-width: 100%; border-radius: 8px"
            />
          </template>
          <span>Button 4</span>
        </f7-actions-button>
        <f7-actions-button>
          <template #media>
            <img
              src="https://cdn.framework7.io/placeholder/fashion-96x96-5.jpg"
              width="48"
              style="max-width: 100%; border-radius: 8px"
            />
          </template>
          <span>Button 5</span>
        </f7-actions-button>
        <f7-actions-button>
          <template #media>
            <img
              src="https://cdn.framework7.io/placeholder/fashion-96x96-6.jpg"
              width="48"
              style="max-width: 100%; border-radius: 8px"
            />
          </template>
          <span>Button 6</span>
        </f7-actions-button>
      </f7-actions-group>
    </f7-actions>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7BlockTitle,
  f7Block,
  f7Button,
  f7Actions,
  f7ActionsGroup,
  f7ActionsLabel,
  f7ActionsButton,
  f7,
} from 'framework7-vue';

export default {
  components: {
    f7Page,
    f7Navbar,
    f7BlockTitle,
    f7Block,
    f7Button,
    f7Actions,
    f7ActionsGroup,
    f7ActionsLabel,
    f7ActionsButton,
  },
  props: {
    id: String,
  },
  data() {
    return {
      actionGridOpened: false,
    };
  },
  methods: {
    openActionsPopover() {
      const self = this;
      if (!self.actionsToPopover) {
        self.actionsToPopover = f7.actions.create({
          buttons: [
            {
              text: 'Do something',
              label: true,
            },
            {
              text: 'Button 1',
              strong: true,
            },
            {
              text: 'Button 2',
            },
            {
              text: 'Cancel',
              color: 'red',
            },
          ],
          // Need to specify popover target
          targetEl: self.$el.querySelector('.button-to-popover'),
        });
      }

      // Open
      self.actionsToPopover.open();
    },
    onPageBeforeRemove() {
      const self = this;
      if (self.actionsToPopover) {
        self.actionsToPopover.destroy();
      }
    },
  },
};
</script>

改进此文档

在此页面上

Action Sheet 组件
Action Sheet 属性
操作表事件
操作表 v-model
打开和关闭操作表
示例