Skip to content

Commit

Permalink
refactor(baInput):合并 props.attr 和 props.data
Browse files Browse the repository at this point in the history
  • Loading branch information
@build-admin
build-admin committed Jun 26, 2024
1 parent 7db6514 commit 4fd58be
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 43 deletions.
2 changes: 1 addition & 1 deletion web/src/components/baInput/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export interface InputData {
* input可用属性,用于代码提示,渲染不同输入组件时,需要的属性是不一样的
* https://element-plus.org/zh-CN/component/input.html#input-属性
*/
export interface InputAttr {
export interface InputAttr extends InputData {
id?: string
name?: string
type?: string
Expand Down
72 changes: 39 additions & 33 deletions web/src/components/baInput/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<script lang="ts">
import { isArray } from 'lodash-es'
import type { PropType, VNode } from 'vue'
import type { modelValueTypes, InputAttr, InputData } from '/@/components/baInput'
import { createVNode, resolveComponent, defineComponent, computed, reactive } from 'vue'
import { computed, createVNode, defineComponent, reactive, resolveComponent } from 'vue'
import { getArea } from '/@/api/common'
import type { InputAttr, InputData, modelValueTypes } from '/@/components/baInput'
import { inputTypes } from '/@/components/baInput'
import Array from '/@/components/baInput/components/array.vue'
import RemoteSelect from '/@/components/baInput/components/remoteSelect.vue'
import IconSelector from '/@/components/baInput/components/iconSelector.vue'
import Editor from '/@/components/baInput/components/editor.vue'
import BaUpload from '/@/components/baInput/components/baUpload.vue'
import { getArea } from '/@/api/common'
import { isArray } from 'lodash-es'
import Editor from '/@/components/baInput/components/editor.vue'
import IconSelector from '/@/components/baInput/components/iconSelector.vue'
import RemoteSelect from '/@/components/baInput/components/remoteSelect.vue'
export default defineComponent({
name: 'baInput',
Expand Down Expand Up @@ -40,46 +40,52 @@ export default defineComponent({
},
emits: ['update:modelValue'],
setup(props, { emit }) {
// 合并 props.attr 和 props.data
const attrs = { ...props.attr, ...props.data }
// 通用值更新函数
const onValueUpdate = (value: modelValueTypes) => {
emit('update:modelValue', value)
}
// 子级元素属性
let childrenAttr = props.data && props.data.childrenAttr ? props.data.childrenAttr : {}
const childrenAttr = attrs.childrenAttr ? attrs.childrenAttr : {}
// string number textarea password
const sntp = () => {
return () =>
createVNode(resolveComponent('el-input'), {
type: props.type == 'string' ? 'text' : props.type,
...props.attr,
...attrs,
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
})
}
// radio checkbox
const rc = () => {
if (!props.data || !props.data.content) {
if (!attrs.content) {
console.warn('请传递 ' + props.type + ' 的 content')
}
let vNode: VNode[] = []
const contentIsArray = isArray(props.data.content)
const type = props.attr.button ? props.type + '-button' : props.type
for (const key in props.data.content) {
const contentIsArray = isArray(attrs.content)
const type = attrs.button ? props.type + '-button' : props.type
for (const key in attrs.content) {
let nodeProps = {}
if (contentIsArray) {
if (typeof props.data.content[key].value == 'number') {
if (typeof attrs.content[key].value == 'number') {
console.warn(props.type + ' 的 content.value 不能是数字')
}
nodeProps = {
...props.data.content[key],
...attrs.content[key],
border: attrs.border ? attrs.border : false,
...childrenAttr,
}
} else {
nodeProps = {
value: key,
label: props.data.content[key],
label: attrs.content[key],
border: attrs.border ? attrs.border : false,
...childrenAttr,
}
}
Expand All @@ -101,7 +107,7 @@ export default defineComponent({
return createVNode(
resolveComponent('el-' + props.type + '-group'),
{
...props.attr,
...attrs,
modelValue: valueComputed.value,
'onUpdate:modelValue': onValueUpdate,
},
Expand All @@ -112,14 +118,14 @@ export default defineComponent({
// select selects
const select = () => {
let vNode: VNode[] = []
if (!props.data || !props.data.content) {
if (!attrs.content) {
console.warn('请传递 ' + props.type + '的 content')
}
for (const key in props.data.content) {
for (const key in attrs.content) {
vNode.push(
createVNode(resolveComponent('el-option'), {
key: key,
label: props.data.content[key],
label: attrs.content[key],
value: key,
...childrenAttr,
})
Expand All @@ -144,7 +150,7 @@ export default defineComponent({
class: 'w100',
multiple: props.type == 'select' ? false : true,
clearable: true,
...props.attr,
...attrs,
modelValue: valueComputed.value,
'onUpdate:modelValue': onValueUpdate,
},
Expand All @@ -168,7 +174,7 @@ export default defineComponent({
class: 'w100',
type: props.type,
'value-format': valueFormat,
...props.attr,
...attrs,
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
})
Expand All @@ -180,7 +186,7 @@ export default defineComponent({
type: props.type,
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
...props.attr,
...attrs,
})
}
Expand All @@ -191,7 +197,7 @@ export default defineComponent({
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
multiple: props.type == 'remoteSelect' ? false : true,
...props.attr,
...attrs,
})
}
Expand All @@ -216,7 +222,7 @@ export default defineComponent({
})
return () =>
createVNode(resolveComponent('el-switch'), {
...props.attr,
...attrs,
modelValue: valueComputed.value,
'onUpdate:modelValue': (value: boolean) => {
let newValue: boolean | string | number = value
Expand All @@ -242,7 +248,7 @@ export default defineComponent({
class: 'w100',
type: props.type,
'value-format': 'YYYY',
...props.attr,
...attrs,
modelValue: valueComputed.value,
'onUpdate:modelValue': onValueUpdate,
})
Expand All @@ -268,7 +274,7 @@ export default defineComponent({
class: 'w100',
clearable: true,
format: 'HH:mm:ss',
...props.attr,
...attrs,
modelValue: valueComputed.value,
'onUpdate:modelValue': onValueUpdate,
})
Expand All @@ -283,7 +289,7 @@ export default defineComponent({
createVNode(Array, {
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
...props.attr,
...attrs,
})
},
],
Expand All @@ -293,7 +299,7 @@ export default defineComponent({
'city',
() => {
type Node = { value?: number; label?: string; leaf?: boolean }
let maxLevel = props.data && props.data.level ? props.data.level - 1 : 2
let maxLevel = attrs.level ? attrs.level - 1 : 2
const lastLazyValue: {
value: string | number[] | unknown
nodes: Node[]
Expand Down Expand Up @@ -370,7 +376,7 @@ export default defineComponent({
})
},
},
...props.attr,
...attrs,
})
},
],
Expand All @@ -385,7 +391,7 @@ export default defineComponent({
createVNode(IconSelector, {
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
...props.attr,
...attrs,
})
},
],
Expand All @@ -396,7 +402,7 @@ export default defineComponent({
createVNode(resolveComponent('el-color-picker'), {
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
...props.attr,
...attrs,
})
},
],
Expand All @@ -408,7 +414,7 @@ export default defineComponent({
class: 'w100',
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
...props.attr,
...attrs,
})
},
],
Expand Down
18 changes: 9 additions & 9 deletions web/src/components/formItem/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,25 +27,26 @@ export default defineComponent({
type: Object as PropType<InputAttr>,
default: () => {},
},
// el-form-item 的附加属性(还可以直接通过当前组件的 props 传递)
blockHelp: {
type: String,
default: '',
},
tip: [String, Object],
// el-form-item 的附加属性（还可以直接通过当前组件的 props 传递）
attr: {
type: Object as PropType<FormItemAttr>,
default: () => {},
},
// 额外数据
// 额外数据（已和 props.inputAttr 合并，还可以通过它进行传递）
data: {
type: Object as PropType<InputData>,
default: () => {},
},
// 内部输入框的 placeholder（相当于 props.inputAttr.placeholder 的别名）
placeholder: {
type: String,
default: '',
},
blockHelp: {
type: String,
default: '',
},
tip: [String, Object],
...formItemProps,
},
emits: ['update:modelValue'],
Expand All @@ -69,8 +70,7 @@ export default defineComponent({
slots.default = () => {
let inputNode = createVNode(BaInput, {
type: props.type,
attr: { placeholder: props.placeholder, ...props.inputAttr },
data: props.data,
attr: { placeholder: props.placeholder, ...props.inputAttr, ...props.data },
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
})
Expand Down

0 comments on commit 4fd58be

Please sign in to comment.