yuang-framework-ui-pc/es/ele-cropper/components/cropper-preview.js

yuang-framework-ui-pc Library

import { defineComponent, ref, openBlock, createElementBlock, normalizeStyle, createElementVNode, Fragment, createCommentVNode } from "vue";
const _sfc_main = defineComponent({
  name: "CropperPreview",
  props: {
    /** 组件宽度 */
    previewWidth: {
      type: Number,
      required: true
    },
    /** 裁剪比例 */
    aspectRatio: Number
  },
  setup() {
    const rootRef = ref(null);
    const getPreviews = () => {
      if (!rootRef.value) {
        return;
      }
      return rootRef.value.querySelectorAll(".ele-cropper-preview");
    };
    return { rootRef, getPreviews };
  }
});
const _export_sfc = (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", {
    ref: "rootRef",
    class: "ele-cropper-previews",
    style: normalizeStyle({ width: `${_ctx.previewWidth + 14}px` })
  }, [
    createElementVNode("div", {
      class: "ele-cropper-preview",
      style: normalizeStyle({
        width: `${_ctx.previewWidth}px`,
        height: `${_ctx.previewWidth / (_ctx.aspectRatio || 1)}px`,
        marginTop: "0px"
      })
    }, null, 4),
    _ctx.aspectRatio === 1 ? (openBlock(), createElementBlock("div", {
      key: 0,
      class: "ele-cropper-preview is-circle",
      style: normalizeStyle({
        width: `${_ctx.previewWidth}px`,
        height: `${_ctx.previewWidth / _ctx.aspectRatio}px`
      })
    }, null, 4)) : _ctx.aspectRatio ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
      createElementVNode("div", {
        class: "ele-cropper-preview",
        style: normalizeStyle({
          width: `${_ctx.previewWidth}px`,
          height: `${(_ctx.previewWidth / 3 * 2 - 10) / _ctx.aspectRatio}px`
        })
      }, null, 4),
      createElementVNode("div", {
        class: "ele-cropper-preview",
        style: normalizeStyle({
          width: `${_ctx.previewWidth}px`,
          height: `${_ctx.previewWidth / 3 / _ctx.aspectRatio}px`,
          marginLeft: "10px"
        })
      }, null, 4)
    ], 64)) : createCommentVNode("", true)
  ], 4);
}
const cropperPreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  cropperPreview as default
};