mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-03-07 13:48:31 +08:00
docs: optimize default slot template style
This commit is contained in:
07akioni
parent
a2064cc47c
commit
1678a29118
@ -3,17 +3,19 @@
|
||||
You can replace auto-complete's input element.
|
||||
|
||||
```html
|
||||
<n-auto-complete :options="options" v-model:value="value">
|
||||
<template #="{ handleInput, handleBlur, handleFocus, value }">
|
||||
<n-input
|
||||
type="textarea"
|
||||
@input="handleInput"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
:value="value"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</template>
|
||||
<n-auto-complete
|
||||
:options="options"
|
||||
v-model:value="value"
|
||||
#="{ handleInput, handleBlur, handleFocus, value }"
|
||||
>
|
||||
<n-input
|
||||
type="textarea"
|
||||
@input="handleInput"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
:value="value"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</n-auto-complete>
|
||||
```
|
||||
|
||||
|
||||
@ -3,17 +3,19 @@
|
||||
你可以替换 AutoComplete 的输入元素。
|
||||
|
||||
```html
|
||||
<n-auto-complete :options="options" v-model:value="value">
|
||||
<template #="{ handleInput, handleBlur, handleFocus, value }">
|
||||
<n-input
|
||||
type="textarea"
|
||||
@input="handleInput"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
:value="value"
|
||||
placeholder="邮箱"
|
||||
/>
|
||||
</template>
|
||||
<n-auto-complete
|
||||
:options="options"
|
||||
v-model:value="value"
|
||||
#="{ handleInput, handleBlur, handleFocus, value }"
|
||||
>
|
||||
<n-input
|
||||
type="textarea"
|
||||
@input="handleInput"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
:value="value"
|
||||
placeholder="邮箱"
|
||||
/>
|
||||
</n-auto-complete>
|
||||
```
|
||||
|
||||
|
||||
@ -3,10 +3,8 @@
|
||||
A basic calender.
|
||||
|
||||
```html
|
||||
<n-calendar @update:value="handleUpdateValue">
|
||||
<template #="{ year, month, date }">
|
||||
{{ year }}-{{ month }}-{{ date }}
|
||||
</template>
|
||||
<n-calendar @update:value="handleUpdateValue" #="{ year, month, date }">
|
||||
{{ year }}-{{ month }}-{{ date }}
|
||||
</n-calendar>
|
||||
```
|
||||
|
||||
|
||||
@ -3,10 +3,8 @@
|
||||
一个普通的日历。
|
||||
|
||||
```html
|
||||
<n-calendar @update:value="handleUpdateValue">
|
||||
<template #="{ year, month, date }">
|
||||
{{ year }}-{{ month }}-{{ date }}
|
||||
</template>
|
||||
<n-calendar @update:value="handleUpdateValue" #="{ year, month, date }">
|
||||
{{ year }}-{{ month }}-{{ date }}
|
||||
</n-calendar>
|
||||
```
|
||||
|
||||
|
||||
@ -1,22 +1,21 @@
|
||||
# Custom Input Content
|
||||
|
||||
```html
|
||||
<n-dynamic-input v-model:value="customValue" :on-create="onCreate">
|
||||
<template #="{ value }">
|
||||
<div style="width: 100%;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<n-checkbox
|
||||
v-model:checked="value.isCheck"
|
||||
style="margin-right: 12px;"
|
||||
/>
|
||||
<n-input-number
|
||||
v-model:value="value.num"
|
||||
style="margin-right: 12px; width: 160px;"
|
||||
/>
|
||||
<n-input v-model:value="value.string" type="input" />
|
||||
</div>
|
||||
<n-dynamic-input
|
||||
v-model:value="customValue"
|
||||
:on-create="onCreate"
|
||||
#="{ value }"
|
||||
>
|
||||
<div style="width: 100%;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<n-checkbox v-model:checked="value.isCheck" style="margin-right: 12px;" />
|
||||
<n-input-number
|
||||
v-model:value="value.num"
|
||||
style="margin-right: 12px; width: 160px;"
|
||||
/>
|
||||
<n-input v-model:value="value.string" type="input" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</n-dynamic-input>
|
||||
<pre>
|
||||
{{ JSON.stringify(customValue, 0, 2) }}
|
||||
|
||||
@ -8,46 +8,45 @@
|
||||
item-style="margin-bottom: 0;"
|
||||
v-model:value="model.dynamicInputValue"
|
||||
:on-create="onCreate"
|
||||
#="{ index, value }"
|
||||
>
|
||||
<template #="{ index, value }">
|
||||
<div style="display: flex;">
|
||||
<!--
|
||||
<div style="display: flex;">
|
||||
<!--
|
||||
Usually, the path change will cause the form-item verification content
|
||||
or rules to be changed, so naive-ui will clear the existing
|
||||
verification effect. But this example is a special case, as we know
|
||||
the changes in path will not change form-item verification result and
|
||||
rules, so set ignore-path-change on form-item
|
||||
-->
|
||||
<n-form-item
|
||||
ignore-path-change
|
||||
:label="false"
|
||||
:path="`dynamicInputValue[${index}].name`"
|
||||
:rule="dynamicInputRule"
|
||||
>
|
||||
<n-input
|
||||
placeholder="Name"
|
||||
@keydown.enter.prevent
|
||||
v-model:value="model.dynamicInputValue[index].name"
|
||||
/>
|
||||
<!--
|
||||
<n-form-item
|
||||
ignore-path-change
|
||||
:label="false"
|
||||
:path="`dynamicInputValue[${index}].name`"
|
||||
:rule="dynamicInputRule"
|
||||
>
|
||||
<n-input
|
||||
placeholder="Name"
|
||||
@keydown.enter.prevent
|
||||
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
|
||||
-->
|
||||
</n-form-item>
|
||||
<div style="height: 34px; line-height: 34px; margin: 0 8px;">=</div>
|
||||
<n-form-item
|
||||
ignore-path-change
|
||||
:label="false"
|
||||
:path="`dynamicInputValue[${index}].value`"
|
||||
:rule="dynamicInputRule"
|
||||
>
|
||||
<n-input
|
||||
placeholder="Value"
|
||||
@keydown.enter.prevent
|
||||
v-model:value="model.dynamicInputValue[index].value"
|
||||
/>
|
||||
</n-form-item>
|
||||
</div>
|
||||
</template>
|
||||
</n-form-item>
|
||||
<div style="height: 34px; line-height: 34px; margin: 0 8px;">=</div>
|
||||
<n-form-item
|
||||
ignore-path-change
|
||||
:label="false"
|
||||
:path="`dynamicInputValue[${index}].value`"
|
||||
:rule="dynamicInputRule"
|
||||
>
|
||||
<n-input
|
||||
placeholder="Value"
|
||||
@keydown.enter.prevent
|
||||
v-model:value="model.dynamicInputValue[index].value"
|
||||
/>
|
||||
</n-form-item>
|
||||
</div>
|
||||
</n-dynamic-input>
|
||||
</n-form>
|
||||
<pre>
|
||||
|
||||
@ -1,22 +1,21 @@
|
||||
# 自定义内容
|
||||
|
||||
```html
|
||||
<n-dynamic-input v-model:value="customValue" :on-create="onCreate">
|
||||
<template #="{ value }">
|
||||
<div style="width: 100%;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<n-checkbox
|
||||
v-model:checked="value.isCheck"
|
||||
style="margin-right: 12px;"
|
||||
/>
|
||||
<n-input-number
|
||||
v-model:value="value.num"
|
||||
style="margin-right: 12px; width: 160px;"
|
||||
/>
|
||||
<n-input v-model:value="value.string" type="input" />
|
||||
</div>
|
||||
<n-dynamic-input
|
||||
v-model:value="customValue"
|
||||
:on-create="onCreate"
|
||||
#="{ value }"
|
||||
>
|
||||
<div style="width: 100%;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<n-checkbox v-model:checked="value.isCheck" style="margin-right: 12px;" />
|
||||
<n-input-number
|
||||
v-model:value="value.num"
|
||||
style="margin-right: 12px; width: 160px;"
|
||||
/>
|
||||
<n-input v-model:value="value.string" type="input" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</n-dynamic-input>
|
||||
<pre>
|
||||
{{ JSON.stringify(customValue, 0, 2) }}
|
||||
|
||||
@ -8,44 +8,43 @@
|
||||
item-style="margin-bottom: 0;"
|
||||
v-model:value="model.dynamicInputValue"
|
||||
:on-create="onCreate"
|
||||
#="{ index, value }"
|
||||
>
|
||||
<template #="{ index, value }">
|
||||
<div style="display: flex;">
|
||||
<!--
|
||||
<div style="display: flex;">
|
||||
<!--
|
||||
通常，path 的变化会导致 form-item 验证内容或规则的改变，所以 naive-ui 会清理掉
|
||||
表项已有的验证信息。但是这个例子是个特殊情况，我们明确的知道，path 的改变不会导致
|
||||
form-item 验证内容和规则的变化，所以就 ignore-path-change
|
||||
-->
|
||||
<n-form-item
|
||||
ignore-path-change
|
||||
:label="false"
|
||||
:path="`dynamicInputValue[${index}].name`"
|
||||
:rule="dynamicInputRule"
|
||||
>
|
||||
<n-input
|
||||
placeholder="Name"
|
||||
@keydown.enter.prevent
|
||||
v-model:value="model.dynamicInputValue[index].name"
|
||||
/>
|
||||
<!--
|
||||
<n-form-item
|
||||
ignore-path-change
|
||||
:label="false"
|
||||
:path="`dynamicInputValue[${index}].name`"
|
||||
:rule="dynamicInputRule"
|
||||
>
|
||||
<n-input
|
||||
placeholder="Name"
|
||||
@keydown.enter.prevent
|
||||
v-model:value="model.dynamicInputValue[index].name"
|
||||
/>
|
||||
<!--
|
||||
由于在 input 元素里按回车会导致 form 里面的 button 被点击，所以阻止了默认行为
|
||||
-->
|
||||
</n-form-item>
|
||||
<div style="height: 34px; line-height: 34px; margin: 0 8px;">=</div>
|
||||
<n-form-item
|
||||
ignore-path-change
|
||||
:label="false"
|
||||
:path="`dynamicInputValue[${index}].value`"
|
||||
:rule="dynamicInputRule"
|
||||
>
|
||||
<n-input
|
||||
placeholder="Value"
|
||||
@keydown.enter.prevent
|
||||
v-model:value="model.dynamicInputValue[index].value"
|
||||
/>
|
||||
</n-form-item>
|
||||
</div>
|
||||
</template>
|
||||
</n-form-item>
|
||||
<div style="height: 34px; line-height: 34px; margin: 0 8px;">=</div>
|
||||
<n-form-item
|
||||
ignore-path-change
|
||||
:label="false"
|
||||
:path="`dynamicInputValue[${index}].value`"
|
||||
:rule="dynamicInputRule"
|
||||
>
|
||||
<n-input
|
||||
placeholder="Value"
|
||||
@keydown.enter.prevent
|
||||
v-model:value="model.dynamicInputValue[index].value"
|
||||
/>
|
||||
</n-form-item>
|
||||
</div>
|
||||
</n-dynamic-input>
|
||||
</n-form>
|
||||
<pre>
|
||||
|
||||
@ -5,14 +5,14 @@
|
||||
确保你理解这些颜色的含义，请看[使用样式方案的注意事项](../doc/n-theme#style-scheme)。
|
||||
|
||||
```html
|
||||
<n-element tag="div" class="myel" style="overflow: auto;" #="{ styleScheme }">
|
||||
<n-element tag="div" class="myel" style="overflow: auto;" #="{ themeVars }">
|
||||
<pre
|
||||
:style="{
|
||||
color: styleScheme.secondaryTextColor,
|
||||
transition: `color .3s ${styleScheme.easeInOutCubicBezier}`
|
||||
color: themeVars.secondaryTextColor,
|
||||
transition: `color .3s ${themeVars.easeInOutCubicBezier}`
|
||||
}"
|
||||
>
|
||||
{{ JSON.stringify(styleScheme, 0, 2) }}</pre
|
||||
{{ JSON.stringify(themeVars, 0, 2) }}</pre
|
||||
>
|
||||
</n-element>
|
||||
```
|
||||
|
||||
@ -31,10 +31,8 @@ Collapsing works in responsive layout.
|
||||
>
|
||||
{{ i }}
|
||||
</n-gi>
|
||||
<n-gi suffix class="suffix" v-if="showSuffix">
|
||||
<template #="{ overflow }">
|
||||
{{ overflow ? 'Node Overflows Exists' : 'No Node Overflows' }}
|
||||
</template>
|
||||
<n-gi suffix class="suffix" v-if="showSuffix" #="{ overflow }">
|
||||
{{ overflow ? 'Node Overflows Exists' : 'No Node Overflows' }}
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
```
|
||||
|
||||
@ -31,10 +31,8 @@
|
||||
>
|
||||
{{ i }}
|
||||
</n-gi>
|
||||
<n-gi suffix class="suffix" v-if="showSuffix">
|
||||
<template #="{ overflow }">
|
||||
{{ overflow ? '存在溢出' : '不存在溢出' }}
|
||||
</template>
|
||||
<n-gi suffix class="suffix" v-if="showSuffix" #="{ overflow }">
|
||||
{{ overflow ? '存在溢出' : '不存在溢出' }}
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
```
|
||||
|
||||
Loading…
Reference in New Issue
Block a user