相册浏览器 Vue 组件

相册浏览器是一个用于显示照片/图像集合的相册组件。照片可以缩放和平移（可选）。

相册浏览器 Vue 组件代表 Framework7 的照片浏览器组件。

相册浏览器 Vue 组件不会渲染任何输出。它可用于创建 JS 相册浏览器实例并在您的 Vue 组件中控制它。

相册浏览器组件

包含以下组件：

相册浏览器属性

您可以在单个属性中传递所有参数params属性或使用单独的 prop 为每个参数指定它们通过组件属性：

属性类型默认描述
<f7-photo-browser> 属性
init布尔值true初始化相册浏览器
参数对象带有相册浏览器参数
photos数组[]包含照片 URL 的数组或包含 "url"（或 "html"）和 "caption" 属性的对象数组。
thumbs数组[]包含缩略图图像 URL 的数组。如果未指定，或为空数组，则不会渲染缩略图
url字符串photos/相册浏览器模态 URL 将被设置为当前路由
routable-modals布尔值false将打开的相册浏览器添加到路由历史记录中，这提供了通过在路由历史记录中后退来关闭相册浏览器的功能，并将当前路由设置为相册浏览器模态
swiper对象具有 Swiper 参数的对象。默认等于：
swiper: {
  initialSlide: 0,
  spaceBetween: 20,
  speed: 300,
  loop: false,
  preloadImages: true,
  keyboard: {
    enabled: true,
  },
  navigation: {
    nextEl: '.photo-browser-next',
    prevEl: '.photo-browser-prev',
  },
  zoom: {
    enabled: true,
    maxRatio: 3,
    minRatio: 1,
  },
  lazy: {
    enabled: true,
  },
},
virtual-slides布尔值true当启用时，Swiper 将使用虚拟幻灯片
close-by-backdrop-click布尔值true当启用时，相册浏览器弹出窗口将在点击背景时关闭
exposition布尔值true在点击相册浏览器时启用/禁用展览模式。
exposition-hide-captions布尔值false如果您还想在展览模式下隐藏标题，请将其设置为 true
swipe-to-close布尔值true当启用此参数时，您可以用向上/向下滑动关闭相册浏览器
type字符串standalone定义相册浏览器应如何打开。可以是standalone（将作为具有自定义过渡效果的覆盖层打开），popup（将作为弹出窗口打开），page（将注入到 View 并作为新页面加载）。
主题字符串light相册浏览器颜色主题，可以是light或dark
captions-theme字符串标题颜色主题，也可以是dark或light。默认等于 "theme" 参数
navbar布尔值true设置为 false 以移除相册浏览器的 Navbar
toolbar布尔值true设置为 false 以移除相册浏览器的 Toolbar
page-back-link-text字符串Back相册浏览器 Navbar 中的后退链接文本
popup-close-link-text字符串Close在弹出窗口或作为 Standalone 打开时，相册浏览器 Navbar 中的关闭链接文本
navbar-show-count布尔值undefined定义是否应在 Navbar 标题中显示 "3 of 5" 文本。如果未指定（undefined），则如果有超过 1 个项目，它将显示此文本
navbar-of-text字符串of照片计数中的 "of" 文本："3 of 5"
icons-color字符串之一默认颜色之一

相册浏览器事件

事件描述
<f7-photo-browser> 事件
photobrowser:open当相册浏览器打开时，将触发此事件。
photobrowser:opened相册浏览器完成打开动画后，将触发此事件
photobrowser:close当相册浏览器关闭时，将触发此事件。
photobrowser:closed相册浏览器完成关闭动画后，将触发此事件
photobrowser:swipetoclose当用户用向上/向下滑动关闭相册浏览器时，将触发此事件。

相册浏览器方法

以下相册浏览器组件方法可用（例如，通过$refs）访问：

<f7-photo-browser> 方法
.open(index)在具有等于 "index" 参数索引号的相册浏览器上打开。如果未指定 "index" 参数，它将在最后一个关闭的相册上打开。
.close()关闭相册浏览器
.expositionToggle()切换展览模式
.expositionEnable()启用展览模式
.expositionDisable()禁用展览模式

示例

photo-browser.vue
<template>
  <f7-page>
    <f7-navbar title="Photo Browser"></f7-navbar>
    <f7-block strong-ios outline-ios>
      <p>
        Photo Browser is a standalone and highly configurable component that allows to open window
        with photo viewer and navigation elements with the following features:
      </p>
      <ul>
        <li>Swiper between photos</li>
        <li>Multi-gestures support for zooming</li>
        <li>Toggle zoom by double tap on photo</li>
        <li>Single click on photo to toggle Exposition mode</li>
      </ul>
    </f7-block>
    <f7-block strong-ios outline-ios>
      <p>
        Photo Browser could be opened in a three ways - as a Standalone component (Popup
        modification), in Popup, and as separate Page:
      </p>
      <div class="grid grid-cols-3 grid-gap">
        <div>
          <f7-photo-browser ref="standalone" :photos="photos" :thumbs="thumbs" />
          <f7-button fill @click="$refs.standalone.open()">Standalone</f7-button>
        </div>
        <div>
          <f7-photo-browser ref="popup" :photos="photos" :thumbs="thumbs" type="popup" />
          <f7-button fill @click="$refs.popup.open()">Popup</f7-button>
        </div>
        <div>
          <f7-photo-browser
            ref="page"
            :photos="photos"
            :thumbs="thumbs"
            type="page"
            page-back-link-text="Back"
          />
          <f7-button fill @click="$refs.page.open()">Page</f7-button>
        </div>
      </div>
    </f7-block>
    <f7-block strong-ios outline-ios>
      <p>
        Photo Browser supports 2 default themes - default Light (like in previous examples) and Dark
        theme. Here is a Dark theme examples:
      </p>
      <div class="grid grid-cols-3 grid-gap">
        <div>
          <f7-photo-browser ref="standaloneDark" :photos="photos" :thumbs="thumbs" theme="dark" />
          <f7-button fill @click="$refs.standaloneDark.open()">Standalone</f7-button>
        </div>
        <div>
          <f7-photo-browser
            ref="popupDark"
            :photos="photos"
            :thumbs="thumbs"
            theme="dark"
            type="popup"
          />
          <f7-button fill @click="$refs.popupDark.open()">Popup</f7-button>
        </div>
        <div>
          <f7-photo-browser
            ref="pageDark"
            :photos="photos"
            :thumbs="thumbs"
            theme="dark"
            type="page"
            page-back-link-text="Back"
          />
          <f7-button fill @click="$refs.pageDark.open()">Page</f7-button>
        </div>
      </div>
    </f7-block>
  </f7-page>
</template>
<script>
import { f7Navbar, f7Page, f7PhotoBrowser, f7Block, f7Button } from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7PhotoBrowser,
    f7Block,
    f7Button,
  },
  data() {
    return {
      photos: [
        {
          url: 'img/beach.jpg',
          caption: 'Amazing beach in Goa, India',
        },
        'http://placekitten.com/1024/1024',
        'img/lock.jpg',
        {
          url: 'img/monkey.jpg',
          caption: 'I met this monkey in Chinese mountains',
        },
        {
          url: 'img/mountains.jpg',
          caption: 'Beautiful mountains in Zhangjiajie, China',
        },
      ],
      thumbs: [
        'img/beach.jpg',
        'http://placekitten.com/1024/1024',
        'img/lock.jpg',
        'img/monkey.jpg',
        'img/mountains.jpg',
      ],
    };
  },
};
</script>
改进此文档
在本页上
无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗