wen-vant-preview v0.1.22

wen-vant-preview

功能介绍

• 基于vant2.x的swipe组件改造，支持视频和图片预览的vant组件（适用移动端）
• 支持自动播放，循环播放，手势滑动切换，自定义初始位置索引值
• 支持完全自定义指示器（需要通过position设置指示器的位置，否则无法看见指示器）
• 支持除视频与图片之外的元素自定义预览
• 支持视频页ready、play、pause、fullscreen回调
• 支持图片页双指缩放、双击放大（v0.1.10）
• 打开或关闭预览是否从目标出现或结束（v0.1.11）

示例

• 查看Demo，请切换到移动设备查看

安装

# 安装该组件需要基于Vue 2项目，且安装了 Vant 2：

npm i wen-vant-preview

使用方法

    // main.js 全局注册
    import WenVantPreview from 'wen-vant-preview'
    Vue.use(WenVantPreview)

    // 局部注册
    import { WenVantPreview } from 'wen-vant-preview'
    export default {
        name: 'example',
        components: { WenVantPreview },
        // 为了达到最佳效果，你需要在页面上添加以下代码，阻止下拉回弹的效果
        mounted() {
            this.fun = function (e) {
                e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
            }
            document.body.addEventListener('touchmove', this.fun, {passive: false}); //passive 参数不能省略，用来兼容ios和android
        },
        destroyed() {
            document.body.removeEventListener('touchmove', this.fun, false); // 销毁的时候别忘了解绑事件哦
        }
    }

    <wen-vant-preview v-model="showPreview" :list="previewList" ref="wen-vant-preview" :config="previewConfig" :traceability.sync="traceability">
      <template v-slot="{item, index}">
        <span :style="{color: `${item.color}`, 'display': 'flex','height': '100%','align-items': 'center','justify-content': 'center'}">
          {{ item.name }}----{{ index + 1 }}
        </span>
        <button @click="itemClick">click</button>
      </template>
      <template #indicator="{current}">
        <div style="color: red;position: absolute;top: 10px;left: 20px;font-size: 36px;">
          {{current + 1}} / {{previewList.length}}
        </div>
      </template>
      <template #cover="{index}">
        <div >{{index}}</div>
      </template>
    </wen-vant-preview>
    <van-button type="primary" @click="vantClick($event)">预览测试</van-button>

import {WenVantPreview} from 'wen-vant-preview'
export default {
  components: { WenVantPreview },
  data () {
    return {
      showPreview: false,
      traceability: null,
      previewList: [
        {
          id: 1,
          name: '测试数据111',
          value: '数据数据111',
          color: '#fff'
        },
        {
          id: 2,
          name: '测试数据222',
          label: 'wenshao',
          color: '#c3ff24'
        },
        {
          id: 3,
          url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
          fileType: 2 
        },
        {
          id: 4,
          src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp8.itc.cn%2Fimages01%2F20211109%2F68827788036149d78b9abb076c67917b.jpeg&refer=http%3A%2F%2Fp8.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660189303&t=e864839984d3cc831e9cc10e0ac8be78',
          fileType: 1
        },
        {
          id: 5,
          url: 'http://v.xiaohongshu.com/pre_post/01e2c976f53d85c80183700381e2fb09d5_259.mp4?sign=d002efb961ae9e2bb0484d459f6d088d&t=62d03d80',
          fileType: 2
        }
      ],
      previewConfig: {
        type: 'fileType', // 用于区分视频还是图片的字段
        videoType: 2,     // 视频类型的判断值
        imageType: 1      // 图片类型的判断值
      }
    }
  },
  methods: {
    vantClick (event) {
      this.traceability = event.target
      this.showPreview = true
    },
    previewClick (event, index) {
      console.log(event, index, 'previewClick')
    },
    previewChange (index) {
      console.log(index, 'previewChange')
    },
    itemClick() {
        this.$refs["wen-vant-preview"].swipeTo(3, {immediate: false})
    }
  }
}

接口说明

Props

traceability使用说明：开启该模式，请传递目标原生dom，组件内部关闭预览会清空traceability的值，如果你希望每次打开预览的时候都有溯源动画，请在赋值v-model之前把目标原生dom赋值给traceability.sync

Events

Function

Slots

Config