mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-02-17 13:20:52 +08:00
Merge branch 'docs'
This commit is contained in:
07akioni
commit
2c8757d2bd
@ -1,7 +1,56 @@
|
||||
# Server-Sider Rendering
|
||||
|
||||
SSR is still an experimental feature. It seems to work.
|
||||
Since naive-ui is using CSS in JS, in SSR mode it needs some extra configuration.
|
||||
|
||||
## Nuxt
|
||||
|
||||
If you are using Nuxt, please make sure you are using `naive-ui@>=2.29.0`.
|
||||
|
||||
### Nuxt Example
|
||||
|
||||
If you are using Nuxt, please see [example](https://github.com/07akioni/naive-ui-nuxt-demo).
|
||||
|
||||
### Main Process
|
||||
|
||||
1. Install `naive-ui` and `@css-render/vue3-ssr`.
|
||||
2. Add the following config in your `nuxt.config.ts`.
|
||||
|
||||
```ts
|
||||
export default defineNuxtConfig({
|
||||
build: {
|
||||
transpile: [
|
||||
'naive-ui',
|
||||
'vueuc',
|
||||
'@css-render/vue3-ssr',
|
||||
'@juggle/resize-observer'
|
||||
]
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
3. Add the [plugin](https://github.com/07akioni/naive-ui-nuxt-demo/blob/main/plugins/naive-ui.ts) in `plugins` folder of your nuxt project.
|
||||
|
||||
## Vite Example
|
||||
|
||||
If you are using Vite, please see [example](https://github.com/07akioni/naive-ui-vite-ssr).
|
||||
|
||||
## Webpack Example
|
||||
|
||||
If you are using Webpack, please see [example](https://github.com/TuSimple/naive-ui/tree/main/playground/ssr).
|
||||
|
||||
## Inline Style Optimization
|
||||
|
||||
By default, naive-ui bind inline theme style on components, it may increase SSR rendered HTML size. You may use `inline-theme-disabled` prop on `n-config-provider` to disable it. For pros & cons see `n-config-provider`'s doc.
|
||||
|
||||
## Known Issues
|
||||
|
||||
The following components has some bugs in SSR scene, please avoid using them if possible. We will fix them gradually.
|
||||
|
||||
- `n-anchor`
|
||||
- `n-avatar-group`
|
||||
- `n-back-top`
|
||||
- `n-scrollbar`
|
||||
- `n-image-group`
|
||||
- `n-data-table`
|
||||
- `n-watermark`
|
||||
- `n-affix`
|
||||
|
||||
@ -1,7 +1,56 @@
|
||||
# 服务端渲染 Server-Sider Rendering
|
||||
|
||||
SSR 是实验性功能，它看起来是能正常运行的。
|
||||
由于 naive-ui 在使用 CSS in JS，在 SSR 的情况下需要一些额外的配置。
|
||||
|
||||
## Nuxt
|
||||
|
||||
如果你在使用 Nuxt，请确保你在使用 `naive-ui@>=2.29.0`。
|
||||
|
||||
### Nuxt 示例
|
||||
|
||||
如果你在使用 Nuxt，参考[例子](https://github.com/07akioni/naive-ui-nuxt-demo)。
|
||||
|
||||
### 重点步骤
|
||||
|
||||
1. 安装 `naive-ui` 和 `@css-render/vue3-ssr`
|
||||
2. 在 `nuxt.config.ts` 增添下列配置
|
||||
|
||||
```ts
|
||||
export default defineNuxtConfig({
|
||||
build: {
|
||||
transpile: [
|
||||
'naive-ui',
|
||||
'vueuc',
|
||||
'@css-render/vue3-ssr',
|
||||
'@juggle/resize-observer'
|
||||
]
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
3. 在 Nuxt 项目的 `plugins` 文件夹增加这个[插件](https://github.com/07akioni/naive-ui-nuxt-demo/blob/main/plugins/naive-ui.ts)
|
||||
|
||||
## Vite 示例
|
||||
|
||||
如果你是用的是 Vite，请参考[例子](https://github.com/07akioni/naive-ui-vite-ssr)。
|
||||
|
||||
## Webpack 示例
|
||||
|
||||
如果你使用的是 Webpack，请参考[例子](https://github.com/TuSimple/naive-ui/tree/main/playground/ssr)。
|
||||
|
||||
## 内联样式优化
|
||||
|
||||
默认情况下，naive-ui 会在组件上绑定 inline 主题样式，这可能会影响 SSR 的尺寸。你可以使用 `n-config-provider` 的 `inline-theme-disabled` 属性来优化，详细的优劣请参考 `n-config-provider` 的文档。
|
||||
|
||||
## 已知问题
|
||||
|
||||
下列组件在 SSR 场景中存在一些 Bug，使用时请尽量规避，我们会逐步修复。
|
||||
|
||||
- `n-anchor`
|
||||
- `n-avatar-group`
|
||||
- `n-back-top`
|
||||
- `n-scrollbar`
|
||||
- `n-image-group`
|
||||
- `n-data-table`
|
||||
- `n-watermark`
|
||||
- `n-affix`
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
<n-dropdown
|
||||
placement="bottom-start"
|
||||
trigger="click"
|
||||
size="large"
|
||||
size="huge"
|
||||
:options="options"
|
||||
@select="handleSelect"
|
||||
>
|
||||
|
||||
91
src/form/demos/enUS/dynamic.demo.vue
Normal file
91
src/form/demos/enUS/dynamic.demo.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<markdown>
|
||||
# Dynamic form
|
||||
|
||||
Delete or add form items dynamically.
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-form ref="formRef" :model="dynamicForm" :style="{ maxWidth: '640px' }">
|
||||
<n-form-item
|
||||
label="name"
|
||||
path="name"
|
||||
:rule="{
|
||||
required: true,
|
||||
message: 'Please input Name',
|
||||
trigger: ['input', 'blur']
|
||||
}"
|
||||
>
|
||||
<n-input v-model:value="dynamicForm.name" clearable />
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item
|
||||
v-for="(item, index) in dynamicForm.hobbies"
|
||||
:key="index"
|
||||
:label="`hobby${index + 1}`"
|
||||
:path="`hobbies[${index}].hobby`"
|
||||
:rule="{
|
||||
required: true,
|
||||
message: `Please input hobby${index + 1}`,
|
||||
trigger: ['input', 'blur']
|
||||
}"
|
||||
>
|
||||
<n-input v-model:value="item.hobby" clearable />
|
||||
<n-button style="margin-left: 12px" @click="removeItem(index)">
|
||||
Remove
|
||||
</n-button>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item>
|
||||
<n-space>
|
||||
<n-button attr-type="button" @click="handleValidateClick">
|
||||
Validate
|
||||
</n-button>
|
||||
<n-button attr-type="button" @click="addItem">
|
||||
New hobby
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { FormInst } from 'naive-ui'
|
||||
import { defineComponent, reactive, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
const formRef = ref<FormInst | null>(null)
|
||||
|
||||
const dynamicForm = reactive({
|
||||
name: '',
|
||||
hobbies: [{ hobby: '' }]
|
||||
})
|
||||
|
||||
const removeItem = (index: number) => {
|
||||
dynamicForm.hobbies.splice(index, 1)
|
||||
}
|
||||
|
||||
const addItem = () => {
|
||||
dynamicForm.hobbies.push({ hobby: '' })
|
||||
}
|
||||
|
||||
const handleValidateClick = () => {
|
||||
formRef.value?.validate((errors) => {
|
||||
if (!errors) {
|
||||
console.log('success')
|
||||
} else {
|
||||
console.log(errors)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
formRef,
|
||||
dynamicForm,
|
||||
addItem,
|
||||
removeItem,
|
||||
handleValidateClick
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -20,6 +20,7 @@ disabled.vue
|
||||
show-label.vue
|
||||
partially-apply-rules.vue
|
||||
custom-messages.vue
|
||||
dynamic.vue
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
91
src/form/demos/zhCN/dynamic.demo.vue
Normal file
91
src/form/demos/zhCN/dynamic.demo.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<markdown>
|
||||
# 动态表单
|
||||
|
||||
动态增加、删除表单项。
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-form ref="formRef" :model="dynamicForm" :style="{ maxWidth: '640px' }">
|
||||
<n-form-item
|
||||
label="姓名"
|
||||
path="name"
|
||||
:rule="{
|
||||
required: true,
|
||||
message: '请输入姓名',
|
||||
trigger: ['input', 'blur']
|
||||
}"
|
||||
>
|
||||
<n-input v-model:value="dynamicForm.name" clearable />
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item
|
||||
v-for="(item, index) in dynamicForm.hobbies"
|
||||
:key="index"
|
||||
:label="`爱好${index + 1}`"
|
||||
:path="`hobbies[${index}].hobby`"
|
||||
:rule="{
|
||||
required: true,
|
||||
message: `请输入爱好${index + 1}`,
|
||||
trigger: ['input', 'blur']
|
||||
}"
|
||||
>
|
||||
<n-input v-model:value="item.hobby" clearable />
|
||||
<n-button style="margin-left: 12px" @click="removeItem(index)">
|
||||
删除
|
||||
</n-button>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item>
|
||||
<n-space>
|
||||
<n-button attr-type="button" @click="handleValidateClick">
|
||||
验证
|
||||
</n-button>
|
||||
<n-button attr-type="button" @click="addItem">
|
||||
增加
|
||||
</n-button>
|
||||
</n-space>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { FormInst } from 'naive-ui'
|
||||
import { defineComponent, reactive, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
const formRef = ref<FormInst | null>(null)
|
||||
|
||||
const dynamicForm = reactive({
|
||||
name: '',
|
||||
hobbies: [{ hobby: '' }]
|
||||
})
|
||||
|
||||
const removeItem = (index: number) => {
|
||||
dynamicForm.hobbies.splice(index, 1)
|
||||
}
|
||||
|
||||
const addItem = () => {
|
||||
dynamicForm.hobbies.push({ hobby: '' })
|
||||
}
|
||||
|
||||
const handleValidateClick = () => {
|
||||
formRef.value?.validate((errors) => {
|
||||
if (!errors) {
|
||||
console.log('验证通过')
|
||||
} else {
|
||||
console.log(errors)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
formRef,
|
||||
dynamicForm,
|
||||
addItem,
|
||||
removeItem,
|
||||
handleValidateClick
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -20,6 +20,7 @@ disabled.vue
|
||||
show-label.vue
|
||||
partially-apply-rules.vue
|
||||
custom-messages.vue
|
||||
dynamic.vue
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
@ -123,7 +123,7 @@ interface UploadCustomRequestOptions {
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| --- | --- | --- |
|
||||
| default | `()` | The placeholder of the upload dragger; For an example see <n-a href="#drag">Drag to Upload Demo</n-a>. |
|
||||
| default | `()` | The placeholder of the upload dragger; For an example see <n-a href="#drag.vue">Drag to Upload Demo</n-a>. |
|
||||
|
||||
### UploadTrigger Slots
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user