安卓手机如何使用vue

发布网友 发布时间：2022-04-20 11:44

我来回答

共2个回答

懂视网 时间：2022-05-14 19:33

vue-image-swipe

基于photoswipe实现的vue图片预览组件

安装

1 第一步

npm instatll vue-image-swipe -D

2 第二步

vue 入口文件引入

import Vue from 'vue'
import VueImageSwipe from 'vue-image-swipe'
import 'vue-image-swipe/dist/vue-image-swipe.css'
Vue.use(VueImageSwipe)

使用

<template>
<div>
 hello world
 <div>
 <ul>
 <li
 :key="index"
 @click="preview(index)"
 v-for="(l, index) in images">
  <img :src="l" alt="">
 </li>
 </ul>
 </div>
</div>
</template>
<script>
export default {
 name: 'app',
 data() {
 return {
 images: [
 'http://oayhezji6.bkt.clouddn.com/preview1.jpg',
 'http://oayhezji6.bkt.clouddn.com/preview2.jpg',
 'http://oayhezji6.bkt.clouddn.com/preview3.jpg',
 'http://oayhezji6.bkt.clouddn.com/preview9.jpg',
 'http://oayhezji6.bkt.clouddn.com/preview10.jpg',
 'http://oayhezji6.bkt.clouddn.com/preview6.jpg'
 ]
 }
 },
 created() {
 },
 methods: {
 preview(index) {
 this.$imagePreview({
 images: this.images,
 index: index,
 })
 }
 }
}
</script>

methods

只暴露了一个方法this.$imagePreview，并绑定到vue的原型上
使用

this.$imagePreview(options = {})

options有三个参数

defaultOpt 的配置项请参考photoswipe配置项，
注意：不能保证所有配置项都是可用的

列举一些常用的配置

defaultOpt: {
 fullscreenEl: true,
 shareEl: false,
 arrowEl: true,
 preloaderEl: true,
 loop: false,
 bgOpacity: 0.85,
 showHideOpacity: true,
 errorMsg: '<p class="pswp__error-msg">图片加载失败</p>',
}

热心网友 时间：2022-05-14 16:41