label-print-design/es/components/design/text/text.vue2.mjs.map

操作简单，组件丰富的一站式打印解决方案打印设计器

{"version":3,"file":"text.vue2.mjs","sources":["../../../../../../src/components/design/text/text.vue"],"sourcesContent":["<template>\r\n    <my-barcode v-if=\"element.contentType === 'Barcode'\" :element=\"element\" />\r\n    <my-qrcode\r\n        v-else-if=\"element.contentType === 'QrCode'\"\r\n        :element=\"element\"\r\n    />\r\n    <div\r\n        v-else\r\n        class=\"my-print-text_container\"\r\n        ref=\"contentRef\"\r\n        :contentEditable=\"\r\n            elementHandleEditStatusList.includes(element.runtimeOption.status)\r\n        \"\r\n        v-html=\"data.content\"\r\n        :style=\"style\"\r\n        @input=\"handleInput\"\r\n        @keydown=\"handleKeydown($event)\"\r\n    />\r\n</template>\r\n<script setup lang=\"ts\">\r\nimport { computed, onMounted, reactive, ref, watch } from 'vue-demi';\r\nimport { MyElement } from '@myprint/design/types/entity';\r\nimport MyBarcode from '@myprint/design/components/design/barcode';\r\nimport MyQrcode from '@myprint/design/components/design/qrcode';\r\nimport {\r\n    elementCommonStyle,\r\n    formatter\r\n} from '@myprint/design/utils/elementUtil';\r\nimport {\r\n    checkInput,\r\n    freshMoveableOption,\r\n    moveableEditing\r\n} from '@myprint/design/plugins/moveable/moveable';\r\nimport { elementHandleEditStatusList } from '@myprint/design/constants/common';\r\nimport { br2n, n2br } from '@myprint/design/utils/utils';\r\n\r\nconst props = withDefaults(\r\n    defineProps<{\r\n        element: MyElement;\r\n    }>(),\r\n    {\r\n        element: () => ({} as MyElement)\r\n    }\r\n);\r\nconst contentRef = ref();\r\nconst data = reactive({\r\n    content: '',\r\n    innerContent: ''\r\n});\r\nconst style = computed(() => {\r\n    return elementCommonStyle(props.element);\r\n});\r\n\r\nonMounted(() => {\r\n    data.content = n2br(props.element.data);\r\n    data.innerContent = data.content;\r\n    if (props.element.data == null) {\r\n        const elementData = formatter(props.element);\r\n        if (elementData != null) {\r\n            props.element.data = elementData;\r\n            data.content = n2br(elementData);\r\n            data.innerContent = elementData;\r\n        }\r\n    }\r\n});\r\n\r\nfunction handleKeydown(event: KeyboardEvent) {\r\n    if (event.code === 'Enter') {\r\n        // &zwnj;\r\n        document.execCommand('insertHTML', false, '<br>&zwnj;');\r\n        event.preventDefault();\r\n    }\r\n    event.stopPropagation();\r\n}\r\n\r\nfunction click(event: MouseEvent) {\r\n    props.element.runtimeOption.status = 'HANDLE_EDIT_ING';\r\n\r\n    checkInput();\r\n\r\n    moveableEditing();\r\n\r\n    const x = event.clientX;\r\n    const y = event.clientY;\r\n    // @ts-ignore\r\n    const range = document.caretRangeFromPoint(x, y) || document.caretPositionFromPoint(x, y);\r\n\r\n    if (range) {\r\n        const sel = window.getSelection()!;\r\n        sel.removeAllRanges();\r\n        sel.addRange(range);\r\n    }\r\n\r\n    contentRef.value.focus();\r\n}\r\n\r\nfunction handleInput(event: any) {\r\n    // 处理输入事件，更新 content\r\n    props.element.data = br2n(event.target.innerHTML);\r\n    data.innerContent = props.element.data;\r\n}\r\n\r\nwatch(\r\n    () => props.element.runtimeOption.status,\r\n    (n, _o) => {\r\n        if (contentRef.value == undefined) {\r\n            return;\r\n        }\r\n        if (n == 'HANDLE_ED') {\r\n            contentRef.value.addEventListener('dblclick', click);\r\n        } else {\r\n            contentRef.value.removeEventListener('dblclick', click);\r\n        }\r\n    }\r\n);\r\n\r\nwatch(\r\n    () => props.element.data,\r\n    (_n, _o) => {\r\n        if (data.innerContent !== props.element.data) {\r\n            data.content = n2br(props.element.data);\r\n            data.innerContent = data.content;\r\n        }\r\n    }\r\n);\r\n\r\nwatch(\r\n    () => props.element.option.formatter,\r\n    (_n, _o) => {\r\n        const elementData = formatter(props.element);\r\n        if (elementData != null) {\r\n            props.element.data = elementData;\r\n            data.content = n2br(elementData);\r\n            data.innerContent = elementData;\r\n        }\r\n    }\r\n);\r\n\r\nwatch(\r\n    () => props.element.contentType,\r\n    (n, _o) => {\r\n        if (n != 'QrCode') {\r\n            props.element.option.keepRatio = undefined!;\r\n        } else {\r\n            props.element.option.keepRatio = true;\r\n        }\r\n        freshMoveableOption(props.element);\r\n    }\r\n);\r\n</script>\r\n"],"names":[],"mappings":"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"}