ivue-material-plus
Version:
A high quality UI components Library with Vue.js
1 lines • 11.8 kB
Source Map (JSON)
{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-auto-complete/index.vue"],"sourcesContent":["<template>\r\n <ivue-select\r\n :modelValue=\"data.currentValue\"\r\n :placeholder=\"placeholder\"\r\n :disabled=\"disabled\"\r\n :placement=\"placement\"\r\n :transferClassName=\"transferClassName\"\r\n :searchMethod=\"searchMethod\"\r\n :transfer=\"transfer\"\r\n :capture=\"capture\"\r\n :notFindText=\"''\"\r\n :loading=\"loading\"\r\n :loadingText=\"loadingText\"\r\n :id=\"null\"\r\n filterable\r\n auto-complete\r\n ref=\"select\"\r\n @on-select=\"handleSelect\"\r\n @on-clickoutside=\"handleClickOutside\"\r\n >\r\n <!-- input -->\r\n <template #input>\r\n <slot name=\"input\">\r\n <ivue-input\r\n v-model=\"data.currentValue\"\r\n :name=\"name\"\r\n :id=\"inputId\"\r\n :placeholder=\"placeholder\"\r\n :disabled=\"disabled\"\r\n :clearable=\"clearable\"\r\n @on-focus=\"handleFocus\"\r\n @on-blur=\"handleBlur\"\r\n @on-clear=\"handleClear\"\r\n ref=\"input\"\r\n >\r\n <template #prefix v-if=\"$slots.prefix\">\r\n <slot name=\"prefix\"></slot>\r\n </template>\r\n <template #suffix v-if=\"$slots.suffix\">\r\n <slot name=\"suffix\"></slot>\r\n </template>\r\n </ivue-input>\r\n </slot>\r\n </template>\r\n <!-- option -->\r\n <slot>\r\n <ivue-option v-for=\"item in filteredData\" :value=\"item\" :key=\"item\">{{\r\n item\r\n }}</ivue-option>\r\n </slot>\r\n </ivue-select>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n defineComponent,\r\n computed,\r\n reactive,\r\n ref,\r\n watch,\r\n nextTick,\r\n getCurrentInstance,\r\n} from 'vue';\r\nimport IvueSelect from '../ivue-select/index.vue';\r\nimport IvueInput from '../ivue-input/index.vue';\r\nimport IvueOption from '../ivue-select/option.vue';\r\n\r\nimport { oneOf } from '../../utils/assist';\r\nimport { debugWarn } from '../../utils/error';\r\nimport { useFormItem, useFormItemInputId } from '../../hooks';\r\n\r\n// type\r\nimport type { Select, Input, Props, Data, Option } from './types/auto-complete';\r\n\r\nconst prefixCls = 'ivue-auto-complete';\r\n\r\nexport default defineComponent({\r\n name: prefixCls,\r\n emits: [\r\n 'update:modelValue',\r\n 'on-search',\r\n 'on-change',\r\n 'on-select',\r\n 'on-focus',\r\n 'on-blur',\r\n 'on-clear',\r\n ],\r\n props: {\r\n /**\r\n * 设置选择的值\r\n *\r\n * @type {String}\r\n */\r\n modelValue: {\r\n type: String,\r\n default: '',\r\n },\r\n /**\r\n * 输入提示\r\n *\r\n * @type {String}\r\n */\r\n placeholder: {\r\n type: String,\r\n default: '',\r\n },\r\n /**\r\n * 是否禁用\r\n *\r\n * @type {Boolean}\r\n */\r\n disabled: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n /**\r\n * 是否可以清除选择\r\n *\r\n * @type {Boolean}\r\n */\r\n clearable: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n /**\r\n * 弹窗的展开方向\r\n *\r\n * @type {String}\r\n */\r\n placement: {\r\n type: String,\r\n validator(value: string) {\r\n return oneOf(value, [\r\n 'top',\r\n 'bottom',\r\n 'top-start',\r\n 'bottom-start',\r\n 'top-end',\r\n 'bottom-end',\r\n ]);\r\n },\r\n default: 'bottom-start',\r\n },\r\n /**\r\n * 开启 transfer 时，给浮层添加额外的 class 名称\r\n *\r\n * @type {String}\r\n */\r\n transferClassName: {\r\n type: String,\r\n },\r\n /**\r\n * 是否将弹层放置于 body 内，在 Tabs、\r\n * 带有 fixed 的 Table 列内使用时，\r\n * 建议添加此属性，它将不受父级样式影响，\r\n * 从而达到更好的效果\r\n *\r\n * @type {Boolean}\r\n */\r\n transfer: {\r\n type: Boolean,\r\n default() {\r\n const global = getCurrentInstance().appContext.config.globalProperties;\r\n\r\n return !global.$IVUE || global.$IVUE.transfer === ''\r\n ? false\r\n : global.$IVUE.transfer;\r\n },\r\n },\r\n /**\r\n * id\r\n *\r\n * @type {String}\r\n */\r\n id: {\r\n type: String,\r\n },\r\n /**\r\n * 是否开启外部点击的 capture 模式，可通过全局配置\r\n *\r\n * @type {Boolean}\r\n */\r\n capture: {\r\n type: Boolean,\r\n default() {\r\n const global = getCurrentInstance().appContext.config.globalProperties;\r\n return !global.$IVUE ? true : global.$IVUE.capture;\r\n },\r\n },\r\n /**\r\n * 输入框name\r\n *\r\n * @type {String}\r\n */\r\n name: {\r\n type: String,\r\n },\r\n /**\r\n * 自动完成的数据源\r\n *\r\n * @type {Array}\r\n */\r\n list: {\r\n type: Array,\r\n default: () => [],\r\n },\r\n /**\r\n * 外部过滤方法\r\n *\r\n * @type {Function, Boolean}\r\n */\r\n filterMethod: {\r\n type: [Function, Boolean],\r\n default: false,\r\n },\r\n /**\r\n * 远程搜索方法\r\n *\r\n * @type {Function}\r\n */\r\n remoteMethod: {\r\n type: Function,\r\n },\r\n /**\r\n * 加载中\r\n *\r\n * @type {Boolean}\r\n */\r\n loading: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n /**\r\n * 加载中的文字提示\r\n *\r\n * @type {String}\r\n */\r\n loadingText: {\r\n type: String,\r\n default: '',\r\n },\r\n /**\r\n * 输入时是否触发表单的校验\r\n *\r\n * @type {Boolean}\r\n */\r\n validateEvent: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n },\r\n setup(props: Props, { emit }) {\r\n // 设置表单对应的输入框id\r\n const { formItem } = useFormItem();\r\n\r\n // 输入框id\r\n const { inputId } = useFormItemInputId(props, {\r\n formItemContext: formItem,\r\n });\r\n\r\n // dom\r\n\r\n // select\r\n const select = ref<Select>();\r\n // input\r\n const input = ref<Input>();\r\n\r\n // data\r\n const data = reactive<Data>({\r\n /**\r\n * 当前输入值\r\n *\r\n * @type {String}\r\n */\r\n currentValue: props.modelValue,\r\n /**\r\n * 禁用事件改变\r\n *\r\n * @type {Boolean}\r\n */\r\n disableEmitChange: false,\r\n });\r\n\r\n // computed\r\n\r\n // 过滤的数据\r\n const filteredData = computed(() => {\r\n // 是否根据输入项进行筛选\r\n if (props.filterMethod) {\r\n return props.list.filter((item) => {\r\n return props.filterMethod(data.currentValue, item);\r\n });\r\n } else {\r\n return props.list;\r\n }\r\n });\r\n\r\n // methods\r\n\r\n // 搜索方法\r\n const searchMethod = (query: string) => {\r\n emit('on-search', query);\r\n\r\n if (props.remoteMethod) {\r\n props.remoteMethod(query);\r\n }\r\n };\r\n\r\n // 被选中时调用，参数为选中项的 value 值\r\n const handleSelect = (option: Option) => {\r\n const value = option.value;\r\n\r\n if (value === undefined || value === null) {\r\n return;\r\n }\r\n\r\n data.currentValue = `${value}`;\r\n\r\n // blur\r\n input.value.blur();\r\n\r\n emit('on-select', value);\r\n };\r\n\r\n // 点击外部\r\n const handleClickOutside = () => {\r\n nextTick(() => {\r\n // blur\r\n input.value.blur();\r\n });\r\n };\r\n\r\n // 获取焦点\r\n const handleFocus = (event: Event) => {\r\n emit('on-focus', event);\r\n\r\n // 输入时是否触发表单的校验\r\n if (props.validateEvent) {\r\n formItem?.validate?.('focus').catch((err) => debugWarn(err));\r\n }\r\n };\r\n\r\n // 失去焦点\r\n const handleBlur = (event: Event) => {\r\n emit('on-blur', event);\r\n\r\n // 输入时是否触发表单的校验\r\n if (props.validateEvent) {\r\n formItem?.validate?.('focus').catch((err) => debugWarn(err));\r\n }\r\n };\r\n\r\n // 清空时触发\r\n const handleClear = () => {\r\n emit('on-clear');\r\n };\r\n\r\n // watch\r\n\r\n // 监听设置选择的值\r\n watch(\r\n () => props.modelValue,\r\n (value) => {\r\n // 当前输入值不相等\r\n if (data.currentValue !== value) {\r\n data.disableEmitChange = true;\r\n }\r\n\r\n data.currentValue = value;\r\n\r\n // 输入时是否触发表单的校验\r\n if (props.validateEvent) {\r\n formItem?.validate?.('change').catch((err) => debugWarn(err));\r\n }\r\n }\r\n );\r\n\r\n // 监听当前输入值\r\n watch(\r\n () => data.currentValue,\r\n (value) => {\r\n select.value.setQuery(value);\r\n\r\n emit('update:modelValue', value);\r\n\r\n // 防止触发多次\r\n if (data.disableEmitChange) {\r\n data.disableEmitChange = false;\r\n\r\n return;\r\n }\r\n\r\n emit('on-change', value);\r\n }\r\n );\r\n\r\n return {\r\n // dom\r\n select,\r\n input,\r\n\r\n // data\r\n data,\r\n inputId,\r\n\r\n filteredData,\r\n\r\n // methods\r\n searchMethod,\r\n handleSelect,\r\n handleClickOutside,\r\n handleFocus,\r\n handleBlur,\r\n handleClear,\r\n };\r\n },\r\n components: {\r\n IvueSelect,\r\n IvueInput,\r\n IvueOption,\r\n },\r\n});\r\n</script>\r\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_renderSlot","_createVNode","_createSlots","_createElementBlock","_Fragment","_renderList"],"mappings":";;;;;;;iCACEA,iBAiDc,aAAA,CAAA,CAAA;AA/CX,EAAA,OAAAC,SAAA,EAAwB,EAAAC,WAAA,CAAA,sBAAA,EAAA;AAAA,IACxB,UAAA,EAAU,KAAA,IAAA,CAAA,YAAA;AAAA,IACV,aAAW,IAAA,CAAA,WAAA;AAAA,IACX,UAAA,IAAA,CAAA,QAAA;AAAA,IACA,WAAc,IAAA,CAAA,SAAA;AAAA,IACd,mBAAU,IAAQ,CAAA,iBAAA;AAAA,IAClB,cAAS,IAAA,CAAA,YAAA;AAAA,IACT,UAAe,IAAA,CAAA,QAAA;AAAA,IACf,SAAS,IAAA,CAAA,OAAA;AAAA,IACT,WAAa,EAAA,EAAA;AAAA,IACb,SAAQ,IAAA,CAAA,OAAA;AAAA,IACT,aAAU,IAAA,CAAA,WAAA;AAAA,IACV,EAAA,EAAA,IAAA;AAAA,IACA,UAAI,EAAA,EAAA;AAAA,IACH,eAAW,EAAA,EAAA;AAAA,IACX,GAAA,EAAA,QAAA;AAAA,IAAA,YAAA,IAAA,CAAA,YAAA;AAAA,IAGU,kBAqBF,IAAA,CAAA,kBAAA;AAAA,GAAA,EAAA;AAAA,WAnBLC,QAkBa,MAAA;AAAA,MAjBFC,WAAA,IAAA,CAAA,MAAA,EAAI,OAAC,EAAA,IAAY,MAAA;AAAA,QAAAC,YAAA,qBAAA,EAAA;AAAA,UACzB,UAAA,EAAM,KAAI,IAAA,CAAA,YAAA;AAAA,UACV,qBAAA,EAAW,OAAA,CAAA,CAAA,KAAA,MAAA,CAAA,KAAA,CAAA,MAAA,KAAA,IAAA,CAAA,IAAA,CAAA,YAAA,GAAA,MAAA,CAAA;AAAA,UACX,MAAW,IAAA,CAAA,IAAA;AAAA,UACX,IAAQ,IAAA,CAAA,OAAA;AAAA,UACR,aAAW,IAAA,CAAA,WAAA;AAAA,UACX,UAAQ,IAAE,CAAA,QAAA;AAAA,UACV,WAAS,IAAA,CAAA,SAAA;AAAA,UACT,WAAU,IAAA,CAAA,WAAA;AAAA,UACX,UAAI,IAAO,CAAA,UAAA;AAAA,UAAA,WAAA,IAAA,CAAA,WAAA;AAAA,UAEa,GAAA,EAAA,OAAA;AAAA,SAAA,EAAAC,WAAA,CAAA,EAAA,CAAA,EAAA,GAAA,EAAA;AAAA,UAAb,IAAA,CAAA,OAAA,MAAA,GAAA;AAAA,YACT,IAAA,EAAA,QAAA;AAAA,YAAA,EAAA,EAAAH,QAAA,MAAA;AAAA;;;WAEsB,GAAA,KAAA,CAAA;AAAA,UAAb,IAAA,CAAA,OAAA,MAAA,GAAA;AAAA,YACT,IAAA,EAAA,QAAA;AAAA,YAAA,EAAA,EAAAA,QAAA,MAAA;AAAA;;;;;;;IAON,OAAA,EAAAA,QAAA,MAAA;AAAA,MAEgBC,WAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,IAAA,MAAA;AAAA,SAAAH,SAAA,CAFkC,IAAI,CAAA,EAAAM,kBAAA,CAAAC,QAAA,EAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,YAAA,EAAA,CAAA,IAAA,KAAA;UAAQ,OAAAR,SAAA,EAAI,EAAAC,WAAA,CAAA,sBAAA,EAAA;AAAA,YAAA,KAAA,EAAA,IAAA;AAAA;;;;;;;;;;;;;;;;;"}