Action Sheet Vue组件

Action Sheet 是一个向上滑动的面板，用于向用户展示一组关于如何继续执行给定任务的选项。您也可以使用操作表来提示用户确认一个潜在的危险操作。操作表包含一个可选的标题和一个或多个按钮，每个按钮都对应一个要执行的操作。

Action Sheet组件表示Action Sheet组件。

Action Sheet 组件

包含以下组件：

Action Sheet 属性

属性类型默认描述
<f7-actions>属性
opened布尔值false允许打开/关闭 Action Sheet 并设置其初始状态
网格布尔值false启用网格按钮布局
convert-to-popover布尔值当启用时，操作表将在大屏幕上转换为 Popover。默认继承相同的应用参数值
force-to-popover布尔值当启用时，操作表将始终转换为 Popover。默认继承相同的应用参数值
targetHTMLElement
字符串		目标元素的 HTML 元素或字符串 CSS 选择器。在转换为 Popover 时需要
背景遮罩布尔值启用操作表背景（背后的深色半透明层）。默认继承相同的应用参数值true)
backdrop-el字符串
对象		自定义背景元素的HTML元素或字符串CSS选择器
backdrop-unique布尔值如果启用，它将为该模态创建唯一的背景元素
close-by-backdrop-click布尔值true当启用时，操作表将在背景点击时关闭。默认继承相同的应用参数值
close-by-outside-click布尔值false当启用时，操作表将在点击其外部时关闭。默认继承相同的应用参数值
close-on-escape布尔值当启用时，操作表将在按 ESC 键盘键时关闭
animate布尔值模态是否应该以动画方式打开/关闭
container-elHTMLElement
字符串		模态挂载到的元素（默认为应用根元素）
<f7-actions-label>属性
strong布尔值false定义标签文本是否加粗
<f7-actions-button>属性
strong布尔值false定义按钮文本是否加粗
close布尔值true按钮点击时是否关闭 Action Sheet

Action Sheet 事件

事件描述
<f7-actions>事件
actions:open当 Action Sheet 开始打开动画时将触发事件
actions:opened当 Action Sheet 完成打开动画后触发事件
actions:close当 Action Sheet 开始关闭动画时触发事件
actions:closed当 Action Sheet 完成关闭动画后触发事件

Action Sheet v-model

Action Sheet组件支持v-modelonopenedprop:

<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>

打开和关闭 Action Sheet

除了 Action Sheet open()/close() 方法外，您还可以通过以下方式打开和关闭它：

示例

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>
改进此文档
在本页上
无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗