chat/_src/pages/h5/components/cropper.vue

<template>
  <div class="cropper-wrapper" v-if="visible">
      <section class="cropper-main">
          <vueCropper
            ref="cropper"
            :img="img"
            :autoCrop = "autoCrop"
            :canScale = "true"
            :fixed = "true"
            :fixedNumber = "fixedNumber"
            ></vueCropper>
      </section>
      <footer class="cropper-f">
          <button @click="close">{{$t('public.cancel')}}</button>
          <button @click="submit">{{$t('public.complete')}}</button>
      </footer>
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper'

export default {
  name: 'cropper',
  props: {
    visible: Boolean,
    img: null
  },
  components: {
    VueCropper
  },
  computed: {
  },
  data () {
    return {
      autoCrop: true,
      fixedNumber: [1, 1]
    }
  },
  methods: {
    close () {
      this.$emit('close')
    },
    submit () {
      this.$refs.cropper.getCropBlob((data) => {
        this.$emit('cropper', data)
      })
    }
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
.cropper-wrapper{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .9);
    display: flex;
    flex-direction: column;
    z-index: 99;
    .cropper-main{
        height: 0;
        flex: 1;
    }
    .cropper-f{
        display: flex;
        height: px2rem(128);
        padding: 0 px2rem(48);
        justify-content: space-between;
        align-items: center;

        button{
            -webkit-appearance: none;
            outline: none;
            border: none;
            padding: 0;
            background-color: transparent;
            font-size: px2rem(32);
            font-weight: bold;
            color: #fff;
        }
    }

    .vue-cropper{
        background-image: none;
    }
}
</style>