mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-12 12:25:16 +08:00
69 lines
1.1 KiB
Markdown
69 lines
1.1 KiB
Markdown
# 展示指令
|
|
可以制定标签页展示的指令为 `if` 或者 `show`。使用 `show` 的时候标签页内容不会随着切换重置。
|
|
```html
|
|
<n-tabs v-model="tab">
|
|
<n-tab-pane name="show" display-directive="show" label="show">
|
|
<show-input />
|
|
</n-tab-pane>
|
|
<n-tab-pane name="if" display-directive="if" label="if">
|
|
<if-input />
|
|
</n-tab-pane>
|
|
</n-tabs>
|
|
```
|
|
```js
|
|
const showInput = {
|
|
data () {
|
|
return {
|
|
value: ''
|
|
}
|
|
},
|
|
render (h) {
|
|
return h('n-input', {
|
|
props: {
|
|
placeholder: '我的内容不会被重置',
|
|
value: this.value
|
|
},
|
|
on: {
|
|
input: v => {
|
|
this.value = v
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
const ifInput = {
|
|
data () {
|
|
return {
|
|
value: ''
|
|
}
|
|
},
|
|
render (h) {
|
|
return h('n-input', {
|
|
props: {
|
|
placeholder: '我的内容会被重置',
|
|
value: this.value
|
|
},
|
|
on: {
|
|
input: v => {
|
|
this.value = v
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
export default {
|
|
components: {
|
|
showInput,
|
|
ifInput
|
|
},
|
|
data () {
|
|
return {
|
|
tab: 'show',
|
|
value2: ''
|
|
}
|
|
}
|
|
}
|
|
``` |