mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-02-23 13:31:06 +08:00
refactor(dynamic-input): support vue3
This commit is contained in:
07akioni
parent
66dd5ca79c
commit
cbe0363718
@ -2,7 +2,7 @@
|
||||
默认状况下，`n-dynamic-input` 的预设是 `input`。
|
||||
```html
|
||||
<n-dynamic-input
|
||||
v-model="value"
|
||||
v-model:value="value"
|
||||
placeholder="请输入"
|
||||
:min="3"
|
||||
:max="6"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# 自定义内容
|
||||
```html
|
||||
<n-dynamic-input
|
||||
v-model="customValue"
|
||||
v-model:value="customValue"
|
||||
:on-create="onCreate"
|
||||
:on-clear="onClear"
|
||||
>
|
||||
@ -9,15 +9,15 @@
|
||||
<div style="width: 100%;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<n-checkbox
|
||||
v-model="value.isCheck"
|
||||
v-model:checked="value.isCheck"
|
||||
style="margin-right: 12px;"
|
||||
/>
|
||||
<n-input-number
|
||||
v-model="value.num"
|
||||
v-model:value="value.num"
|
||||
style="margin-right: 12px; width: 160px;"
|
||||
/>
|
||||
<n-input
|
||||
v-model="value.string"
|
||||
v-model:value="value.string"
|
||||
type="input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
项的验证信息消失或错位
|
||||
-->
|
||||
<n-dynamic-input
|
||||
v-model="model.dynamicInputValue"
|
||||
v-model:value="model.dynamicInputValue"
|
||||
key-field="key"
|
||||
:on-create="onCreate"
|
||||
:on-clear="onClear"
|
||||
|
||||
@ -11,22 +11,18 @@ custom
|
||||
form
|
||||
```
|
||||
|
||||
## V-model
|
||||
|Prop|Event|
|
||||
|-|-|
|
||||
|value|input|
|
||||
|
||||
|
||||
## Props
|
||||
### Dynamic Input Props
|
||||
|名称|类型|默认值|说明|
|
||||
|-|-|-|-|
|
||||
|preset|`'input' \| 'preset'`|`'input'`|动态录入使用的预设，在不设定 `$slots.default` 的时候生效。|
|
||||
|value|`Array`|-|**必需**|
|
||||
|max|`number`|`null`|最多有几项内容|
|
||||
|key-field|`string`|`null`||
|
||||
|on-create|`(index: number) => any`|`null`|点击添加按钮时的回调，如果设定则返回值会被用作新添加的初始值。其中 `index` 是创建内容将要被放置到的位置对应的数组索引，从 1 (第二项)开始计算。|
|
||||
|on-clear|`() => any`|`null`|点击清空最后一项时的回调，如果设定则返回值会被用作为最后一项清空后的值, 如果是自定义内容并且没有设定该属性，则最后一项不会被清空。|
|
||||
|value|`Array<any>`|required||
|
||||
|max|`number`|`undefined`|最多有几项内容|
|
||||
|key-field|`string`|`undefined`||
|
||||
|on-create|`(index: number) => any`|`undefined`|点击添加按钮时的回调，如果设定则返回值会被用作新添加的初始值。其中 `index` 是创建内容将要被放置到的位置对应的数组索引，从 1 (第二项)开始计算。|
|
||||
|on-clear|`() => any`|`undefined`|点击清空最后一项时的回调，如果设定则返回值会被用作为最后一项清空后的值, 如果是自定义内容并且没有设定该属性，则最后一项不会被清空。|
|
||||
|on-remove|`() => any`|`undefined`||
|
||||
|on-update:value|`(value: any) => any`|`undefined`||
|
||||
|
||||
### Dynamic Input Props(Input Preset)
|
||||
|名称|类型|默认值|说明|
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
```html
|
||||
<n-dynamic-input
|
||||
preset="pair"
|
||||
v-model="value"
|
||||
v-model:value="value"
|
||||
key-placeholder="环境变量名"
|
||||
value-placeholder="环境变量值"
|
||||
/>
|
||||
|
||||
@ -9,13 +9,13 @@
|
||||
<slot v-if="$slots.default" :value="value[index]" :index="index" />
|
||||
<n-dynamic-input-input-preset
|
||||
v-else-if="preset === 'input'"
|
||||
v-model="value[index]"
|
||||
v-model:value="value[index]"
|
||||
:parent-path="NFormItem && NFormItem.path"
|
||||
:path="NFormItem && NFormItem.path + '[' + index + ']'"
|
||||
/>
|
||||
<n-dynamic-input-pair-preset
|
||||
v-else-if="preset === 'pair'"
|
||||
v-model="value[index]"
|
||||
v-model:value="value[index]"
|
||||
:parent-path="NFormItem && NFormItem.path"
|
||||
:path="NFormItem && NFormItem.path + '[' + index + ']'"
|
||||
/>
|
||||
@ -56,6 +56,8 @@ import withapp from '../../_mixins/withapp'
|
||||
import themeable from '../../_mixins/themeable'
|
||||
import usecssr from '../../_mixins/usecssr'
|
||||
import styles from './styles/index'
|
||||
import { warn } from '../../_utils/naive'
|
||||
import { call } from '../../_utils/vue'
|
||||
|
||||
export default {
|
||||
name: 'DynamicInput',
|
||||
@ -80,7 +82,7 @@ export default {
|
||||
props: {
|
||||
max: {
|
||||
type: Number,
|
||||
default: null
|
||||
default: undefined
|
||||
},
|
||||
value: {
|
||||
validator (value) {
|
||||
@ -88,14 +90,6 @@ export default {
|
||||
},
|
||||
required: true
|
||||
},
|
||||
onCreate: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
onClear: {
|
||||
type: Function,
|
||||
default: null
|
||||
},
|
||||
preset: {
|
||||
validator (value) {
|
||||
return ['input', 'pair'].includes(value)
|
||||
@ -119,6 +113,31 @@ export default {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
onCreate: {
|
||||
type: Function,
|
||||
default: undefined
|
||||
},
|
||||
onRemove: {
|
||||
type: Function,
|
||||
default: undefined
|
||||
},
|
||||
onClear: {
|
||||
type: Function,
|
||||
default: undefined
|
||||
},
|
||||
// eslint-disable-next-line vue/prop-name-casing
|
||||
'onUpdate:value': {
|
||||
type: [Function, Array],
|
||||
default: undefined
|
||||
},
|
||||
// deprecated
|
||||
onInput: {
|
||||
validator () {
|
||||
if (__DEV__) warn('dynamic-input', '`on-input` is deprecated, please use `on-update:value` instead.')
|
||||
return true
|
||||
},
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
data () {
|
||||
@ -135,11 +154,19 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doInput (value) {
|
||||
const {
|
||||
onInput,
|
||||
'onUpdate:value': onUpdateValue
|
||||
} = this
|
||||
if (onInput) call(onInput, value)
|
||||
if (onUpdateValue) call(onUpdateValue, value)
|
||||
},
|
||||
handleValueChange (value) {
|
||||
this.value = value
|
||||
},
|
||||
createItem (e, index) {
|
||||
const onCreate = this.onCreate
|
||||
const { onCreate } = this
|
||||
if (onCreate) {
|
||||
this.value.splice(index + 1, 0, onCreate(index + 1))
|
||||
} else if (this.$slots.default) {
|
||||
@ -154,7 +181,6 @@ export default {
|
||||
break
|
||||
}
|
||||
}
|
||||
this.$emit('create', index + 1)
|
||||
},
|
||||
remove (e, index) {
|
||||
if (this.value.length === 1) {
|
||||
@ -163,30 +189,28 @@ export default {
|
||||
const keyField = this.keyField
|
||||
if (keyField) {
|
||||
const memorizedKeyField = this.value[0][keyField]
|
||||
this.$emit('input', [ Object.assign(onClear(), {
|
||||
this.doInput([ Object.assign(onClear(), {
|
||||
[keyField]: memorizedKeyField
|
||||
})])
|
||||
} else {
|
||||
this.$emit('input', [ onClear() ])
|
||||
this.doInput([ onClear() ])
|
||||
}
|
||||
} else if (this.$slots.default) {
|
||||
return
|
||||
} else {
|
||||
switch (this.preset) {
|
||||
case 'input':
|
||||
this.$emit('input', [ null ])
|
||||
this.doInput([ null ])
|
||||
break
|
||||
case 'pair':
|
||||
this.$emit('input', [ { key: null, value: null } ])
|
||||
this.doInput([ { key: null, value: null } ])
|
||||
break
|
||||
}
|
||||
}
|
||||
this.$emit('clear')
|
||||
} else {
|
||||
const changedValue = Array.from(this.value)
|
||||
changedValue.splice(index, 1)
|
||||
this.$emit('input', changedValue)
|
||||
this.$emit('remove', index)
|
||||
this.doInput(changedValue)
|
||||
const { onRemove } = this
|
||||
if (onRemove) onRemove(index)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<n-input
|
||||
:value="value"
|
||||
:placeholder="NDynamicInput.placeholder"
|
||||
@input="handleInput"
|
||||
@update:value="handleInput"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@ -14,7 +14,7 @@
|
||||
import NInput from '../../input'
|
||||
|
||||
export default {
|
||||
name: 'NDynamicInputInputPreset',
|
||||
name: 'DynamicInputInputPreset',
|
||||
components: {
|
||||
NInput
|
||||
},
|
||||
@ -35,11 +35,16 @@ export default {
|
||||
path: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
// eslint-disable-next-line vue/prop-name-casing
|
||||
'onUpdate:value': {
|
||||
type: Function,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInput (value) {
|
||||
this.$emit('input', value)
|
||||
this['onUpdate:value'](value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,13 +6,13 @@
|
||||
:value="value.key"
|
||||
class="n-dynamic-input-pair-input"
|
||||
:placeholder="NDynamicInput.keyPlaceholder"
|
||||
@input="handleKeyInput"
|
||||
@update:value="handleKeyInput"
|
||||
/>
|
||||
<n-input
|
||||
:value="value.value"
|
||||
class="n-dynamic-input-pair-input"
|
||||
:placeholder="NDynamicInput.valuePlaceholder"
|
||||
@input="handleValueInput"
|
||||
@update:value="handleValueInput"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@ -21,7 +21,7 @@
|
||||
import NInput from '../../input'
|
||||
|
||||
export default {
|
||||
name: 'NDynamicInputPairPreset',
|
||||
name: 'DynamicInputPairPreset',
|
||||
components: {
|
||||
NInput
|
||||
},
|
||||
@ -45,17 +45,22 @@ export default {
|
||||
path: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
// eslint-disable-next-line vue/prop-name-casing
|
||||
'onUpdate:value': {
|
||||
type: Function,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleKeyInput (key) {
|
||||
this.$emit('input', {
|
||||
this['onUpdate:value']({
|
||||
key,
|
||||
value: this.value.value
|
||||
})
|
||||
},
|
||||
handleValueInput (value) {
|
||||
this.$emit('input', {
|
||||
this['onUpdate:value']({
|
||||
key: this.value.key,
|
||||
value
|
||||
})
|
||||
|
||||
@ -256,6 +256,10 @@ export default {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
onInput: {
|
||||
type: [Function, Array],
|
||||
default: undefined
|
||||
},
|
||||
onFocus: {
|
||||
type: [Function, Array],
|
||||
default: undefined
|
||||
|
||||
Loading…
Reference in New Issue
Block a user