<template>
  <div style="width: 100%;height: 100%">
    <vue-photo-zoom-pro :width="bigWidth" :url="url" :type="type" :scale="scale" :out-show="showType"
      :overlayStyle="overlayStyle">
    </vue-photo-zoom-pro>
  </div>
</template>

<script>
import vuePhotoZoomPro from '@/components/PhotoZoom/vue-photo-zoom-pro'
export default {
  name: 'PicZoom',
  components: { vuePhotoZoomPro },
  data () {
    return {
      type: "square",
      showType: false,
    }
  },
  props: {
    url: {
      type: String,
      required: true,
      // default: require('@/assets/vehicle_img/blank_vehicle.jpg') 
    },
    bigWidth: {
      type: Number,
      required: true,
      default: 168
    },
    scale: {
      type: Number,
      required: true,
      default: 2
    },
    overlayStyle: {
      type: String,
      default: 'width:100%;height:100%'
    }
  },
}
</script>