举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > vant 预览 Vant4 ImagePreview 预览

vant 预览 Vant4 ImagePreview 预览

2023-06-21 08:18 Vant4

vant 预览 Vant4 ImagePreview 预览

vant 预览

Vant 是一款基于 Vue.js 的移动端组件库,它提供了丰富的组件,可以帮助开发者快速构建移动端应用。Vant 预览是一个在线的预览工具,可以帮助开发者快速预览 Vant 的各个组件,并且可以根据不同的需求进行定制。

Vant 预览的使用方法很简单,开发者只需要在 Vant 官网上找到想要使用的组件,然后在该组件的页面上找到“预览”按钮,即可进入 Vant 预览界面。在 Vant 预览界面中,开发者可以看到该组件的展示效果、API 文档、代码片段、实例代码、实时更新日志和相关文章。

此外,Vant 预览还有一个很重要的功能就是定制化。开发者可以根据不同的应用场景来定制想要使用的 Vant 组件,并把它保存成一个独立的文件夹。这样就能够大大减少应用中不必要的代码体量,也能够有效节省应用体量。

Vant4 ImagePreview 图片预览

介绍

图片放大预览,支持组件调用和函数调用两种方式。

引入

通过以下方式来全局注册组件,更多注册方式请参考组件注册。

import { createApp } from "vue";
import { ImagePreview } from "vant";

const app = createApp();
app.use(ImagePreview);

函数调用

为了便于使用 ​ImagePreview​,Vant 提供了一系列辅助函数,通过辅助函数可以快速唤起全局的图片预览组件。

比如使用 ​showImagePreview​ 函数,调用后会直接在页面中渲染对应的图片预览组件。

import { showImagePreview } from "vant";

showImagePreview(["https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"]);

代码演示

基础用法

在调用 ​showImagePreview​ 时,直接传入图片数组,即可展示图片预览。

import { showImagePreview } from "vant";

showImagePreview([
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
]);

指定初始位置

showImagePreview​ 支持传入配置对象,并通过 ​startPosition​ 选项指定图片的初始位置(索引值)。

import { showImagePreview } from "vant";

showImagePreview({
  images: [
    "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
    "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
  ],
  startPosition: 1,
});

展示关闭按钮

设置 ​closeable​ 属性后,会在弹出层的右上角显示关闭图标,并且可以通过 ​close-icon​ 属性自定义图标,使用​close-icon-position​ 属性可以自定义图标位置。

import { showImagePreview } from "vant";

showImagePreview({
  images: [
    "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
    "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
  ],
  closeable: true,
});

监听关闭事件

通过 ​onClose​ 选项监听图片预览的关闭事件。

import { showToast, showImagePreview } from "vant";

showImagePreview({
  images: [
    "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
    "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
  ],
  onClose() {
    showToast("关闭");
  },
});

异步关闭

通过 ​beforeClose​ 属性可以拦截关闭行为。

import { showImagePreview } from "vant";

const instance = showImagePreview({
  images: [
    "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
    "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
  ],
  beforeClose: () => false,
});

setTimeout(() => {
  // 调用实例上的 close 方法手动关闭图片预览
  instance.close();
}, 2000);

使用 ImagePreview 组件

如果需要在 ImagePreview 内嵌入组件或其他自定义内容,可以直接使用 ImagePreview 组件,并使用 ​index​ 插槽进行定制。使用前需要通过 ​app.use​ 等方式注册组件。

<van-image-preview v-model:show="show" :images="images" @change="onChange">
  <template v-slot:index>第{{ index }}页</template>
</van-image-preview>
import { ref } from "vue";

export default {
  setup() {
    const show = ref(false);
    const index = ref(0);
    const images = [
      "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
      "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
    ];
    const onChange = (newIndex) => {
      index.value = newIndex;
    };

    return {
      show,
      index,
      images,
      onChange,
    };
  },
};

使用 image 插槽

当以组件调用的方式使用 ImagePreview 时,可以通过 ​image​ 插槽来插入自定义的内容,比如展示一个视频内容。

<van-image-preview v-model:show="show" :images="images">
  <template #image="{ src }">
    <video style="width: 100%;" controls>
      <source :src="src" />
    </video>
  </template>
</van-image-preview>
import { ref } from "vue";

export default {
  setup() {
    const show = ref(false);
    const images = [
      "https://www.w3school.com.cn/i/movie.ogg",
      "https://www.w3school.com.cn/i/movie.ogg",
      "https://www.w3school.com.cn/i/movie.ogg",
    ];
    return {
      show,
      images,
    };
  },
};

API

方法

Vant 中导出了以下 ImagePreview 相关的辅助函数:

 方法名 说明  参数  返回值 
showImagePreview    展示图片预览  string[] | ImagePreviewOptions  imagePreview 实例

ImagePreviewOptions

调用 ​showImagePreview​ 方法时,支持传入以下选项:

参数名 说明 类型 默认值
images 需要预览的图片 URL 数组 string[] []
startPosition 图片预览起始位置索引 number | string 0
swipeDuration 动画时长,单位为 ms number | string 300
showIndex 是否显示页码 boolean true
showIndicators 是否显示轮播指示器 boolean false
loop 是否开启循环播放 boolean true
onClose 关闭时的回调函数 Function -
onChange 切换图片时的回调函数,回调参数为当前索引 Function -
onScale 缩放图片时的回调函数,回调参数为当前索引和当前缩放值组成的对象 Function -
beforeClose 关闭前的回调函数,返回 false 可阻止关闭,支持返回 Promise (active: number) => boolean | Promise<boolean> -
closeOnPopstate 是否在页面回退时自动关闭 boolean true
className 自定义类名 string | Array | object -
maxZoom 手势缩放时,最大缩放比例 number | string 3
minZoom 手势缩放时,最小缩放比例 number | string 1/3
closeable 是否显示关闭图标 boolean false
closeIcon 关闭图标名称或图片链接 string clear
closeIconPosition 关闭图标位置,可选值为 top-left
bottom-left bottom-right
string top-right
transition v3.0.8 动画类名,等价于 transition 的 name 属性 string van-fade
overlayClass v3.2.8 自定义遮罩层类名 string | Array | object -
overlayStyle v3.0.8 自定义遮罩层样式 object -
teleport 指定挂载的节点,等同于 Teleport 组件的 to 属性 string | Element -

Props

通过组件调用 ​ImagePreview​ 时,支持以下 Props:

参数 说明 类型 默认值
v-model:show 是否展示图片预览 boolean false
images 需要预览的图片 URL 数组 string[] []
start-position 图片预览起始位置索引 number | string 0
swipe-duration 动画时长,单位为 ms number | string 300
show-index 是否显示页码 boolean true
show-indicators 是否显示轮播指示器 boolean false
loop 是否开启循环播放 boolean true
before-close 关闭前的回调函数,返回 false 可阻止关闭,支持返回 Promise (active: number) => boolean | Promise<boolean> -
close-on-popstate 是否在页面回退时自动关闭 boolean true
class-name 自定义类名 string | Array | object -
max-zoom 手势缩放时,最大缩放比例 number | string 3
min-zoom 手势缩放时,最小缩放比例 number | string 1/3
closeable 是否显示关闭图标 boolean false
close-icon 关闭图标名称或图片链接 string clear
close-icon-position 关闭图标位置,可选值为 top-left
bottom-left bottom-right
string top-right
transition v3.0.8 动画类名,等价于 transition 的 name 属性 string van-fade
overlay-class v3.2.8 自定义遮罩层类名 string | Array | object -
overlay-style v3.0.8 自定义遮罩层样式 object -
teleport 指定挂载的节点,等同于 Teleport 组件的 to 属性 string | Element -

Events

通过组件调用 ​ImagePreview​ 时,支持以下事件:

事件 说明 回调参数
close 关闭时触发 { index: number, url: string }
closed 关闭且且动画结束后触发 -
change 切换当前图片时触发 index: number
scale 缩放当前图片时触发 { index: number, scale: number }
long-press 长按当前图片时触发 { index: number }

方法

通过组件调用 ​ImagePreview​ 时,通过 ref 可以获取到 ImagePreview 实例并调用实例方法,详见组件实例方法。

方法名 说明 参数 返回值
swipeTo 2.9.0 切换到指定位置 index: number, options?: SwipeToOptions -

类型定义

组件导出以下类型定义:

import type {
  ImagePreviewProps,
  ImagePreviewOptions,
  ImagePreviewInstance,
  ImagePreviewScaleEventParams,
} from "vant";

ImagePreviewInstance​ 是组件实例的类型,用法如下:

import { ref } from "vue";
import type { ImagePreviewInstance } from "vant";

const imagePreviewRef = ref<ImagePreviewInstance>();

imagePreviewRef.value?.swipeTo(1);

Slots

通过组件调用 ​ImagePreview​ 时,支持以下插槽:

名称 说明 参数
index 自定义页码内容 { index: 当前图片的索引 }
cover 自定义覆盖在图片预览上方的内容 -
image v3.6.5 自定义图片内容 { src: 当前资源地址 }

onClose 回调参数

参数名 说明 类型
url 当前图片 URL string
index 当前图片的索引值 number

onScale 回调参数

参数名 说明 类型
index 当前图片的索引值 number
scale 当前图片的缩放值 number

主题定制

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。

名称 默认值 描述
--van-image-preview-index-text-color var(--van-white) -
--van-image-preview-index-font-size var(--van-font-size-md) -
--van-image-preview-index-line-height var(--van-line-height-md) -
--van-image-preview-index-text-shadow 0 1px 1px var(--van-gray-8) -
--van-image-preview-overlay-background rgba(0, 0, 0, 0.9) -
--van-image-preview-close-icon-size 22px -
--van-image-preview-close-icon-color var(--van-gray-5) -
--van-image-preview-close-icon-margin var(--van-padding-md) -
--van-image-preview-close-icon-z-index 1 -

常见问题

在桌面端无法操作组件?

参见桌面端适配。

引用 showImagePreview 时出现编译报错?

如果引用 ​showImagePreview​ 方法时出现以下报错,说明项目中使用了 ​babel-plugin-import​ 插件,导致代码被错误编译。

These dependencies were not found:

* vant/es/show-image-preview in ./src/xxx.js
* vant/es/show-image-preview/style in ./src/xxx.js

Vant 从 4.0 版本开始不再支持 ​babel-plugin-import​ 插件,请参考 迁移指南 移除该插件。


阅读全文
以上是编程学为你收集整理的vant 预览 Vant4 ImagePreview 预览全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部