Vue移動端previewer画像拡大プレビューを実現

簡単に述べる
本文は主に、vueが携帯電話のモバイル端末でどのように小さな図を拡大してプレビューするかについて述べる.モーメンツのような写真を見る.
使用可能なツール

1、npm取付、npm i vue-preview -S

2、いくつかのVueを使用するUIコンポーネントフレームワーク、例えばvux、vonic、Mint UI等のpreview

効果図
画像が大きすぎるので、文章の中に置いて、レイアウトが醜いので、リンクをクリックして、ジャンプしてみましょう. ： (https://img-blog.csdn.net/20180725094952768?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlbml1c195eW0=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70) ： (https://img-blog.csdn.net/20180725095044337?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlbml1c195eW0=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
インプリメンテーションコード
(一)HTML

<div v-show="listDatas && listDatas.length>0">

	<img class="previewer-demo-img" v-for="(item, index) in listDatas" :src="item.src" width="100" @click="showImgs(index)" :style="{width: imgWidth, height: imgWidth}">
div>
<div v-show="listDatas && listDatas.length==0">
	<span style="font-size: 12px;color:#8f8e94;">      span>
div>
<div v-transfer-dom>
	
	<previewer :list="listDatas" ref="previewer" :options="options">previewer>
div>

(二)js

data() {
 return {
  imgWidth: '375px',
  listDatas: [],
  options: { //     
    getThumbBoundsFn (index) {
      let thumbnail = document.querySelectorAll('.previewer-demo-img')[index];
      let pageYScroll = window.pageYOffset || document.documentElement.scrollTop;
      let rect = thumbnail.getBoundingClientRect()
      return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
    }
  }
 }
},
mounted() {
 //               
 this.imgWidth = parseInt((Number(window.screen.width) - 45) / 3) + 'px';
},
methods: {
 showImgs (index) { //    index   ，  ref
  this.$refs.previewer.show(index)
 },
 loaGongkeSearck(searchFlag) { //       ，  base64    。
	var params = {
        appealid: this.$route.query.appealid,
		projid: this.$store.state.core.loginFormInfo.projId,
		orgid: this.$store.state.core.loginFormInfo.orgid,
		appcode: this.$store.state.core.loginFormInfo.appcode
	}
	this.$http.post(this.HOST+"/online/queryAppeal.do", params,{emulateJSON:true}
	).then(function(response){
      if (response.data.data.attach_path && response.data.data.attach_path.length>0) {
        for (var i = 0; i < response.data.data.attach_path.length; i++) {
          this.listDatas.push({
            msrc: 'data:image/jpeg;base64,' + response.data.data.attach_path[i],
            src: 'data:image/jpeg;base64,' + response.data.data.attach_path[i],
            w: 900,
            h: 1200,
          })
        }
      }
     }
	}, function(response){
	})
},
}

終わりの言葉
Vue移動端previewerで画像拡大プレビューを実現.