label-print-design
Version:
操作简单,组件丰富的一站式打印解决方案打印设计器
1 lines • 4.55 kB
Source Map (JSON)
{"version":3,"file":"my-select.vue2.mjs","sources":["../../../../../../src/components/my/select/my-select.vue"],"sourcesContent":["<template>\n <my-popover\n trigger=\"click\"\n ref=\"popoverRef\"\n :disabled=\"disabled\"\n placement=\"bottom\">\n <template #reference>\n <div class=\"display-flex my-select\" :class=\"[{'my-icon-disabled': disabled,\n 'my-select-middle': size== 'middle'\n }, 'my-color-icon']\">\n <div class=\"my-select-input\" :class=\"{\n 'my-select-input_placeholder': isNull(modelValue)\n }\">\n {{ isNull(modelValue) ? placeholder : data.label }}\n </div>\n <my-icon class=\"my-select-arrow my-style-font_arrow icon-jt-x iconfont my-icon-downList-arrow\"\n :focusBk=\"false\"\n :class=\"[{\n 'my-select-arrow-middle': size== 'middle'\n }]\"\n :size=\"8\"\n :disabled=\"disabled\">\n </my-icon>\n </div>\n </template>\n <my-scrollbar :height=\"height\">\n <element-align :model-value=\"modelValue\"\n showSelectedStatus\n :elementAlignList=\"dataList\"\n @change=\"change\" />\n </my-scrollbar>\n </my-popover>\n\n</template>\n\n<script setup lang=\"ts\">\nimport ElementAlign from '@myprint/design/components/content/toolbar/toolbar-style/element-align.vue';\nimport MyScrollbar from '@myprint/design/components/my/scrollbar/my-scrollbar.vue';\nimport MyPopover from '@myprint/design/components/my/popover/my-popover.vue';\nimport MyIcon from '@myprint/design/components/my/icon/my-icon.vue';\nimport { isEmpty, isNull } from 'lodash';\nimport { reactive, ref, watch } from 'vue-demi';\nimport { i18n } from '@myprint/design/locales';\n\nconst emit = defineEmits(['update:modelValue', 'change']);\n\nconst props = withDefaults(defineProps<{\n disabled?: boolean,\n showSelectedStatus?: boolean,\n modelValue: string | number | null | undefined,\n dataList: any[],\n height?: string,\n size?: 'small' | 'middle',\n placeholder?: string,\n }>(),\n {\n disabled: false,\n showSelectedStatus: false,\n height: '270px',\n size: 'small',\n placeholder: i18n('common.place.select')\n });\n\nconst data = reactive({\n label: ''\n});\nconst popoverRef = ref<InstanceType<typeof MyPopover>>();\nwatch(() => props.modelValue, (newVal, _oldVal) => {\n if (isEmpty(newVal)) {\n data.label = '';\n return;\n }\n for (let itemList of props.dataList) {\n if (itemList instanceof Array) {\n for (let item of itemList) {\n if (props.modelValue == item.value) {\n data.label = item.label;\n }\n }\n } else {\n if (props.modelValue == itemList.value) {\n data.label = itemList.label;\n }\n }\n }\n}, { immediate: true });\n\nfunction change(val: any) {\n emit('update:modelValue', val.value);\n emit('change', val.value);\n data.label = val.label;\n popoverRef.value!.close();\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA4CA,IAAA,MAAM,IAAO,GAAA,MAAA,CAAA;AAEb,IAAA,MAAM,KAAQ,GAAA,OAAA,CAAA;AAiBd,IAAA,MAAM,OAAO,QAAS,CAAA;AAAA,MAClB,KAAO,EAAA,EAAA;AAAA,KACV,CAAA,CAAA;AACD,IAAA,MAAM,aAAa,GAAoC,EAAA,CAAA;AACvD,IAAA,KAAA,CAAM,MAAM,KAAA,CAAM,UAAY,EAAA,CAAC,QAAQ,OAAY,KAAA;AAC/C,MAAI,IAAA,OAAA,CAAQ,MAAM,CAAG,EAAA;AACjB,QAAA,IAAA,CAAK,KAAQ,GAAA,EAAA,CAAA;AACb,QAAA,OAAA;AAAA,OACJ;AACA,MAAS,KAAA,IAAA,QAAA,IAAY,MAAM,QAAU,EAAA;AACjC,QAAA,IAAI,oBAAoB,KAAO,EAAA;AAC3B,UAAA,KAAA,IAAS,QAAQ,QAAU,EAAA;AACvB,YAAI,IAAA,KAAA,CAAM,UAAc,IAAA,IAAA,CAAK,KAAO,EAAA;AAChC,cAAA,IAAA,CAAK,QAAQ,IAAK,CAAA,KAAA,CAAA;AAAA,aACtB;AAAA,WACJ;AAAA,SACG,MAAA;AACH,UAAI,IAAA,KAAA,CAAM,UAAc,IAAA,QAAA,CAAS,KAAO,EAAA;AACpC,YAAA,IAAA,CAAK,QAAQ,QAAS,CAAA,KAAA,CAAA;AAAA,WAC1B;AAAA,SACJ;AAAA,OACJ;AAAA,KACD,EAAA,EAAE,SAAW,EAAA,IAAA,EAAM,CAAA,CAAA;AAEtB,IAAA,SAAS,OAAO,GAAU,EAAA;AACtB,MAAK,IAAA,CAAA,mBAAA,EAAqB,IAAI,KAAK,CAAA,CAAA;AACnC,MAAK,IAAA,CAAA,QAAA,EAAU,IAAI,KAAK,CAAA,CAAA;AACxB,MAAA,IAAA,CAAK,QAAQ,GAAI,CAAA,KAAA,CAAA;AACjB,MAAA,UAAA,CAAW,MAAO,KAAM,EAAA,CAAA;AAAA,KAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}