mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-11-27 04:09:51 +08:00
docs(dynamic-input): vue3
This commit is contained in:
parent
3071c9a2a6
commit
8d5d58ea23
@ -2,7 +2,7 @@
|
||||
By default, the preset of `n-dynamic-input` is `input`.
|
||||
```html
|
||||
<n-dynamic-input
|
||||
v-model="value"
|
||||
v-model:value="value"
|
||||
placeholder="Please input"
|
||||
:min="3"
|
||||
:max="6"
|
||||
|
@ -1,7 +1,7 @@
|
||||
# Custom Input Content
|
||||
```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>
|
||||
|
@ -8,7 +8,7 @@
|
||||
or misplacement.
|
||||
-->
|
||||
<n-dynamic-input
|
||||
v-model="model.dynamicInputValue"
|
||||
v-model:value="model.dynamicInputValue"
|
||||
key-field="key"
|
||||
:on-create="onCreate"
|
||||
:on-clear="onClear"
|
||||
@ -30,7 +30,7 @@
|
||||
<n-input
|
||||
placeholder="Name"
|
||||
@keydown.enter.prevent
|
||||
v-model="model.dynamicInputValue[index].name"
|
||||
v-model:value="model.dynamicInputValue[index].name"
|
||||
/>
|
||||
<!--
|
||||
Since pressing enter on the input element will cause the button in the form to be clicked, the default behavior is prevented
|
||||
@ -45,7 +45,7 @@
|
||||
<n-input
|
||||
placeholder="Value"
|
||||
@keydown.enter.prevent
|
||||
v-model="model.dynamicInputValue[index].value"
|
||||
v-model:value="model.dynamicInputValue[index].value"
|
||||
/>
|
||||
</n-form-item>
|
||||
</div>
|
||||
|
@ -3,6 +3,7 @@
|
||||
This component's name has been changed many times.
|
||||
|
||||
In the beginning, it was created for inputing environment variables.
|
||||
|
||||
## Demos
|
||||
```demo
|
||||
basic
|
||||
@ -11,32 +12,27 @@ custom
|
||||
form
|
||||
```
|
||||
|
||||
## V-model
|
||||
|Prop|Event|
|
||||
|-|-|
|
||||
|value|input|
|
||||
|
||||
## Props
|
||||
### Dynamic Input Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|key-field|`string`|`undefined`||
|
||||
|max|`number`|`undefined`|Max number of items.|
|
||||
|preset|`'input' \| 'preset'`|`'input'`|The preset of `n-dynamic-input`, it work when `$slots.default` is not set.|
|
||||
|value|`Array`|-|**required**|
|
||||
|max|`number`|`null`|Max number of items.|
|
||||
|key-field|`string`|`null`||
|
||||
|on-create|`(index: number) => any`|`null`|The callback when click at the add button. If set, the return value will be used as the initial value of the new item. `index` is the the new item's corresponding index in the value array, which starts from 1 (the second item).|
|
||||
|on-clear|`() => any`|`null`|The callback when clear the last one item. If set, the return value will be used as the value after the last item is cleared. If item content item is custom and `on-clear` is not set, the last item will not be allowed to be cleared.|
|
||||
|on-create|`(index: number) => any`|`undefined`|The callback when click at the add button. If set, the return value will be used as the initial value of the new item. `index` is the the new item's corresponding index in the value array, which starts from 1 (the second item).|
|
||||
|on-clear|`() => any`|`undefined`|The callback when clear the last one item. If set, the return value will be used as the value after the last item is cleared. If item content item is custom and `on-clear` is not set, the last item will not be allowed to be cleared.|
|
||||
|
||||
### Dynamic Input Props (Input Preset)
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|value|`Array<string>`|-|**required**|
|
||||
|value|`Array<string>`|required||
|
||||
|placeholder|`string`|`''`||
|
||||
|
||||
### Dynamic Input Props (Pair Preset)
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|value|`Array<{ key: string, value: string }>`|-|**required**|
|
||||
|value|`Array<{ key: string, value: string }>`|required||
|
||||
|key-placeholder|`string`|`''`||
|
||||
|value-placeholder|`string`|`''`||
|
||||
|
||||
@ -44,10 +40,3 @@ form
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|default|`(options: { value: any, index: number })`|The content of each item, `value` is the value of current item, `index` is the index of the current item.|
|
||||
|
||||
## Events
|
||||
|Name|Parameters|Description|
|
||||
|-|-|-|
|
||||
|create|`(index: number)`|`index` is the index of the new item.|
|
||||
|clear|`()`||
|
||||
|remove|`(index: number)`|`index` is the index of the removed item.|
|
@ -2,7 +2,7 @@
|
||||
```html
|
||||
<n-dynamic-input
|
||||
preset="pair"
|
||||
v-model="value"
|
||||
v-model:value="value"
|
||||
key-placeholder="Please input the key"
|
||||
value-placeholder="Please input the value"
|
||||
/>
|
||||
|
@ -27,7 +27,7 @@
|
||||
<n-input
|
||||
placeholder="Name"
|
||||
@keydown.enter.prevent
|
||||
v-model="model.dynamicInputValue[index].name"
|
||||
v-model:value="model.dynamicInputValue[index].name"
|
||||
/>
|
||||
<!--
|
||||
由于在 input 元素里按回车会导致 form 里面的 button 被点击,所以阻止了默认行为
|
||||
@ -42,7 +42,7 @@
|
||||
<n-input
|
||||
placeholder="Value"
|
||||
@keydown.enter.prevent
|
||||
v-model="model.dynamicInputValue[index].value"
|
||||
v-model:value="model.dynamicInputValue[index].value"
|
||||
/>
|
||||
</n-form-item>
|
||||
</div>
|
||||
|
@ -3,6 +3,7 @@
|
||||
这个组件的名字改过很多次。
|
||||
|
||||
一开始它被造出来是为了输入环境变量。
|
||||
|
||||
## 演示
|
||||
```demo
|
||||
basic
|
||||
@ -15,10 +16,10 @@ form
|
||||
### Dynamic Input Props
|
||||
|名称|类型|默认值|说明|
|
||||
|-|-|-|-|
|
||||
|key-field|`string`|`undefined`||
|
||||
|max|`number`|`undefined`|最多有几项内容|
|
||||
|preset|`'input' \| 'preset'`|`'input'`|动态录入使用的预设,在不设定 `$slots.default` 的时候生效。|
|
||||
|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`||
|
||||
@ -27,13 +28,13 @@ form
|
||||
### Dynamic Input Props(Input Preset)
|
||||
|名称|类型|默认值|说明|
|
||||
|-|-|-|-|
|
||||
|value|`Array<string>`|-|**必需**|
|
||||
|value|`Array<string>`|required||
|
||||
|placeholder|`string`|`''`||
|
||||
|
||||
### Dynamic Input Props(Pair Preset)
|
||||
|名称|类型|默认值|说明|
|
||||
|-|-|-|-|
|
||||
|value|`Array<{ key: string, value: string }>`|-|**必需**|
|
||||
|value|`Array<{ key: string, value: string }>`|required||
|
||||
|key-placeholder|`string`|`''`||
|
||||
|value-placeholder|`string`|`''`||
|
||||
|
||||
@ -41,10 +42,3 @@ form
|
||||
|名称|参数|说明|
|
||||
|-|-|-|
|
||||
|default|`(options: { value: any, index: number })`|每一项的渲染方式,其中 `value` 为该项对应的数组值,`index` 为该项对应的数组索引|
|
||||
|
||||
## Events
|
||||
|名称|参数|说明|
|
||||
|-|-|-|
|
||||
|create|`(index: number)`|`index` 是新增的数据的索引|
|
||||
|clear|`()`||
|
||||
|remove|`(index: number)`|`index` 是被移除的数据的索引|
|
Loading…
Reference in New Issue
Block a user