song-ui-u
Version:
vue3 + js的PC前端组件库
1 lines • 11.8 kB
Source Map (JSON)
{"version":3,"file":"index.vue.mjs","sources":["../../../../../packages/components/input/src/index.vue"],"sourcesContent":["<template>\n <div\n :style=\"[styleWidth]\"\n :class=\"[\n ns.b(),\n ns.is('focus', isFocus),\n ns.is('disabled', disabled),\n ns.m('size', controlSize),\n ns.is('round', round),\n ]\"\n @mouseenter=\"mouseenterEvent\"\n @mouseleave=\"mouselevelEvent\"\n >\n <!-- 前置 -->\n <div v-if=\"isPrepend\" :class=\"[ns.e('aside-wrapper')]\">\n <div\n :class=\"[\n ns.e('prepend'),\n (prepend || append || isPrepend || isAppend) && ns.e('aside'),\n ]\"\n >\n <slot v-if=\"$slots.prepend\" name=\"prepend\" />\n <div v-if=\"prepend\">{{ prepend }}</div>\n </div>\n </div>\n <div\n :class=\"[\n ns.e('wrapper'),\n ns.is('aside-prepend', isPrepend),\n ns.is('aside-append', isAppend),\n ]\"\n >\n <!-- 前缀 -->\n <div v-if=\"isPrefix\" :class=\"[ns.e('fix-wrapper')]\">\n <div :class=\"[ns.e('fix'), ns.e('prefix')]\">\n <span v-if=\"prefix\">{{ prefix }}</span>\n <x-icon v-if=\"prefixIcon\"><component :is=\"prefixIcon\" /></x-icon>\n <x-icon v-if=\"prefixIconfont\"\n ><i class=\"iconfont\" :class=\"prefixIconfont\"></i\n ></x-icon>\n </div>\n </div>\n <input\n ref=\"_ref\"\n @input=\"handlerInput\"\n @focus=\"focusEvent\"\n @blur=\"blurEvent\"\n @compositionstart=\"compositionStartEvent\"\n @compositionupdate=\"compositionUpdateEvent\"\n @compositionend=\"handlerCompositionEnd\"\n @change=\"changeEvent\"\n @keydown=\"keydownEvent\"\n @keyup=\"keyupEvent\"\n :value=\"modelValue\"\n :type=\"showPassword ? (passwordVisible ? 'text' : 'password') : type\"\n :disabled=\"disabled\"\n :class=\"[ns.e('inner'), ns.is('color-danger', isColorError)]\"\n :placeholder=\"placeholder\"\n :maxlength=\"maxlength\"\n />\n <!-- 后缀 -->\n <div v-if=\"isSuffix\" :class=\"[ns.e('fix-wrapper')]\">\n <div :class=\"[ns.e('fix'), ns.e('suffix')]\">\n <template v-if=\"!showPassword || !showClear || !showLimit\">\n <span v-if=\"suffix\">{{ suffix }}</span>\n <x-icon v-if=\"suffixIcon\"><component :is=\"suffixIcon\" /></x-icon>\n <x-icon v-if=\"suffixIconfont\">\n <i class=\"iconfont\" :class=\"suffixIconfont\"></i>\n </x-icon>\n </template>\n <x-icon\n v-if=\"showPassword\"\n class=\"pointer\"\n @click=\"passwordVisible = !passwordVisible\"\n >\n <component :is=\"passwordIcon\" />\n </x-icon>\n <x-icon v-if=\"showClear\" class=\"pointer\" @click=\"handlerClear\">\n <component :is=\"XCircleFill\" />\n </x-icon>\n <div v-if=\"showLimit\" :class=\"[ns.e('count')]\">\n {{ valueLength }} / {{ maxlength }}\n </div>\n </div>\n </div>\n </div>\n <!-- 后置 -->\n <div v-if=\"isAppend\" :class=\"[ns.e('aside-wrapper')]\">\n <div\n :class=\"[\n ns.e('append'),\n (prepend || append || isPrepend || isAppend) && ns.e('aside'),\n ]\"\n >\n <slot v-if=\"$slots.append\" name=\"append\" />\n <div v-if=\"append\">{{ append }}</div>\n </div>\n </div>\n </div>\n</template>\n<script>\nexport default { name: \"x-input\" };\n</script>\n<script setup>\nimport { ref, computed, useSlots, shallowRef, watch } from \"vue\";\nimport { useNamespace, useStyle, useEvent, useExpose } from \"@ui-library/hook\";\nimport { XIcon, useFormItem } from \"@ui-library/components\";\nimport { XCircleFill, Eye, EyeOff } from \"song-ui-pro-icon\";\n// useFormItem\nconst { formContent, formItemContent } = useFormItem();\n// input\nconst _ref = shallowRef(null);\nconst { focusExpose, blurExpose, selectExpose } = useExpose(_ref);\nconst ns = useNamespace(\"input\");\nconst slots = useSlots();\n// event\nconst {\n isFocus,\n isBlur,\n isHover,\n isComposition,\n focusEvent,\n blurEvent,\n mouseenterEvent,\n mouselevelEvent,\n compositionStartEvent,\n compositionUpdateEvent,\n compositionEndEvent,\n changeEvent,\n keydownEvent,\n keyupEvent,\n} = useEvent({\n // 失焦后\n afterBlur() {\n props.validateEvent && formItemContent?.validate(\"blur\");\n },\n});\n// style\nconst uStyle = useStyle();\n// defineModel\nlet modelValue = defineModel();\n// emits\nconst emit = defineEmits([\n \"input\",\n \"clear\",\n \"focus\",\n \"blur\",\n \"mouseenter\",\n \"mouselevel\",\n \"compositionstart\",\n \"compositionupdate\",\n \"compositionend\",\n \"change\",\n \"keydown\",\n \"keyup\",\n]);\n/** props */\nconst props = defineProps({\n type: {\n type: String,\n default: \"text\",\n },\n placeholder: {\n type: String,\n default: \"请输入\",\n },\n maxlength: {\n type: String,\n default: \"\",\n },\n size: {\n type: String,\n default: \"\",\n },\n width: {\n type: String,\n default: \"\",\n },\n disabled: Boolean, // 禁用\n round: Boolean, // 圆角\n showPassword: Boolean, // 密码\n clearance: Boolean, // 清除\n count: Boolean, // 统计\n prefixIcon: {\n type: [String, Object],\n default: \"\",\n },\n suffixIcon: {\n type: [String, Object],\n default: \"\",\n },\n prepend: {\n type: String,\n default: \"\",\n },\n append: {\n type: String,\n default: \"\",\n },\n prefixIconfont: {\n type: String,\n default: \"\",\n },\n suffixIconfont: {\n type: String,\n default: \"\",\n },\n prefix: {\n type: String,\n default: \"\",\n },\n suffix: {\n type: String,\n default: \"\",\n },\n validateEvent: {\n type: Boolean,\n default: true,\n },\n});\nconst styleWidth = computed(() => uStyle.width(props.width));\n// ref\nconst passwordVisible = ref(false);\n// passwordIcon\nconst passwordIcon = computed(() => {\n return passwordVisible.value ? Eye : EyeOff;\n});\n// clearIcon\nconst showClear = computed(() => {\n return (\n props.clearance &&\n modelValue.value &&\n !props.disabled &&\n props.type === \"text\"\n );\n});\n// showLimit\nconst showLimit = computed(\n () => props.count && !props.disabled && props.maxlength\n);\n// 文本长度\nconst valueLength = computed(() => modelValue.value.length);\nconst isColorError = computed(() => {\n return props.maxlength && props.count && valueLength.value > props.maxlength;\n});\n// 是否有前置、后置内容\nconst isAside = computed(() => {\n return isPrepend.value || isAppend.value;\n});\n// 前置内容\nconst isPrepend = computed(() => {\n return slots.prepend || props.prepend;\n});\n// 后置内容\nconst isAppend = computed(() => {\n return slots.append || props.append;\n});\nconst isPrefix = computed(() => {\n return props.prefixIcon || props.prefixIconfont || props.prefix;\n});\nconst isSuffix = computed(() => {\n return (\n props.suffixIcon ||\n props.suffixIconfont ||\n props.suffix ||\n props.showPassword ||\n showClear.value ||\n showLimit.value\n );\n});\nconst controlSize = computed(() => formContent?.size?.value || props?.size);\n\nconst handlerCompositionEnd = (e) => {\n compositionEndEvent(e).then(() => {\n handlerInput(e);\n });\n};\n\nconst handlerInput = (e) => {\n const value = e.target.value;\n modelValue.value = value;\n // emit input\n emit(\"input\", value, e);\n};\n\n// 清除\nconst handlerClear = () => {\n modelValue.value = \"\";\n emit(\"input\", \"\");\n emit(\"clear\");\n focusExpose();\n};\n\nwatch(\n () => modelValue.value,\n () => {\n props.validateEvent && formItemContent?.validate(\"change\");\n }\n);\n\ndefineExpose({\n ref: _ref, // 输入框对象\n focus: focusExpose,\n blur: blurExpose,\n select: selectExpose,\n clear: handlerClear,\n});\n</script>\n"],"names":["_useModel"],"mappings":"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"}