# ImgView 图片预览

<template>
  <div class="h-demo-title">类型:</div>
  <el-radio-group v-model="type">
    <el-radio label="adjust">adjust</el-radio>
    <el-radio label="fill">fill</el-radio>
    <el-radio label="fit">fit</el-radio>
    <el-radio label="contain">contain</el-radio>
    <el-radio label="cover">cover</el-radio>
  </el-radio-group>
  <div class="h-demo-title">背景:</div>
  <el-radio-group v-model="bg">
    <el-radio label="white">white</el-radio>
    <el-radio label="gray">gray</el-radio>
    <el-radio label="transparent">transparent</el-radio>
  </el-radio-group>
  <el-row :gutter="16">
    <el-col :span="12">
      <div class="h-demo-title" v-text="type" />
      <h-img-view class="demo-img" :src="src" :bg="bg" :mode="type" />
    </el-col>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        src: '/hui-pro/images/home-image-blue.png',
        type: 'contain',
        bg: 'transparent'
      };
    }
  };
</script>

<style lang="scss" scoped>
  @import '~@hui-pro/theme/index.scss';
  .demo-img {
    width: 100%;
    height: 350px;
  }
  .demo-img-wrapper {
    position: relative;
  }
  .demo-img-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    padding: 0 8px;
    background: rgba(0, 0, 0, 0.4);
    color: $--color-white;
    line-height: 40px;
  }
</style>

<template>
  <el-row :gutter="16">
    <el-col :span="12">
      <h-img-view class="demo-img" :src="src" mode="adjust" cursor="grab">
        <h-img-snippets-rect
          :rect="{
            width: 0.5,
            height: 0.5,
            top: 0.25,
            left: 0.25
          }"
        />
      </h-img-view>
    </el-col>
    <el-col :span="12">
      <div class="demo-img-wrapper">
        <h-img-view class="demo-img" :src="src" mode="contain" />
        <div class="demo-img-bottom">
          自定义图片信息
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<template>
  <el-row :gutter="16">
    <el-col :span="12">
      <p>
        <h-img-snippets-zoom
          @zoom-out="zoomOut"
          @zoom-in="zoomIn"
          :scale="viewData.ratio"
        />
        <el-button type="default" @click="reset">
          适当尺寸
        </el-button>
        <el-button type="default" @click="resetOriginal">
          原始尺寸
        </el-button>
      </p>
      <h-img-view
        ref="view"
        :view-data.sync="viewData"
        class="demo-img"
        @on-zoom="onZoom"
        src="/hui-pro/images/big.jpg"
      />
    </el-col>
  </el-row>
</template>

<script>
  export default {
    methods: {
      onZoom(opts) {
        this.scale = opts.scale;
      },
      reset() {
        this.scale = 1;
        this.$refs.view.$resetView();
      },
      resetOriginal() {
        this.scale = 1;
        this.$refs.view.$resetView(true);
      },
      zoomIn(type) {
        this.$refs.view.$zoomIn();
      },
      zoomOut(type) {
        this.$refs.view.$zoomOut();
      }
    },
    data() {
      return {
        scale: 1
      };
    }
  };
</script>