soc_app/src/components/imgCom/index.vue

<template>
  <div>
    <van-image :width="width" :height="height" :src="src" @click="onClickShow" />
    <van-image-preview v-model="show" :images="listImg" @change="onChange">
      <template v-slot:index>第{{ index }}页</template>
    </van-image-preview>
    <!-- <van-overlay :show="show" @click="onClickHide">
      <div class="imgsty">
        
        <van-image :src="src" />
      </div>
    </van-overlay> -->
  </div>
  <!-- <van-overlay :show="false">
    <view class="wrapper">
      <van-image :width="width" :height="height" :src="src" />
    </view>
  </van-overlay> -->
</template>
<script>
export default {
  props: {
    width: {
      type: String,
      default: '100'
    },
    height: {
      type: String,
      default: '100'
    },
    src: {
      type: String,
      default: 'https://img.yzcdn.cn/vant/cat.jpeg'
    },
    imgList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  name: 'SocAppIndex',

  data() {
    return {
      this_:this,
      show: false,
      this_window:window,
      index:'',
      
    }
  },
  computed:{
    listImg(){
      this.imgList.filter(item=>{
        if(item.url&&item.type==0){
          return item.url
        }
      })
    }
  },
  mounted() {},

  methods: {
    onClickShow() {
      this.show = true
    },
    onClickHide() {
      this.show = false
    },
    onChange(index) {
      this.index = index;
    }
  }
}
</script>
<style lang="scss" scoped>
.imgsty {
  position: absolute;
  top: 28%;
}
</style>