Skip to content

Commit

Permalink
fix(baInput):修复输入组件属性失去了响应性的问题
Browse files Browse the repository at this point in the history
  • Loading branch information
@build-admin
build-admin committed Jun 29, 2024
1 parent 58fd2a2 commit e43b95f
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 71 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 @@ -33,7 +33,7 @@ export const inputTypes = [
export type ModelValueTypes = string | number | boolean | object

export interface InputData {
// 内容,比如radio的选项列表数据,格式为对象或者数组：{ a: '选项1', b: '选项2' } or [{value: 1, label: 2, disabled: false}, {...}]
// 内容,比如radio的选项列表数据,格式为对象或者数组：{ a: '选项1', b: '选项2' } or [{value: '1', label: 2, disabled: false}, {...}]
content?: any
// 需要生成子级元素时,子级元素属性(比如radio)
childrenAttr?: anyObj
Expand Down
123 changes: 66 additions & 57 deletions web/src/components/baInput/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,56 +41,60 @@ export default defineComponent({
emits: ['update:modelValue'],
setup(props, { emit }) {
// 合并 props.attr 和 props.data
const attrs = { ...props.attr, ...props.data }
const attrs = computed(() => {
return { ...props.attr, ...props.data }
})
// 通用值更新函数
const onValueUpdate = (value: ModelValueTypes) => {
emit('update:modelValue', value)
}
// 子级元素属性
const childrenAttr = attrs.childrenAttr ? attrs.childrenAttr : {}
// string number textarea password
const sntp = () => {
return () =>
createVNode(resolveComponent('el-input'), {
type: props.type == 'string' ? 'text' : props.type,
...attrs,
...attrs.value,
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
})
}
// radio checkbox
const rc = () => {
if (!attrs.content) {
if (!attrs.value.content) {
console.warn('请传递 ' + props.type + ' 的 content')
}
let vNode: VNode[] = []
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 attrs.content[key].value == 'number') {
console.warn(props.type + ' 的 content.value 不能是数字')
}
nodeProps = {
...attrs.content[key],
border: attrs.border ? attrs.border : false,
...childrenAttr,
}
} else {
nodeProps = {
value: key,
label: attrs.content[key],
border: attrs.border ? attrs.border : false,
...childrenAttr,
const vNodes = computed(() => {
const vNode: VNode[] = []
const contentIsArray = isArray(attrs.value.content)
const type = attrs.value.button ? props.type + '-button' : props.type
for (const key in attrs.value.content) {
let nodeProps = {}
if (contentIsArray) {
if (typeof attrs.value.content[key].value == 'number') {
console.warn(props.type + ' 的 content.value 不能是数字')
}
nodeProps = {
...attrs.value.content[key],
border: attrs.value.border ? attrs.value.border : false,
...(attrs.value.childrenAttr || {}),
}
} else {
nodeProps = {
value: key,
label: attrs.value.content[key],
border: attrs.value.border ? attrs.value.border : false,
...(attrs.value.childrenAttr || {}),
}
}
vNode.push(createVNode(resolveComponent('el-' + type), nodeProps))
}
vNode.push(createVNode(resolveComponent('el-' + type), nodeProps))
}
return vNode
})
return () => {
const valueComputed = computed(() => {
if (props.type == 'radio') {
Expand All @@ -107,30 +111,35 @@ export default defineComponent({
return createVNode(
resolveComponent('el-' + props.type + '-group'),
{
...attrs,
...attrs.value,
modelValue: valueComputed.value,
'onUpdate:modelValue': onValueUpdate,
},
() => vNode
() => vNodes.value
)
}
}
// select selects
const select = () => {
let vNode: VNode[] = []
if (!attrs.content) {
if (!attrs.value.content) {
console.warn('请传递 ' + props.type + '的 content')
}
for (const key in attrs.content) {
vNode.push(
createVNode(resolveComponent('el-option'), {
key: key,
label: attrs.content[key],
value: key,
...childrenAttr,
})
)
}
const vNodes = computed(() => {
const vNode: VNode[] = []
for (const key in attrs.value.content) {
vNode.push(
createVNode(resolveComponent('el-option'), {
key: key,
label: attrs.value.content[key],
value: key,
...(attrs.value.childrenAttr || {}),
})
)
}
return vNode
})
return () => {
const valueComputed = computed(() => {
if (props.type == 'select') {
Expand All @@ -150,11 +159,11 @@ export default defineComponent({
class: 'w100',
multiple: props.type == 'select' ? false : true,
clearable: true,
...attrs,
...attrs.value,
modelValue: valueComputed.value,
'onUpdate:modelValue': onValueUpdate,
},
() => vNode
() => vNodes.value
)
}
}
Expand All @@ -174,7 +183,7 @@ export default defineComponent({
class: 'w100',
type: props.type,
'value-format': valueFormat,
...attrs,
...attrs.value,
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
})
Expand All @@ -186,7 +195,7 @@ export default defineComponent({
type: props.type,
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
...attrs,
...attrs.value,
})
}
Expand All @@ -197,7 +206,7 @@ export default defineComponent({
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
multiple: props.type == 'remoteSelect' ? false : true,
...attrs,
...attrs.value,
})
}
Expand All @@ -213,7 +222,7 @@ export default defineComponent({
() => {
// 值类型:string,number,boolean,custom
const valueType = computed(() => {
if (typeof attrs.activeValue !== 'undefined' && typeof attrs.inactiveValue !== 'undefined') {
if (typeof attrs.value.activeValue !== 'undefined' && typeof attrs.value.inactiveValue !== 'undefined') {
return 'custom'
}
return typeof props.modelValue
Expand All @@ -230,7 +239,7 @@ export default defineComponent({
})
return () =>
createVNode(resolveComponent('el-switch'), {
...attrs,
...attrs.value,
modelValue: valueComputed.value,
'onUpdate:modelValue': (value: boolean) => {
let newValue: boolean | string | number = value
Expand All @@ -256,7 +265,7 @@ export default defineComponent({
class: 'w100',
type: props.type,
'value-format': 'YYYY',
...attrs,
...attrs.value,
modelValue: valueComputed.value,
'onUpdate:modelValue': onValueUpdate,
})
Expand All @@ -282,7 +291,7 @@ export default defineComponent({
class: 'w100',
clearable: true,
format: 'HH:mm:ss',
...attrs,
...attrs.value,
modelValue: valueComputed.value,
'onUpdate:modelValue': onValueUpdate,
})
Expand All @@ -297,7 +306,7 @@ export default defineComponent({
createVNode(Array, {
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
...attrs,
...attrs.value,
})
},
],
Expand All @@ -307,7 +316,7 @@ export default defineComponent({
'city',
() => {
type Node = { value?: number; label?: string; leaf?: boolean }
let maxLevel = attrs.level ? attrs.level - 1 : 2
let maxLevel = attrs.value.level ? attrs.value.level - 1 : 2
const lastLazyValue: {
value: string | number[] | unknown
nodes: Node[]
Expand Down Expand Up @@ -384,7 +393,7 @@ export default defineComponent({
})
},
},
...attrs,
...attrs.value,
})
},
],
Expand All @@ -399,7 +408,7 @@ export default defineComponent({
createVNode(IconSelector, {
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
...attrs,
...attrs.value,
})
},
],
Expand All @@ -410,7 +419,7 @@ export default defineComponent({
createVNode(resolveComponent('el-color-picker'), {
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
...attrs,
...attrs.value,
})
},
],
Expand All @@ -422,7 +431,7 @@ export default defineComponent({
class: 'w100',
modelValue: props.modelValue,
'onUpdate:modelValue': onValueUpdate,
...attrs,
...attrs.value,
})
},
],
Expand Down
31 changes: 18 additions & 13 deletions web/src/components/formItem/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script lang="ts">
import { formItemProps } from 'element-plus'
import type { PropType, VNode } from 'vue'
import { createVNode, defineComponent, resolveComponent } from 'vue'
import { computed, createVNode, defineComponent, resolveComponent } from 'vue'
import type { InputAttr, InputData, ModelValueTypes } from '/@/components/baInput'
import { inputTypes } from '/@/components/baInput'
import BaInput from '/@/components/baInput/index.vue'
Expand Down Expand Up @@ -51,13 +51,18 @@ export default defineComponent({
},
emits: ['update:modelValue'],
setup(props, { emit }) {
// 通过 props 和 props.attr 两种方式传递的属性在此汇总
const attrs = props.attr || {}
for (const key in props) {
if (!['type', 'modelValue', 'inputAttr', 'attr', 'data', 'placeholder'].includes(key)) {
attrs[key as keyof typeof props.attr] = (props[key as keyof typeof props] as any) || attrs[key as keyof typeof props.attr]
// 通过 props 和 props.attr 两种方式传递的属性汇总为 attrs
const excludeProps = ['type', 'modelValue', 'inputAttr', 'attr', 'data', 'placeholder']
const attrs = computed(() => {
const newAttrs = props.attr || {}
for (const key in props) {
const propValue: any = props[key as keyof typeof props]
if (!excludeProps.includes(key) && (propValue || propValue === false)) {
newAttrs[key as keyof typeof props.attr] = propValue
}
}
}
return newAttrs
})
const onValueUpdate = (value: ModelValueTypes) => {
emit('update:modelValue', value)
Expand All @@ -75,24 +80,24 @@ export default defineComponent({
'onUpdate:modelValue': onValueUpdate,
})
if (attrs.blockHelp) {
if (attrs.value.blockHelp) {
return [
inputNode,
createVNode(
'div',
{
class: 'block-help',
},
attrs.blockHelp
attrs.value.blockHelp
),
]
}
return inputNode
}
if (attrs.tip) {
if (attrs.value.tip) {
const createTipNode = () => {
const tipProps = typeof attrs.tip === 'string' ? { content: attrs.tip, placement: 'top' } : attrs.tip
const tipProps = typeof attrs.value.tip === 'string' ? { content: attrs.value.tip, placement: 'top' } : attrs.value.tip
return createVNode(resolveComponent('el-tooltip'), tipProps, {
default: () => [
createVNode('i', {
Expand All @@ -110,7 +115,7 @@ export default defineComponent({
class: 'ba-form-item-label',
},
[
createVNode('span', null, attrs.label),
createVNode('span', null, attrs.value.label),
createVNode(
'span',
{
Expand All @@ -128,7 +133,7 @@ export default defineComponent({
resolveComponent('el-form-item'),
{
class: 'ba-input-item-' + props.type,
...attrs,
...attrs.value,
},
{
...slots,
Expand Down

0 comments on commit e43b95f

Please sign in to comment.