cdfg_h5/src/components/cropper/cropper.vue

<template>
  <div class="cropper-box">
    <!-- <VueCropper v-if="show" ref="vmRef" v-bind="option" v-on="on" /> -->
    <div class="layout">
      <p class="title">{{ title }}</p>
      <div class="content">
        <VueCropper v-if="show" ref="vmRef" v-bind="option" v-on="on" />
      </div>
      <div class="footer">
        <div class="cancel" @click="cancelCrop()">{{ noText }}</div>
        <div class="confirm" @click="confirmCrop()">{{ okText }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { VueCropper } from 'vue-cropper';
import 'vue-cropper/dist/index.css';
import { computed, defineProps, ref, nextTick, defineEmits } from 'vue';
// import 'vue-cropper/dist/index.css'
// import { useI18n } from '@/i18n'
// const { t } = useI18n({ useScope: 'global' })
const sizeType = ref(1);
const layerWidth = 256;
const emit = defineEmits(['close', 'ok']);
const props = defineProps({
  fixedNumber: {
    type: Array,
    default: () => [1, 1],
  },
  img: { type: String },
  noText: {
    type: String,
    default: '取消',
  },
  okText: {
    type: String,
    default: '确认',
  },
  title: {
    type: String,
    default: '裁剪',
  },
});
const show = ref(true);
const fixedNumber = props.fixedNumber;
const getHeight = (width) => (fixedNumber[1] / fixedNumber[0]) * width;

const option = {
  outputSize: 1,
  outputType: 'png',
  info: false,
  full: true,
  fixed: true,
  canScale: true,
  fixedNumber: fixedNumber,
  canMove: true,
  canMoveBox: true,
  fixedBox: false,
  original: false,
  autoCrop: true,
  autoCropWidth: layerWidth / 2,
  autoCropHeight: getHeight(layerWidth / 2),
  centerBox: false,
  mode: 'contain',
  maxImgSize: 400,
  ...props,
};

const vmRef = ref(null);
const on = {
  imgLoad(status) {
    if (status !== 'success') {
      // props.cb('图片加载失败');
    }
  },
};

const clickHandler = async (status) => {
  if (status === 'ok') {
    let data = await Promise.all([new Promise((resolve) => vmRef.value.getCropBlob(resolve)), new Promise((resolve) => vmRef.value.getCropData(resolve))]);
    if (props.showSize) {
      data.push(sizeType.value);
    }
    props.cb(null, data);
  } else {
    props.cb();
  }
};
const confirmCrop = () => {
  vmRef.value.getCropData((data) => {
    // do something
    emit('ok', data);
    emit('close');
  });
};
const cancelCrop = () => {
  emit('close');
};
</script>

<style lang="scss" socped>
.vue-cropper {
  background-repeat: repeat;
}
.cropper-box {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  .layout {
    width: 8.64rem;
    min-height: 5rem;
    // background: #ffffff;
    pointer-events: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    // overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.7);
    .title {
      font-size: 0.39rem;
      width: 100%;
      height: 1.39rem;
      padding: 0 0.56rem;
      box-sizing: border-box;
      font-size: 0.39rem;
      color: #fff;
      line-height: 1.39rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      border-bottom-style: solid;
      border-bottom-width: 1px;
      border-bottom-color: rgba(255, 255, 255, 0.1);
    }
    .content {
      width: 100%;
      height: 3.4133rem;
      margin: 0.56rem 0;
    }
    .footer {
      width: 100%;
      height: 1.36rem;
      border-top-style: solid;
      border-top-width: 1px;
      border-top-color: rgba(255, 255, 255, 0.1);
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.39rem;
      > div {
        width: 50%;
        height: 1.36rem;
        text-align: center;
        line-height: 1.36rem;
        font-size: 0.39rem;
        box-sizing: border-box;
        &.cancel {
          color: #fff;
          border-right-style: solid;
          border-right-width: 1px;
          border-right-color: rgba(255, 255, 255, 0.1);
        }
        &.confirm {
          color: #ed5d18;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.cropper-view-box {
  outline-color: var(--color-main-normal) !important;
}
.crop-point {
  background-color: var(--color-main-normal) !important;
}
.size {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
</style>
<script>
export default { name: 'ui-cropper' };
</script>