xdesign-vue-next/es/watermark/watermark.mjs.map

XDesign Component for vue-next

{"version":3,"file":"watermark.mjs","sources":["../../src/watermark/watermark.tsx"],"sourcesContent":["import { computed, onMounted, defineComponent, watch, ref, reactive } from 'vue';\nimport props from './props';\nimport generateBase64Url from '../_common/js/watermark/generateBase64Url';\nimport randomMovingStyle from '../_common/js/watermark/randomMovingStyle';\nimport injectStyle from '../_common/js/utils/injectStyle';\nimport { usePrefixClass } from '../hooks/useConfig';\nimport { useMutationObserver } from './hooks';\nimport { useContent } from '../hooks/tnode';\n\nexport default defineComponent({\n  name: 'XWatermark',\n  props,\n  setup(props) {\n    const backgroundImage = ref('');\n    const watermarkRef = ref<HTMLElement>();\n    const watermarkContentRef = ref<HTMLElement>();\n    const parent = ref<HTMLElement>();\n\n    const offset = reactive(props.offset || []);\n\n    const gapX = computed(() => {\n      return props.movable ? 0 : props.x;\n    });\n\n    const gapY = computed(() => {\n      return props.movable ? 0 : props.y;\n    });\n\n    const rotate = computed(() => {\n      return props.movable ? 0 : props.rotate;\n    });\n\n    const backgroundRepeat = computed(() => {\n      if (props.movable) {\n        return 'no-repeat';\n      }\n      return props.isRepeat ? 'repeat' : 'no-repeat';\n    });\n\n    const offsetLeft = computed(() => {\n      return offset[0] || gapX.value / 2;\n    });\n\n    const offsetTop = computed(() => {\n      return offset[1] || gapY.value / 2;\n    });\n\n    const bgImageOptions = computed(() => ({\n      width: props.width,\n      height: props.height,\n      rotate: rotate.value,\n      lineSpace: props.lineSpace,\n      alpha: props.alpha,\n      gapX: gapX.value,\n      gapY: gapY.value,\n      watermarkContent: props.watermarkContent,\n      offsetLeft: offsetLeft.value,\n      offsetTop: offsetTop.value,\n    }));\n\n    const injectWaterMark = () => {\n      generateBase64Url(bgImageOptions.value, (base64Url) => {\n        backgroundImage.value = base64Url;\n      });\n      const keyframesStyle = randomMovingStyle();\n      injectStyle(keyframesStyle);\n    };\n\n    onMounted(() => {\n      injectWaterMark();\n      parent.value = watermarkRef.value.parentElement;\n      useMutationObserver(\n        parent.value,\n        (mutations) => {\n          if (props.removable) return;\n          mutations.forEach((mutation) => {\n            if (mutation.type === 'childList') {\n              const removeNodes = mutation.removedNodes;\n              removeNodes.forEach((node) => {\n                const element = node as HTMLElement;\n                if (element === watermarkRef.value) {\n                  parent.value.appendChild(element);\n                }\n                if (element === watermarkContentRef.value) {\n                  watermarkRef.value.appendChild(element);\n                }\n              });\n            }\n          });\n        },\n        {\n          attributes: true,\n          childList: true,\n          characterData: true,\n          subtree: true,\n        },\n      );\n    });\n\n    watch(() => props.watermarkContent, injectWaterMark, { deep: true });\n\n    return {\n      gapX,\n      gapY,\n      backgroundRepeat,\n      backgroundImage,\n      watermarkRef,\n      watermarkContentRef,\n      bgImageOptions,\n    };\n  },\n\n  render() {\n    const COMPONENT_NAME = usePrefixClass('watermark');\n    const renderContent = useContent();\n\n    return (\n      <div\n        style={{ position: 'relative', overflow: 'hidden', width: '100%' }}\n        class={COMPONENT_NAME.value}\n        ref=\"watermarkRef\"\n      >\n        {renderContent('default', 'content')}\n        <div\n          ref=\"watermarkContentRef\"\n          style={{\n            zIndex: this.zIndex,\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            top: 0,\n            bottom: 0,\n            width: '100%',\n            height: '100%',\n            backgroundSize: `${this.gapX + this.width}px`,\n            pointerEvents: 'none',\n            backgroundRepeat: this.backgroundRepeat,\n            backgroundImage: `url('${this.backgroundImage}')`,\n            animation: this.movable ? `watermark infinite ${(this.moveInterval * 4) / 60}s` : 'none',\n          }}\n        />\n      </div>\n    );\n  },\n});\n"],"names":["name","props","generateBase64Url","onMounted","injectWaterMark","parent","useMutationObserver","mutations","removeNodes","watermarkRef","attributes","childList","characterData","subtree","watch","deep","gapX","gapY","backgroundRepeat","backgroundImage","watermarkContentRef","bgImageOptions","_createVNode","position","overflow","width","left","right","top","bottom","height","pointerEvents","animation"],"mappings":"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"}