UNPKG

label-print-design

Version:

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

1 lines 4.68 kB
{"version":3,"file":"my-input.vue2.mjs","sources":["../../../../../../src/components/my/input/my-input.vue"],"sourcesContent":["<template>\n <textarea v-if=\"type == 'textarea'\"\n ref=\"textareaRef\"\n :disabled=\"disabled\"\n :placeholder=\"placeholder\"\n @blur=\"inputBlur\"\n @focus=\"inputFocus\"\n @input=\"onInput\"\n @change=\"onChange\"\n :class=\"[{'is-focus': data.focusIs, 'is-disabled': disabled}]\"\n class=\"my-textarea__inner\" />\n \n <div v-else class=\"my-input display-flex\">\n <div class=\"my-input__wrapper\"\n :class=\"[{'is-focus': data.focusIs, 'is-disabled': disabled}]\"\n @click=\"clickWrapper\">\n <input class=\"my-input__inner\"\n ref=\"inputRef\"\n :disabled=\"disabled\"\n @blur=\"inputBlur\"\n @focus=\"inputFocus\"\n :placeholder=\"placeholder\"\n @input=\"onInput\"\n @change=\"onChange\" />\n </div>\n </div>\n\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, onMounted, reactive, ref, watch } from 'vue-demi';\nimport { isNil } from 'lodash';\n\nconst emit = defineEmits(['update:modelValue', 'change', 'input']);\n\nconst inputRef = ref<HTMLInputElement>(null!);\nconst textareaRef = ref<HTMLInputElement>(null!);\n\nconst props = withDefaults(defineProps<{\n modelValue: string | number | null | undefined,\n placeholder?: string,\n type?: string,\n disabled?: boolean,\n}>(), {\n type: 'input',\n disabled: false\n});\nonMounted(() => {\n setNativeInputValue();\n});\n\nconst myInputRef = computed(() => {\n return inputRef.value ? inputRef.value : textareaRef.value;\n});\n\nconst nativeInputValue = computed(() =>\n isNil(props.modelValue) ? '' : String(props.modelValue)\n);\n\nwatch(nativeInputValue, () => setNativeInputValue());\n\nfunction setNativeInputValue() {\n if (!myInputRef.value || myInputRef.value.value === nativeInputValue.value) return;\n \n myInputRef.value.value = nativeInputValue.value;\n}\n\nconst data = reactive({\n focusIs: false\n});\n\nfunction inputBlur() {\n data.focusIs = false;\n}\n\nfunction inputFocus() {\n if (props.disabled) {\n return;\n }\n data.focusIs = true;\n}\n\nasync function onInput(e: InputEvent) {\n emit('update:modelValue', (e.target as HTMLInputElement).value);\n emit('input', (e.target as HTMLInputElement).value);\n await nextTick();\n setNativeInputValue();\n}\n\nfunction onChange(e: InputEvent) {\n emit('update:modelValue', (e.target as HTMLInputElement).value);\n emit('change', (e.target as HTMLInputElement).value);\n}\n\nfunction clickWrapper() {\n if (props.disabled) {\n return;\n }\n data.focusIs = true;\n myInputRef.value!.focus();\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAiCA,IAAA,MAAM,IAAO,GAAA,MAAA,CAAA;AAEb,IAAM,MAAA,QAAA,GAAW,IAAsB,IAAK,CAAA,CAAA;AAC5C,IAAM,MAAA,WAAA,GAAc,IAAsB,IAAK,CAAA,CAAA;AAE/C,IAAA,MAAM,KAAQ,GAAA,OAAA,CAAA;AASd,IAAA,SAAA,CAAU,MAAM;AACZ,MAAoB,mBAAA,EAAA,CAAA;AAAA,KACvB,CAAA,CAAA;AAED,IAAM,MAAA,UAAA,GAAa,SAAS,MAAM;AAC9B,MAAA,OAAO,QAAS,CAAA,KAAA,GAAQ,QAAS,CAAA,KAAA,GAAQ,WAAY,CAAA,KAAA,CAAA;AAAA,KACxD,CAAA,CAAA;AAED,IAAA,MAAM,gBAAmB,GAAA,QAAA;AAAA,MAAS,MAC9B,MAAM,KAAM,CAAA,UAAU,IAAI,EAAK,GAAA,MAAA,CAAO,MAAM,UAAU,CAAA;AAAA,KAC1D,CAAA;AAEA,IAAM,KAAA,CAAA,gBAAA,EAAkB,MAAM,mBAAA,EAAqB,CAAA,CAAA;AAEnD,IAAA,SAAS,mBAAsB,GAAA;AAC3B,MAAA,IAAI,CAAC,UAAW,CAAA,KAAA,IAAS,WAAW,KAAM,CAAA,KAAA,KAAU,iBAAiB,KAAO,EAAA,OAAA;AAE5E,MAAW,UAAA,CAAA,KAAA,CAAM,QAAQ,gBAAiB,CAAA,KAAA,CAAA;AAAA,KAC9C;AAEA,IAAA,MAAM,OAAO,QAAS,CAAA;AAAA,MAClB,OAAS,EAAA,KAAA;AAAA,KACZ,CAAA,CAAA;AAED,IAAA,SAAS,SAAY,GAAA;AACjB,MAAA,IAAA,CAAK,OAAU,GAAA,KAAA,CAAA;AAAA,KACnB;AAEA,IAAA,SAAS,UAAa,GAAA;AAClB,MAAA,IAAI,MAAM,QAAU,EAAA;AAChB,QAAA,OAAA;AAAA,OACJ;AACA,MAAA,IAAA,CAAK,OAAU,GAAA,IAAA,CAAA;AAAA,KACnB;AAEA,IAAA,eAAe,QAAQ,CAAe,EAAA;AAClC,MAAK,IAAA,CAAA,mBAAA,EAAsB,CAAE,CAAA,MAAA,CAA4B,KAAK,CAAA,CAAA;AAC9D,MAAK,IAAA,CAAA,OAAA,EAAU,CAAE,CAAA,MAAA,CAA4B,KAAK,CAAA,CAAA;AAClD,MAAA,MAAM,QAAS,EAAA,CAAA;AACf,MAAoB,mBAAA,EAAA,CAAA;AAAA,KACxB;AAEA,IAAA,SAAS,SAAS,CAAe,EAAA;AAC7B,MAAK,IAAA,CAAA,mBAAA,EAAsB,CAAE,CAAA,MAAA,CAA4B,KAAK,CAAA,CAAA;AAC9D,MAAK,IAAA,CAAA,QAAA,EAAW,CAAE,CAAA,MAAA,CAA4B,KAAK,CAAA,CAAA;AAAA,KACvD;AAEA,IAAA,SAAS,YAAe,GAAA;AACpB,MAAA,IAAI,MAAM,QAAU,EAAA;AAChB,QAAA,OAAA;AAAA,OACJ;AACA,MAAA,IAAA,CAAK,OAAU,GAAA,IAAA,CAAA;AACf,MAAA,UAAA,CAAW,MAAO,KAAM,EAAA,CAAA;AAAA,KAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}