cione-comp-lib/es/packages/co-image-std/index2.mjs

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

import { defineComponent, ref, watch, onMounted, nextTick, toRefs, resolveComponent, openBlock, createElementBlock, normalizeStyle, normalizeClass, createCommentVNode, createVNode } from "vue";
import ImagePreview from "./imagePreview.mjs";
import "./index.vue_vue_type_style_index_0_scoped_true_lang.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = defineComponent({
  name: "CoImageStd",
  components: { ImagePreview },
  props: {
    src: {
      type: String
    },
    width: {
      type: String
    },
    height: {
      type: String
    },
    preview: {
      type: Boolean
    },
    opacity: {
      type: Number,
      default: 100
    },
    backgroundSize: {
      type: String
    },
    rotate: {
      type: Number,
      default: 0
    },
    isRotate: {
      type: Boolean,
      default: false
    },
    rotateTimer: {
      type: Number,
      default: 2
    },
    clockType: {
      type: String,
      default: "middle"
    }
  },
  setup(props) {
    const imgSrc = ref(props.src);
    const isMask = ref(false);
    const refPreBox = ref();
    const refPreImg = ref();
    const isReset = ref(false);
    const picturePreview = (event) => {
      if (props.preview) {
        isMask.value = true;
      }
    };
    const imagePreviewChange = () => {
      isMask.value = false;
    };
    const startRotate = ref(props.rotate + "deg");
    const endRotate = ref(`${360 + props.rotate}deg`);
    const isRotateState = ref(props.isRotate);
    const showRotate = ref(true);
    const updataSrc = (url) => {
      imgSrc.value = url;
    };
    watch(
      () => props.src,
      () => {
        imgSrc.value = props.src;
      }
    );
    watch(
      () => props.rotate,
      () => {
        startRotate.value = props.rotate + "deg";
        endRotate.value = `${360 + props.rotate}deg`;
        setCssRootVariable("--startRotat", startRotate.value);
        setCssRootVariable("--endRotate", endRotate.value);
      }
    );
    watch(
      () => props.isRotate,
      () => {
        isRotateState.value = props.isRotate;
      }
    );
    const setCssRootVariable = (name, value) => {
      value && document.documentElement.style.setProperty(name, value.trim());
    };
    onMounted(() => {
      showRotate.value = false;
      nextTick(() => {
        showRotate.value = true;
        startRotate.value = props.rotate + "deg";
        endRotate.value = `${360 + props.rotate}deg`;
        setCssRootVariable("--startRotat", startRotate.value);
        setCssRootVariable("--endRotate", endRotate.value);
      });
    });
    return {
      showRotate,
      imgSrc,
      refPreBox,
      refPreImg,
      isMask,
      isReset,
      startRotate,
      endRotate,
      isRotateState,
      picturePreview,
      imagePreviewChange,
      updataSrc,
      ...toRefs(props)
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ImagePreview = resolveComponent("ImagePreview");
  return openBlock(), createElementBlock("div", {
    class: "co-image-std",
    style: normalizeStyle({ width: _ctx.width || "100%", height: _ctx.height || "100%" })
  }, [
    _ctx.showRotate ? (openBlock(), createElementBlock("div", {
      key: 0,
      class: normalizeClass(`image-std__box ${_ctx.isRotateState ? "image-std__animation" : ""}`),
      style: normalizeStyle({
        width: _ctx.width || "100%",
        height: _ctx.height || "100%",
        opacity: _ctx.opacity / 100,
        backgroundImage: `url(${_ctx.imgSrc})`,
        backgroundRepeat: _ctx.backgroundSize === "repeat" ? "repeat" : "no-repeat",
        backgroundSize: _ctx.backgroundSize === "repeat" ? "inherit" : _ctx.backgroundSize,
        backgroundPosition: _ctx.backgroundSize === "repeat" ? "left top" : "center center",
        transform: `rotate(${_ctx.rotate}deg)`,
        animationDuration: `${_ctx.rotateTimer}s`,
        animationPlayState: _ctx.isRotateState ? "running" : "paused",
        cursor: _ctx.preview ? "pointer" : ""
      }),
      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.picturePreview && _ctx.picturePreview(...args))
    }, null, 6)) : createCommentVNode("", true),
    createVNode(_component_ImagePreview, {
      modelValue: _ctx.isMask,
      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.isMask = $event),
      src: _ctx.imgSrc,
      "onUpdate:src": _cache[2] || (_cache[2] = ($event) => _ctx.imgSrc = $event),
      clockType: _ctx.clockType,
      "onUpdate:clockType": _cache[3] || (_cache[3] = ($event) => _ctx.clockType = $event),
      onChange: _ctx.imagePreviewChange
    }, null, 8, ["modelValue", "src", "clockType", "onChange"])
  ], 4);
}
var Image = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c41ac8bc"]]);
export { Image as default };