<template>
  <div @click="hidePreview" v-show="showPreview" class="wraper">
    <img :style="{ width: width + 'px' }" :src="src" alt="" />
  </div>
</template>
<script>
export default {
  name: 'luPreview',
  props: {
    width: {
      type: Number,
      default: function() {
        return 400;
      }
    },
    isShow: {
      type: Boolean,
      default: function() {
        return false;
      }
    },
    src: {
      type: String,
      default: function() {
        return "";
      }
    }
  },
  computed: {
    showPreview: {
      get: function() {
        return this.isShow;
      },
      set: function() {}
    }
  },
  methods: {
    hidePreview() {
      this.$emit("hide");
    }
  }
};
</script>

<style scoped lang="scss">
.wraper {
  position: fixed;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
}
</style>
