naive-ui/demo/documentation/components/dynamicInput/zhCN/custom.md

61 lines
1.1 KiB
Markdown
Raw Normal View History

# 自定义内容
```html
<n-dynamic-input
v-model="customValue"
:on-create="onCreate"
:on-clear="onClear"
>
<template v-slot="{ value }">
<div style="width: 100%;">
<div style="display: flex; align-items: center;">
<n-checkbox
v-model="value.isCheck"
style="margin-right: 12px;"
/>
<n-input-number
v-model="value.num"
style="margin-right: 12px; width: 160px;"
/>
<n-input
v-model="value.string"
type="input"
/>
</div>
</div>
</template>
</n-dynamic-input>
2020-03-09 12:12:31 +08:00
<pre>
{{ JSON.stringify(customValue, 0, 2) }}
2020-03-09 12:12:31 +08:00
</pre>
```
```js
export default {
data () {
return {
customValue: [
{
2020-03-11 16:24:35 +08:00
isCheck: true,
num: 1,
string: '一个字符串'
}
]
}
2020-03-11 16:24:35 +08:00
},
methods: {
onCreate () {
return {
2020-03-11 16:24:35 +08:00
isCheck: false,
num: 1,
string: '一个字符串'
}
},
onClear () {
return {
isCheck: false,
num: 0,
string: ''
}
2020-03-11 16:24:35 +08:00
}
}
}
```