mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-30 12:52:43 +08:00
07akioni
GitHub
commit
6bbf4bc943
@ -6,6 +6,8 @@ Naive-ui provide `n-config-provider` to customize the theme.
|
||||
|
||||
By default all the component is light themed, without any configuration.
|
||||
|
||||
Learn more about `n-config-provider`, see [Config Provider](../components/config-provider).
|
||||
|
||||
## Use Dark Theme
|
||||
|
||||
Set `n-config-provider`'s `theme` prop to `darkTheme` imported from naive-ui to set dark theme inside `n-config-provider`.
|
||||
|
||||
@ -2,10 +2,12 @@
|
||||
|
||||
# 调整主题
|
||||
|
||||
naive-ui 通过使用 `n-config-provider` 调整主题。
|
||||
Naive UI 通过使用 `n-config-provider` 调整主题。
|
||||
|
||||
默认情况下所有组件均为亮色主题，无需任何配置。
|
||||
|
||||
了解更多关于 `n-config-provider` 的信息，参见 [全局化配置](../components/config-provider)。
|
||||
|
||||
## 使用暗色主题
|
||||
|
||||
将 `n-config-provider` 的 `theme` 设为从 naive-ui 导入的 `darkTheme` 来设定暗色主题。
|
||||
|
||||
45
demo/pages/docs/i18n/enUS/index.md
Normal file
45
demo/pages/docs/i18n/enUS/index.md
Normal file
@ -0,0 +1,45 @@
|
||||
# Internationalization
|
||||
|
||||
Naive-ui provide `n-config-provider` to customize the internationalization. By default, all components are in English.
|
||||
|
||||
Learn more about `n-config-provider`, see [Config Provider](../components/config-provider).
|
||||
|
||||
## Configure
|
||||
|
||||
Set `n-config-provider`'s `locale` prop to `zhCN` imported from naive-ui to set Chinese theme inside `n-config-provider`.
|
||||
|
||||
Set `n-config-provider`'s `date-locale` prop to `dateZhCN` imported from naive-ui to set Chinese theme's date inside `n-config-provider`.
|
||||
|
||||
```html
|
||||
<template>
|
||||
<n-config-provider :locale="zhCN" :date-locale="dateZhCN">
|
||||
<app />
|
||||
</n-config-provider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue'
|
||||
import { NConfigProvider } from 'naive-ui'
|
||||
import { zhCN, dateZhCN } from 'naive-ui'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
NConfigProvider
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
zhCN,
|
||||
dateZhCN
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: black;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
At present, Naive-ui only supports Chinese and English, and other languages don't support it temporarily.
|
||||
45
demo/pages/docs/i18n/zhCN/index.md
Normal file
45
demo/pages/docs/i18n/zhCN/index.md
Normal file
@ -0,0 +1,45 @@
|
||||
# 国际化
|
||||
|
||||
Naive-ui 通过使用 `n-config-provider` 调整语言，默认情况下所有组件均为英语。
|
||||
|
||||
了解更多关于 `n-config-provider` 的信息，参见 [全局化配置](../components/config-provider)。
|
||||
|
||||
## 配置
|
||||
|
||||
将 `n-config-provider` 的 `locale` 设为从 naive-ui 导入的 `zhCN` 来设定全局中文。
|
||||
|
||||
将 `n-config-provider` 的 `date-locale` 设为从 naive-ui 导入的 `dateZhCN` 来设定全局日期中文。
|
||||
|
||||
```html
|
||||
<template>
|
||||
<n-config-provider :locale="zhCN" :date-locale="dateZhCN">
|
||||
<app />
|
||||
</n-config-provider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue'
|
||||
import { NConfigProvider } from 'naive-ui'
|
||||
import { zhCN, dateZhCN } from 'naive-ui'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
NConfigProvider
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
zhCN,
|
||||
dateZhCN
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: black;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
目前 Naive-ui 只支持中文和英文，其他语言暂不支持。
|
||||
@ -28,6 +28,10 @@ export const enDocRoutes = [
|
||||
path: 'customize-theme',
|
||||
component: () => import('../pages/docs/customize-theme/enUS/index.md')
|
||||
},
|
||||
{
|
||||
path: 'i18n',
|
||||
component: () => import('../pages/docs/i18n/enUS/index.md')
|
||||
},
|
||||
{
|
||||
path: 'changelog',
|
||||
component: () => import('../pages/docs/changelog/enUS/index.vue')
|
||||
@ -84,6 +88,10 @@ export const zhDocRoutes = [
|
||||
path: 'customize-theme',
|
||||
component: () => import('../pages/docs/customize-theme/zhCN/index.md')
|
||||
},
|
||||
{
|
||||
path: 'i18n',
|
||||
component: () => import('../pages/docs/i18n/zhCN/index.md')
|
||||
},
|
||||
// {
|
||||
// path: 'experimental-features',
|
||||
// component: () => import('../pages/docs/experimental-features/zhCN/index.md')
|
||||
|
||||
@ -129,6 +129,11 @@ export function createDocumentationMenuOptions ({ lang, theme, mode }) {
|
||||
zh: '调整主题',
|
||||
path: '/customize-theme'
|
||||
},
|
||||
{
|
||||
en: 'Internationalization',
|
||||
zh: '国际化',
|
||||
path: '/i18n'
|
||||
},
|
||||
{
|
||||
en: 'Create Themed Component',
|
||||
zh: '创建适配主题的组件',
|
||||
|
||||
@ -18,31 +18,31 @@ collapse
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| cols | `number \| ResponsiveDescription` | `24` | |
|
||||
| collapsed | `boolean` | `false` | |
|
||||
| collapsed-rows | `number` | `1` | |
|
||||
| cols | `number \| ResponsiveDescription` | `24` | Number of grids displayed. |
|
||||
| collapsed | `boolean` | `false` | Whether to fold by default. |
|
||||
| collapsed-rows | `number` | `1` | The number of rows displayed by default. |
|
||||
| responsive | `'self' \| 'screen'` | `'screen'` | `'self'` triggers responsive layout by its own width. `'screen'` triggers responsive layout by viewport's witdh. |
|
||||
| x-gap | `number \| ResponsiveDescription` | `0` | |
|
||||
| y-gap | `number \| ResponsiveDescription` | `0` | |
|
||||
| x-gap | `number \| ResponsiveDescription` | `0` | Horizontal gap. |
|
||||
| y-gap | `number \| ResponsiveDescription` | `0` | Vertical gap. |
|
||||
|
||||
### GridItem Props
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| ------ | --------- | ------- | ----------- |
|
||||
| offset | `number` | `0` | |
|
||||
| span | `number` | `1` | |
|
||||
| suffix | `boolean` | `false` | |
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| offset | `number` | `0` | The number of intervals to the left of the grid. |
|
||||
| span | `number` | `1` | The number of columns occupied by the grid. |
|
||||
| suffix | `boolean` | `false` | Grid suffix. |
|
||||
|
||||
## Slots
|
||||
|
||||
### Grid Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ----------- |
|
||||
| default | `()` | |
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ------------- |
|
||||
| default | `()` | Grid content. |
|
||||
|
||||
### GridItem Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ------------------------- | ----------- |
|
||||
| default | `({ overflow: boolean })` | |
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ------------------------- | ------------------ |
|
||||
| default | `({ overflow: boolean })` | Grid item content. |
|
||||
|
||||
@ -19,31 +19,31 @@ grid-basic-debug
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| cols | `number \| ResponsiveDescription` | `24` | |
|
||||
| collapsed | `boolean` | `false` | |
|
||||
| collapsed-rows | `number` | `1` | |
|
||||
| cols | `number \| ResponsiveDescription` | `24` | 显示的栅格数量 |
|
||||
| collapsed | `boolean` | `false` | 是否默认折叠 |
|
||||
| collapsed-rows | `number` | `1` | 默认展示的行数 |
|
||||
| responsive | `'self' \| 'screen'` | `'self'` | `'self'` 根据自身宽度进行响应式布局，`'screen'` 根据屏幕断点进行响应式布局 |
|
||||
| x-gap | `number \| ResponsiveDescription` | `0` | |
|
||||
| y-gap | `number \| ResponsiveDescription` | `0` | |
|
||||
| x-gap | `number \| ResponsiveDescription` | `0` | 横向间隔槽 |
|
||||
| y-gap | `number \| ResponsiveDescription` | `0` | 纵向间隔槽 |
|
||||
|
||||
### GridItem Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| ------ | --------- | ------- | ---- |
|
||||
| offset | `number` | `0` | |
|
||||
| span | `number` | `1` | |
|
||||
| suffix | `boolean` | `false` | |
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| ------ | --------- | ------- | ------------------ |
|
||||
| offset | `number` | `0` | 栅格左侧的间隔格数 |
|
||||
| span | `number` | `1` | 栅格占据的列数 |
|
||||
| suffix | `boolean` | `false` | 栅格后缀 |
|
||||
|
||||
## Slots
|
||||
|
||||
### Grid Slots
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ---- |
|
||||
| default | `()` | |
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | -------- |
|
||||
| default | `()` | 栅格内容 |
|
||||
|
||||
### GridItem Slots
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ------------------------- | ---- |
|
||||
| default | `({ overflow: boolean })` | |
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ------------------------- | ------------ |
|
||||
| default | `({ overflow: boolean })` | 栅格节点内容 |
|
||||
|
||||
@ -26,54 +26,54 @@ focus
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| autofocus | `boolean` | `false` | |
|
||||
| autosize | `boolean \| { minRows?: number, maxRows?: number }` | `false` | |
|
||||
| clearable | `boolean` | `false` | |
|
||||
| default-value | `string \| [string, string] \| null` | `null` | |
|
||||
| disabled | `boolean` | `false` | |
|
||||
| autofocus | `boolean` | `false` | Whether to autofocus. |
|
||||
| autosize | `boolean \| { minRows?: number, maxRows?: number }` | `false` | When type is textarea works, for example `{ minRows: 1, maxRows: 3 }`. |
|
||||
| clearable | `boolean` | `false` | Whether the input is clearable. |
|
||||
| default-value | `string \| [string, string] \| null` | `null` | Default value in uncontrolled mode. |
|
||||
| disabled | `boolean` | `false` | Whether to disable the input. |
|
||||
| input-props | `object` | `undefined` | The props of the input element inside the component. It doesn't work with `pair` input. |
|
||||
| loading | `boolean` | `undefined` | Whether to show loading indicator. Set to non `undefined` value will take space for loading indicator. |
|
||||
| maxlength | `number` | `undefined` | |
|
||||
| minlength | `number` | `undefined` | |
|
||||
| maxlength | `number` | `undefined` | Maximum input length. |
|
||||
| minlength | `number` | `undefined` | Minimum input length. |
|
||||
| pair | `boolean` | `false` | Whether to input pairwise value. |
|
||||
| passively-activated | `boolean` | `false` | |
|
||||
| passively-activated | `boolean` | `false` | Whether to passively activate the input. |
|
||||
| placeholder | `string \| [string, string]` | `undefined` | Placeholder of input. When `pair` is `true`, placeholder is an array. |
|
||||
| readonly | `boolean` | `false` | |
|
||||
| round | `boolean` | `false` | |
|
||||
| rows | `number` | `3` | |
|
||||
| readonly | `boolean` | `false` | Read only. |
|
||||
| round | `boolean` | `false` | Whether the input show round. |
|
||||
| rows | `number` | `3` | Input rows, only works when type is `textarea`. |
|
||||
| separator | `string` | `undefined` | The separator bewteen pairwise inputs. |
|
||||
| show-count | `boolean` | `false` | Whether to show word count. |
|
||||
| show-password-toggle | `boolean` | `false` | Controls the display and hiding of passwords |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | |
|
||||
| type | `'text' \| 'password' \| 'textarea'` | `'text'` | |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Input size. |
|
||||
| type | `'text' \| 'password' \| 'textarea'` | `'text'` | Input type. |
|
||||
| value | `string \| [string, string] \| null` | `undefined` | Value of input. When `pair` is `true`, `value` is an array. |
|
||||
| on-blur | `() => void` | `undefined` | |
|
||||
| on-change | `(value: string \| [string, string]) => void` | `undefined` | |
|
||||
| on-clear | `() => void` | `undefined` | |
|
||||
| on-focus | `() => void` | `undefined` | |
|
||||
| on-update:value | `(value: string \| [string, string]) => void` | `undefined` | |
|
||||
| on-blur | `() => void` | `undefined` | Callback triggered when the input blur. |
|
||||
| on-change | `(value: string \| [string, string]) => void` | `undefined` | Callback triggered when the input blur and value changes. |
|
||||
| on-clear | `() => void` | `undefined` | Callback triggered when the input clear. |
|
||||
| on-focus | `() => void` | `undefined` | Callback triggered when the input focus. |
|
||||
| on-update:value | `(value: string \| [string, string]) => void` | `undefined` | Callback triggered when the input value changes. |
|
||||
|
||||
## Slots
|
||||
|
||||
### Input Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| --------- | ---------- | ----------- |
|
||||
| prefix | `()` | |
|
||||
| suffix | `()` | |
|
||||
| separator | `()` | |
|
||||
| Name | Parameters | Description |
|
||||
| --- | --- | --- |
|
||||
| prefix | `()` | The prefix content of the input. |
|
||||
| suffix | `()` | The suffix content of the input. |
|
||||
| separator | `()` | The separator content of the input, only works when `pare` is true and it's priority higher than the separator prop. |
|
||||
|
||||
### Input Group Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ----------- |
|
||||
| default | `()` | |
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ------------------------------- |
|
||||
| default | `()` | The content of the input group. |
|
||||
|
||||
### Input Group Label Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ----------- |
|
||||
| default | `()` | |
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ------------------------------------- |
|
||||
| default | `()` | The content of the input group label. |
|
||||
|
||||
## Methods
|
||||
|
||||
|
||||
@ -26,8 +26,8 @@ focus
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| autofocus | `boolean` | `false` | 自动获取焦点 |
|
||||
| autosize | `boolean \| { minRows?: number, maxRows?: number }` | `false` | 自适应内容高度，只对 type="textarea" 有效，可传入对象，如，{ minRows: 1, maxRows: 3 } |
|
||||
| autofocus | `boolean` | `false` | 是否自动获取焦点 |
|
||||
| autosize | `boolean \| { minRows?: number, maxRows?: number }` | `false` | 自适应内容高度，只对 type="textarea" 有效，可传入对象，如 { minRows: 1, maxRows: 3 } |
|
||||
| clearable | `boolean` | `false` | 是否可清空 |
|
||||
| default-value | `string \| [string, string] \| null` | `null` | 输入框默认值 |
|
||||
| disabled | `boolean` | `false` | 是否禁用 |
|
||||
@ -66,15 +66,15 @@ focus
|
||||
|
||||
### Input Group Slots
|
||||
|
||||
| 属性 | 类型 | 说明 |
|
||||
| ------- | ---- | ---- |
|
||||
| default | `()` | |
|
||||
| 属性 | 类型 | 说明 |
|
||||
| ------- | ---- | ------------ |
|
||||
| default | `()` | 输入组的内容 |
|
||||
|
||||
### Input Group Label Slots
|
||||
|
||||
| 属性 | 类型 | 说明 |
|
||||
| ------- | ---- | ---- |
|
||||
| default | `()` | |
|
||||
| 属性 | 类型 | 说明 |
|
||||
| ------- | ---- | ---------------- |
|
||||
| default | `()` | 输入组标签的内容 |
|
||||
|
||||
## Methods
|
||||
|
||||
|
||||
@ -32,14 +32,14 @@ scroll-to
|
||||
| content-style | `string \| Object` | `undefined` | Style of scrollable content node. |
|
||||
| embedded | `boolean` | `false` | Use darker background to show a embedded effect. Only work for light theme. |
|
||||
| has-sider | `boolean` | `false` | Whether the component has sider inside. If so it must be `true`. |
|
||||
| native-scrollbar | `boolean` | `true` | Whether to use native scrollbar on itself. If set to `false`, layout will use a naive-ui style scrollbar for content |
|
||||
| native-scrollbar | `boolean` | `true` | Whether to use native scrollbar on itself. If set to `false`, layout will use a naive-ui style scrollbar for content. |
|
||||
| position | `'static' \| 'absolute'` | `'static'` | `static` position will make it css position set to `static`. `absolute` position will make it css position set to `absolute` and `left`, `right`, `top`, `bottom` to `0`. `absolute` position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect. |
|
||||
|
||||
### Layout Footer Props
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| bordered | `boolean` | `false` | |
|
||||
| bordered | `boolean` | `false` | Whether to show the border. |
|
||||
| inverted | `boolean` | `false` | Whether to use inverted background. |
|
||||
| position | `'static' \| 'absolute'` | `'static'` | `static` position will make it css position set to `static`. `absolute` position will make it css position set to `absolute` and `left`, `right`, `top` to `0`. `absolute` position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect. |
|
||||
|
||||
@ -47,7 +47,7 @@ scroll-to
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| bordered | `boolean` | `false` | |
|
||||
| bordered | `boolean` | `false` | Whether to show the border. |
|
||||
| inverted | `boolean` | `false` | Whether to use inverted background. |
|
||||
| position | `'static' \| 'absolute'` | `'static'` | `static` position will make it css position set to `static`. `absolute` position will make it css position set to `absolute` and `left`, `right`, `bottom` to `0`. `absolute` position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to ma ke as you expect. |
|
||||
|
||||
@ -55,26 +55,26 @@ scroll-to
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| bordered | `boolean` | `false` | |
|
||||
| bordered | `boolean` | `false` | Whether to show the border. |
|
||||
| collapse-mode | `'transform' \| 'width'` | `'transform'` | If set to `'width'`, the sider's content width will be actually collapsed. If set to `'transform'`, the sider will only move it's position and won't change its content width. |
|
||||
| collapsed | `boolean` | `undefined` | Whether the sider is collapsed. It only works for when `position` is `'static'`. |
|
||||
| collapsed-width | `number` | `48` | |
|
||||
| collapsed-width | `number` | `48` | Folded width. |
|
||||
| content-style | `string \| Object` | `undefined` | Style of scrollable content node. |
|
||||
| default-collapsed | `boolean` | `false` | |
|
||||
| default-collapsed | `boolean` | `false` | Default collapsed state in uncontrolled mode. |
|
||||
| inverted | `boolean` | `false` | Whether to use inverted background. |
|
||||
| native-scrollbar | `boolean` | `true` | Whether to use native scrollbar on itself. If set to `false`, sider will use a naive-ui style scrollbar for content |
|
||||
| native-scrollbar | `boolean` | `true` | Whether to use native scrollbar on itself. If set to `false`, sider will use a naive-ui style scrollbar for content. |
|
||||
| position | `'static' \| 'absolute'` | `'static'` | `static` position will make it css position set to `static`. `absolute` position will make it css position set to `absolute` and `left`, `top`, `bottom` to `0`. `absolute` position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it as you expect. |
|
||||
| show-collapsed-content | `boolean` | `true` | Whether to show content in sider after it is collapsed. |
|
||||
| show-trigger | `boolean \| 'bar' \| 'arrow-circle'` | `false` | Whether to show the built-in trigger button on sider. |
|
||||
| trigger-style | `string \| Object` | `undefined` | |
|
||||
| width | `number \| string` | `272` | |
|
||||
| on-update:collapsed | `(collapsed: boolean) => void` | `undefined` | |
|
||||
| trigger-style | `string \| Object` | `undefined` | Trigger style. |
|
||||
| width | `number \| string` | `272` | Width CSS value. When it is number, px will be added. |
|
||||
| on-update:collapsed | `(collapsed: boolean) => void` | `undefined` | Callback function when the folding state changes. |
|
||||
|
||||
### Layout, Layout Content, Layout Sider, Layout Header, Layout Footer Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ----------- |
|
||||
| default | `()` | |
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | --------------- |
|
||||
| default | `()` | Layout content. |
|
||||
|
||||
### Layout, Layout Content, Layout Sider Methods
|
||||
|
||||
|
||||
@ -32,22 +32,22 @@ scroll-to
|
||||
| content-style | `string \| Object` | `undefined` | 可滚动内容节点的样式 |
|
||||
| embedded | `boolean` | `false` | 使用更深的背景色展现嵌入效果，只对亮色主题生效 |
|
||||
| has-sider | `boolean` | `false` | 组件内部是否有边栏，如果有的话必须设为 `true` |
|
||||
| native-scrollbar | `boolean` | `true` | 是否在自身使用原生滚动条。如果设定为 `false`, Layout 将会对内容使用 naive-ui 风格的滚动条 |
|
||||
| position | `'static' \| 'absolute'` | `'static'` | `static` 模式将会把 CSS `position` 设为 `static`， `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`top`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示 |
|
||||
| native-scrollbar | `boolean` | `true` | 是否在自身使用原生滚动条。如果设定为 `false`，`Layout` 将会对内容使用 `naive-ui` 风格的滚动条 |
|
||||
| position | `'static' \| 'absolute'` | `'static'` | `static` 模式将会把 CSS `position` 设为 `static`，`absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`top`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示 |
|
||||
|
||||
### Layout Footer Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| bordered | `boolean` | `false` | |
|
||||
| bordered | `boolean` | `false` | 是否显示边框 |
|
||||
| inverted | `boolean` | `false` | 使用反转背景色 |
|
||||
| position | `'static' \| 'absolute'` | `'static'` | `static` 模式将会把 CSS `position` 设为 `static`， `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示 |
|
||||
| position | `'static' \| 'absolute'` | `'static'` | `static` 模式将会把 CSS `position` 设为 `static`，`absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示 |
|
||||
|
||||
### Layout Header Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| bordered | `boolean` | `false` | |
|
||||
| bordered | `boolean` | `false` | 是否显示边框 |
|
||||
| inverted | `boolean` | `false` | 使用反转背景色 |
|
||||
| position | `'static' \| 'absolute'` | `'static'` | `static` 模式将会把 CSS `position` 设为 `static`， `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`top` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示 |
|
||||
|
||||
@ -55,26 +55,26 @@ scroll-to
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| bordered | `boolean` | `false` | |
|
||||
| bordered | `boolean` | `false` | 是否显示边框 |
|
||||
| collapse-mode | `'transform' \| 'width'` | `'transform'` | 如果设定为 `'width'`，Sider 的内容宽度将会被实际改变；如果设定为 `'transform'`，边栏将只会移动它的位置而不会改变宽度 |
|
||||
| collapsed | `boolean` | `undefined` | 边栏是否折叠。只在 `position` 为 `'static'` 时生效 |
|
||||
| collapsed-width | `number` | `48` | |
|
||||
| collapsed-width | `number` | `48` | 折叠宽度 |
|
||||
| content-style | `string \| Object` | `undefined` | 可滚动内容节点的样式 |
|
||||
| default-collapsed | `boolean` | `false` | |
|
||||
| default-collapsed | `boolean` | `false` | 非受控模式下的默认折叠状态 |
|
||||
| inverted | `boolean` | `false` | 使用反转背景色 |
|
||||
| native-scrollbar | `boolean` | `true` | 是否在自身使用原生滚动条。如果设定为 `false`, Sider 将会对内容使用 naive-ui 风格的滚动条 |
|
||||
| native-scrollbar | `boolean` | `true` | 是否在自身使用原生滚动条。如果设定为 `false`，`Sider` 将会对内容使用 naive-ui 风格的滚动条 |
|
||||
| position | `'static' \| 'absolute'` | `'static'` | `static` 模式将会把 CSS `position` 设为 `static`， `absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`top`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示 |
|
||||
| show-collapsed-content | `boolean` | `true` | 是否在 sider 折叠后展示内部内容 |
|
||||
| show-collapsed-content | `boolean` | `true` | 是否在 `sider` 折叠后展示内部内容 |
|
||||
| show-trigger | `boolean \| 'bar' \| 'arrow-circle'` | `false` | 内置的触发按钮是否展示 |
|
||||
| trigger-style | `string \| Object` | `undefined` | |
|
||||
| width | `number \| string` | `272` | |
|
||||
| on-update:collapsed | `(collapsed: boolean) => void` | `undefined` | |
|
||||
| trigger-style | `string \| Object` | `undefined` | 触发样式 |
|
||||
| width | `number \| string` | `272` | 宽度的 CSS 值，为数字时会添加 px |
|
||||
| on-update:collapsed | `(collapsed: boolean) => void` | `undefined` | 折叠状态发生改变时的回调函数 |
|
||||
|
||||
### Layout, Layout Content, Layout Sider, Layout Header, Layout Footer Slots
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ---- |
|
||||
| default | `()` | |
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ---------- |
|
||||
| default | `()` | 布局的内容 |
|
||||
|
||||
### Layout, Layout Content, Layout Sider Methods
|
||||
|
||||
|
||||
@ -43,8 +43,8 @@ basic
|
||||
|
||||
### `loadingBar` Injection Methods
|
||||
|
||||
| Name | Type | Description |
|
||||
| ------ | ------------ | ----------- |
|
||||
| error | `() => void` | |
|
||||
| finish | `() => void` | |
|
||||
| start | `() => void` | |
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| error | `() => void` | Callback function for loading bar error. |
|
||||
| finish | `() => void` | The callback function when the loading bar finishes loading. |
|
||||
| start | `() => void` | Callback function for loading bar to start loading. |
|
||||
|
||||
@ -43,8 +43,8 @@ basic
|
||||
|
||||
### `loadingBar` Injection Methods
|
||||
|
||||
| 名称 | 类型 | 说明 |
|
||||
| ------ | ------------ | ---- |
|
||||
| error | `() => void` | |
|
||||
| finish | `() => void` | |
|
||||
| start | `() => void` | |
|
||||
| 名称 | 类型 | 说明 |
|
||||
| ------ | ------------ | ------------------------ |
|
||||
| error | `() => void` | 加载条出现错误的回调函数 |
|
||||
| finish | `() => void` | 加载条结束加载的回调函数 |
|
||||
| start | `() => void` | 加载条开始加载的回调函数 |
|
||||
|
||||
@ -26,9 +26,9 @@ long-label
|
||||
| collapsed-icon-size | `number` | `24` | The icon size when menu is collapsed. If not set, menu will use `icon-size` in place of it. |
|
||||
| collapsed-width | `number` | `48` | The menu width after collapsed. |
|
||||
| collapsed | `boolean` | `false` | The collapsed status of menu, only works when menu is vertical. |
|
||||
| default-expand-all | `boolean` | `false` | |
|
||||
| default-expand-all | `boolean` | `false` | Whether to expand all menus. |
|
||||
| default-expanded-keys | `Array<string>` | `[]` | The default expanded submenu keys of menu in uncontrolled manner. |
|
||||
| default-value | `string \| null` | `null` | |
|
||||
| default-value | `string \| null` | `null` | Whether selected by default in uncontrolled mode. |
|
||||
| dropdown-placement | `'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| ` | `'top'` | Only effective in horizontal mode. |
|
||||
| expanded-keys | `Array<string>` | `undefined` | The expanded submenu keys. If set, menu will work in controlled manner and `default-expanded-names` won't work. |
|
||||
| icon-size | `number` | `20` | The icon size when menu is not collapsed. |
|
||||
|
||||
@ -26,9 +26,9 @@ long-label
|
||||
| collapsed-icon-size | `number` | `24` | 菜单折叠时图标的大小，如果为设定则使用 `icon-size` 代替 |
|
||||
| collapsed-width | `number` | `48` | 折叠后菜单的宽度 |
|
||||
| collapsed | `boolean` | `false` | 菜单是否折叠，值在菜单为垂直时有用 |
|
||||
| default-expand-all | `boolean` | `false` | |
|
||||
| default-expand-all | `boolean` | `false` | 是否展开全部菜单 |
|
||||
| default-expanded-keys | `Array<string>` | `[]` | 在非受控状态下默认展开的子菜单标识符数组 |
|
||||
| default-value | `string \| null` | `null` | |
|
||||
| default-value | `string \| null` | `null` | 非受控模式下的默认值 |
|
||||
| dropdown-placement | `'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| ` | `'top'` | 仅在 `mode='horizontal'` 模式下生效 |
|
||||
| expanded-keys | `Array<string>` | `undefined` | 展开的子菜单标识符数组，如果设定了，菜单的展开将会进入受控状态，`default-expanded-keys` 不会生效 |
|
||||
| icon-size | `number` | `20` | 菜单未折叠时图标的大小 |
|
||||
|
||||
@ -62,18 +62,18 @@ multiple-line
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| error | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | |
|
||||
| info | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | |
|
||||
| loading | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | |
|
||||
| success | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | |
|
||||
| warning | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | |
|
||||
| error | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | Use error type message. |
|
||||
| info | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | Use info type message. |
|
||||
| loading | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | Use loading type message. |
|
||||
| success | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | Use success type message. |
|
||||
| warning | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | Use warning type message. |
|
||||
|
||||
#### MessageOption Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| ------------ | ------------- | ----------------------------------------- |
|
||||
| closable | `boolean` | |
|
||||
| duration | `number` | |
|
||||
| closable | `boolean` | Whether to show close icon. |
|
||||
| duration | `number` | The duration of the message. |
|
||||
| icon | `() => VNode` | Message icon. |
|
||||
| onAfterLeave | `() => void` | Callback after message disappeared. |
|
||||
| onClose | `() => void` | Callback when close icon is clicked. |
|
||||
@ -83,19 +83,19 @@ multiple-line
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| closable | `boolean` | |
|
||||
| closable | `boolean` | Whether to show close icon. |
|
||||
| content | `string \| (() => VNodeChild)` | Message content. |
|
||||
| destory | `() => void` | |
|
||||
| destory | `() => void` | Message destory method. |
|
||||
| icon | `() => VNode` | Message icon. |
|
||||
| type | `'info' \| 'success' \| 'warning' \| 'error' \| 'loading'` | |
|
||||
| type | `'info' \| 'success' \| 'warning' \| 'error' \| 'loading'` | Message type. |
|
||||
| onAfterLeave | `() => void` | Callback after message disappeared. |
|
||||
| onLeave | `() => void` | Callback when message start to disappear. |
|
||||
|
||||
#### MessageReactive Methods
|
||||
|
||||
| Name | Type | Description |
|
||||
| ------- | ---- | ----------- |
|
||||
| destroy | `()` | |
|
||||
| Name | Type | Description |
|
||||
| ------- | ---- | ----------------------- |
|
||||
| destroy | `()` | Message destory method. |
|
||||
|
||||
## Q & A
|
||||
|
||||
|
||||
@ -62,18 +62,18 @@ multiple-line
|
||||
|
||||
| 名称 | 类型 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| error | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | |
|
||||
| info | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | |
|
||||
| loading | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | |
|
||||
| success | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | |
|
||||
| warning | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | |
|
||||
| error | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | 调用 error 类型的信息 |
|
||||
| info | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | 调用 info 类型的信息 |
|
||||
| loading | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | 调用 loading 类型的信息 |
|
||||
| success | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | 调用 success 类型的信息 |
|
||||
| warning | `(content: string \| (() => VNodeChild), option?: MessageOption) => MessageReactive` | 调用 warning 类型的信息 |
|
||||
|
||||
#### MessageOption Properties
|
||||
|
||||
| 名称 | 类型 | 说明 |
|
||||
| ------------ | ------------- | ---------------------- |
|
||||
| closable | `boolean` | |
|
||||
| duration | `number` | |
|
||||
| closable | `boolean` | 是否显示 close 图标 |
|
||||
| duration | `number` | 信息展示的时长 |
|
||||
| icon | `() => VNode` | 信息图标 |
|
||||
| onAfterLeave | `() => void` | 信息消失动画结束的回调 |
|
||||
| onClose | `() => void` | 点击关闭图标的回调 |
|
||||
@ -83,19 +83,19 @@ multiple-line
|
||||
|
||||
| 名称 | 类型 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| closable | `boolean` | |
|
||||
| closable | `boolean` | 是否显示 close 图标 |
|
||||
| content | `string \| (() => VNodeChild)` | 信息内容 |
|
||||
| destory | `() => void` | |
|
||||
| destory | `() => void` | 销毁信息的方法 |
|
||||
| icon | `() => VNode` | 信息图标 |
|
||||
| type | `'info' \| 'success' \| 'warning' \| 'error' \| 'loading'` | |
|
||||
| type | `'info' \| 'success' \| 'warning' \| 'error' \| 'loading'` | 信息类型 |
|
||||
| onAfterLeave | `() => void` | 信息消失动画结束的回调 |
|
||||
| onLeave | `() => void` | 信息开始消失的回调 |
|
||||
|
||||
#### MessageReactive Methods
|
||||
|
||||
| 名称 | 类型 | 说明 |
|
||||
| ------- | ---- | ---- |
|
||||
| destroy | `()` | |
|
||||
| 名称 | 类型 | 说明 |
|
||||
| ------- | ---- | -------------- |
|
||||
| destroy | `()` | 销毁信息的方法 |
|
||||
|
||||
## Q & A
|
||||
|
||||
|
||||
@ -20,27 +20,27 @@ prefix
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| default-page | `number` | `1` | |
|
||||
| default-page-size | `number` | `10` | |
|
||||
| item-count | `number` | `undefined` | |
|
||||
| page-count | `number` | `1` | |
|
||||
| page-sizes | `Array<number>` | `['10']` | |
|
||||
| page-size | `number` | `undefined` | |
|
||||
| page-slot | `number` | `9` | |
|
||||
| page | `number` | `undefined` | |
|
||||
| prefix | `(info: PaginationInfo) => VNodeChild` | `undefined` | |
|
||||
| show-quick-jumper | `boolean` | `false` | |
|
||||
| suffix | `(info: PaginationInfo) => VNodeChild` | `undefined` | |
|
||||
| show-size-picker | `boolean` | `false` | |
|
||||
| on-update:page | `(page: number) => void` | `undefined` | |
|
||||
| on-update:page-size | `(pageSize: number) => void` | `undefined` | |
|
||||
| default-page | `number` | `1` | Current page in uncontrolled mode. |
|
||||
| default-page-size | `number` | `10` | Page size in uncontrolled mode. |
|
||||
| item-count | `number` | `undefined` | Total number. |
|
||||
| page-count | `number` | `1` | Total pages. |
|
||||
| page-sizes | `Array<number>` | `['10']` | Number of items per page. |
|
||||
| page-size | `number` | `undefined` | Page size in controlled mode. |
|
||||
| page-slot | `number` | `9` | The number of pages displayed. |
|
||||
| page | `number` | `undefined` | Current page in controlled mode. |
|
||||
| prefix | `(info: PaginationInfo) => VNodeChild` | `undefined` | Paging prefix. |
|
||||
| show-quick-jumper | `boolean` | `false` | Whether to show fast jump. |
|
||||
| suffix | `(info: PaginationInfo) => VNodeChild` | `undefined` | Page suffix. |
|
||||
| show-size-picker | `boolean` | `false` | Whether to show the selector of the number of items per page. |
|
||||
| on-update:page | `(page: number) => void` | `undefined` | Callback function when the current page changes. |
|
||||
| on-update:page-size | `(pageSize: number) => void` | `undefined` | Callback function when the current page size changes. |
|
||||
|
||||
## Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------ | ------------------------ | ----------- |
|
||||
| prefix | `(info: PaginationInfo)` | |
|
||||
| suffix | `(info: PaginationInfo)` | |
|
||||
| Name | Parameters | Description |
|
||||
| ------ | ------------------------ | ------------ |
|
||||
| prefix | `(info: PaginationInfo)` | Page prefix. |
|
||||
| suffix | `(info: PaginationInfo)` | Page suffix. |
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -20,27 +20,27 @@ prefix
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| default-page | `number` | `1` | |
|
||||
| default-page-size | `number` | `10` | |
|
||||
| item-count | `number` | `undefined` | |
|
||||
| page-count | `number` | `1` | |
|
||||
| page-sizes | `Array<number>` | `['10']` | |
|
||||
| page-size | `number` | `undefined` | |
|
||||
| page-slot | `number` | `9` | |
|
||||
| page | `number` | `undefined` | |
|
||||
| prefix | `(info: PaginationInfo) => VNodeChild` | `undefined` | |
|
||||
| show-quick-jumper | `boolean` | `false` | |
|
||||
| suffix | `(info: PaginationInfo) => VNodeChild` | `undefined` | |
|
||||
| show-size-picker | `boolean` | `false` | |
|
||||
| on-update:page | `(page: number) => void` | `undefined` | |
|
||||
| on-update:page-size | `(pageSize: number) => void` | `undefined` | |
|
||||
| default-page | `number` | `1` | 非受控模式下的当前页 |
|
||||
| default-page-size | `number` | `10` | 非受控模式下的分页大小 |
|
||||
| item-count | `number` | `undefined` | 总条数 |
|
||||
| page-count | `number` | `1` | 总页数 |
|
||||
| page-sizes | `Array<number>` | `['10']` | 每页条数 |
|
||||
| page-size | `number` | `undefined` | 受控模式下的分页大小 |
|
||||
| page-slot | `number` | `9` | 页码显示的个数 |
|
||||
| page | `number` | `undefined` | 受控模式下的当前页 |
|
||||
| prefix | `(info: PaginationInfo) => VNodeChild` | `undefined` | 分页前缀 |
|
||||
| show-quick-jumper | `boolean` | `false` | 是否显示快速跳转 |
|
||||
| suffix | `(info: PaginationInfo) => VNodeChild` | `undefined` | 分页后缀 |
|
||||
| show-size-picker | `boolean` | `false` | 是否显示每页条数的选择器 |
|
||||
| on-update:page | `(page: number) => void` | `undefined` | 当前页发生改变时的回调函数 |
|
||||
| on-update:page-size | `(pageSize: number) => void` | `undefined` | 当前分页大小发生改变时的回调函数 |
|
||||
|
||||
## Slots
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------ | ------------------------ | ---- |
|
||||
| prefix | `(info: PaginationInfo)` | |
|
||||
| suffix | `(info: PaginationInfo)` | |
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------ | ------------------------ | -------- |
|
||||
| prefix | `(info: PaginationInfo)` | 分页前缀 |
|
||||
| suffix | `(info: PaginationInfo)` | 分页后缀 |
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -22,14 +22,14 @@ size
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| description | `string` | `undefined` | |
|
||||
| size | `'small' \| 'medium' \| 'large' \| 'huge'` | `'medium'` | |
|
||||
| status | `'info' \| 'success' \| 'error' \| 'warning' \| 404 \| '404' \| 500 \| '500' \| 400 \| '400' \| 418 \| '418'` | `'info'` | |
|
||||
| title | `string` | `undefined` | |
|
||||
| description | `string` | `undefined` | Description. |
|
||||
| size | `'small' \| 'medium' \| 'large' \| 'huge'` | `'medium'` | Size. |
|
||||
| status | `'info' \| 'success' \| 'error' \| 'warning' \| 404 \| '404' \| 500 \| '500' \| 400 \| '400' \| 418 \| '418'` | `'info'` | Status. |
|
||||
| title | `string` | `undefined` | Title. |
|
||||
|
||||
## Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ----------- |
|
||||
| default | `()` | |
|
||||
| footer | `()` | |
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ---------------------------------------------- |
|
||||
| default | `()` | Results page content information. |
|
||||
| footer | `()` | Information at the bottom of the results page. |
|
||||
|
||||
@ -22,14 +22,14 @@ size
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| description | `string` | `undefined` | |
|
||||
| size | `'small' \| 'medium' \| 'large' \| 'huge'` | `'medium'` | |
|
||||
| status | `'info' \| 'success' \| 'error' \| 'warning' \| 404 \| '404' \| 500 \| '500' \| 400 \| '400' \| 418 \| '418'` | `'info'` | |
|
||||
| title | `string` | `undefined` | |
|
||||
| description | `string` | `undefined` | 描述信息 |
|
||||
| size | `'small' \| 'medium' \| 'large' \| 'huge'` | `'medium'` | 大小 |
|
||||
| status | `'info' \| 'success' \| 'error' \| 'warning' \| 404 \| '404' \| 500 \| '500' \| 400 \| '400' \| 418 \| '418'` | `'info'` | 状态 |
|
||||
| title | `string` | `undefined` | 标题 |
|
||||
|
||||
## Slots
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ---- |
|
||||
| default | `()` | |
|
||||
| footer | `()` | |
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | -------------- |
|
||||
| default | `()` | 结果页内容信息 |
|
||||
| footer | `()` | 结果页底部信息 |
|
||||
|
||||
@ -12,14 +12,14 @@ size
|
||||
|
||||
## Props
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| -------- | -------------------------------- | ----------- | ----------- |
|
||||
| text | `boolean` | `false` | |
|
||||
| round | `boolean` | `false` | |
|
||||
| circle | `boolean` | `false` | |
|
||||
| height | `string \| number` | `undefined` | |
|
||||
| width | `string \| number` | `undefined` | |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `undefined` | |
|
||||
| repeat | `string \| number` | `1` | |
|
||||
| animated | `boolean` | `true` | |
|
||||
| sharp | `boolean` | `true` | |
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| text | `boolean` | `false` | Text skeleton. |
|
||||
| round | `boolean` | `false` | Round skeleton. |
|
||||
| circle | `boolean` | `false` | Circle skeleton. |
|
||||
| height | `string \| number` | `undefined` | Skeleton height. |
|
||||
| width | `string \| number` | `undefined` | Skeleton width. |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `undefined` | Skeleton size. |
|
||||
| repeat | `string \| number` | `1` | Repeat frequency. |
|
||||
| animated | `boolean` | `true` | Whether to enable animation. |
|
||||
| sharp | `boolean` | `true` | Whether to display as a right angled skeleton. |
|
||||
|
||||
@ -12,14 +12,14 @@ size
|
||||
|
||||
## Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| -------- | -------------------------------- | ----------- | ---- |
|
||||
| text | `boolean` | `false` | |
|
||||
| round | `boolean` | `false` | |
|
||||
| circle | `boolean` | `false` | |
|
||||
| height | `string \| number` | `undefined` | |
|
||||
| width | `string \| number` | `undefined` | |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `undefined` | |
|
||||
| repeat | `string \| number` | `1` | |
|
||||
| animated | `boolean` | `true` | |
|
||||
| sharp | `boolean` | `true` | |
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| text | `boolean` | `false` | 文本骨架 |
|
||||
| round | `boolean` | `false` | 圆角骨架 |
|
||||
| circle | `boolean` | `false` | 圆形骨架 |
|
||||
| height | `string \| number` | `undefined` | 骨架高度 |
|
||||
| width | `string \| number` | `undefined` | 骨架宽度 |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `undefined` | 骨架大小 |
|
||||
| repeat | `string \| number` | `1` | 重复次数 |
|
||||
| animated | `boolean` | `true` | 是否启用动画 |
|
||||
| sharp | `boolean` | `true` | 是否显示为直角骨架 |
|
||||
|
||||
@ -17,16 +17,16 @@ center
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| align | `'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch'` | `undefined` | |
|
||||
| inline | `boolean` | `false` | |
|
||||
| item-style | `string \| object` | `undefined` | |
|
||||
| justify | `'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between'` | `'start'` | |
|
||||
| size | `'small' \| 'medium' \| 'large' \| number \| [number, number]` | `'medium'` | |
|
||||
| vertical | `boolean` | `false` | |
|
||||
| wrap | `boolean` | `true` | |
|
||||
| align | `'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch'` | `undefined` | Vertical arrangement. |
|
||||
| inline | `boolean` | `false` | Is it an inline element. |
|
||||
| item-style | `string \| object` | `undefined` | Node style. |
|
||||
| justify | `'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between'` | `'start'` | Horizontal arrangement. |
|
||||
| size | `'small' \| 'medium' \| 'large' \| number \| [number, number]` | `'medium'` | Size. |
|
||||
| vertical | `boolean` | `false` | Whether to lay out vertically. |
|
||||
| wrap | `boolean` | `true` | Whether to exceed the line break. |
|
||||
|
||||
## Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ----------- |
|
||||
| default | `()` | |
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ---------------- |
|
||||
| default | `()` | Spacing content. |
|
||||
|
||||
@ -18,16 +18,16 @@ grid-debug
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| align | `'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch'` | `undefined` | |
|
||||
| inline | `boolean` | `false` | |
|
||||
| item-style | `string \| object` | `undefined` | |
|
||||
| justify | `'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between'` | `'start'` | |
|
||||
| size | `'small' \| 'medium' \| 'large' \| number \| [number, number]` | `'medium'` | |
|
||||
| vertical | `boolean` | `false` | |
|
||||
| wrap | `boolean` | `true` | |
|
||||
| align | `'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch'` | `undefined` | 垂直排列方式 |
|
||||
| inline | `boolean` | `false` | 是否为行内元素 |
|
||||
| item-style | `string \| object` | `undefined` | 节点样式 |
|
||||
| justify | `'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between'` | `'start'` | 水平排列方式 |
|
||||
| size | `'small' \| 'medium' \| 'large' \| number \| [number, number]` | `'medium'` | 大小 |
|
||||
| vertical | `boolean` | `false` | 是否垂直布局 |
|
||||
| wrap | `boolean` | `true` | 是否超出换行 |
|
||||
|
||||
## Slots
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ---- |
|
||||
| default | `()` | |
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | -------- |
|
||||
| default | `()` | 间距内容 |
|
||||
|
||||
@ -20,18 +20,18 @@ custom-icon
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| current | `number` | `undefined` | |
|
||||
| size | `'small' \| 'medium'` | `'medium'` | |
|
||||
| status | `'process' \| 'finish' \| 'error' \| 'wait'` | `'process'` | |
|
||||
| vertical | `boolean` | `false` | |
|
||||
| current | `number` | `undefined` | Currently selected in the first steps. |
|
||||
| size | `'small' \| 'medium'` | `'medium'` | Steps size. |
|
||||
| status | `'process' \| 'finish' \| 'error' \| 'wait'` | `'process'` | Steps status. |
|
||||
| vertical | `boolean` | `false` | Steps vertical. |
|
||||
|
||||
### Step Props
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| description | `string` | `undefined` | |
|
||||
| status | `'process' \| 'finish' \| 'error' \| 'wait'` | `undefined` | |
|
||||
| title | `string` | `undefined` | |
|
||||
| description | `string` | `undefined` | Step description. |
|
||||
| status | `'process' \| 'finish' \| 'error' \| 'wait'` | `undefined` | Step status. |
|
||||
| title | `string` | `undefined` | Step title. |
|
||||
|
||||
## Slots
|
||||
|
||||
@ -39,12 +39,12 @@ custom-icon
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ----------- | ---------- | -------------------------------- |
|
||||
| default | `()` | |
|
||||
| default | `()` | Steps content. |
|
||||
| finish-icon | `()` | `'finish'` status button deploy. |
|
||||
| error-icon | `()` | `'error'` status button deploy. |
|
||||
|
||||
### Step Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ----------- |
|
||||
| default | `()` | |
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ------------- |
|
||||
| default | `()` | Step content. |
|
||||
|
||||
@ -18,20 +18,20 @@ custom-icon
|
||||
|
||||
### Steps Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| -------- | -------------------------------------------- | ----------- | ---- |
|
||||
| current | `number` | `undefined` | |
|
||||
| size | `'small' \| 'medium'` | `'medium'` | |
|
||||
| status | `'process' \| 'finish' \| 'error' \| 'wait'` | `'process'` | |
|
||||
| vertical | `boolean` | `false` | |
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| current | `number` | `undefined` | 当前选中在第几步 |
|
||||
| size | `'small' \| 'medium'` | `'medium'` | 步骤条大小 |
|
||||
| status | `'process' \| 'finish' \| 'error' \| 'wait'` | `'process'` | 步骤条状态 |
|
||||
| vertical | `boolean` | `false` | 步骤条方向 |
|
||||
|
||||
### Step Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| description | `string` | `undefined` | |
|
||||
| status | `'process' \| 'finish' \| 'error' \| 'wait'` | `undefined` | |
|
||||
| title | `string` | `undefined` | |
|
||||
| description | `string` | `undefined` | 节点描述 |
|
||||
| status | `'process' \| 'finish' \| 'error' \| 'wait'` | `undefined` | 节点状态 |
|
||||
| title | `string` | `undefined` | 节点标题 |
|
||||
|
||||
## Slots
|
||||
|
||||
@ -39,12 +39,12 @@ custom-icon
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ----------- | ---- | ----------------------- |
|
||||
| default | `()` | |
|
||||
| default | `()` | 步骤条内容 |
|
||||
| finish-icon | `()` | `'finish'` 状态按钮配置 |
|
||||
| error-icon | `()` | `'error'` 状态按钮配置 |
|
||||
|
||||
### Step Slots
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ---- |
|
||||
| default | `()` | |
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | -------------- |
|
||||
| default | `()` | 步骤条节点内容 |
|
||||
|
||||
@ -12,6 +12,7 @@ size
|
||||
prefix
|
||||
display-directive
|
||||
addable
|
||||
line-debug
|
||||
```
|
||||
|
||||
## Props
|
||||
@ -20,44 +21,44 @@ addable
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| addable | `boolean \| { disabled?: boolean }` | `false` | Whether to show add button. Only works when type is `'card'`. |
|
||||
| default-value | `string \| number` | name prop of the first tab | |
|
||||
| closable | `boolean` | `false` | Whether to allow tab to close, Only works when type is `'card'`. |
|
||||
| justify-content | `'space-between' \| 'space-around' \| 'space-evenly'` | `undefined` | |
|
||||
| addable | `boolean \| { disabled?: boolean }` | `false` | Whether to allow add tag. Only works when the tag's `type` is `card`. |
|
||||
| closable | `boolean` | `false` | Whether to allow the tag to be closed. Only works when the tag's `type` is `card`. |
|
||||
| default-value | `string \| number` | `undefined` | Default value in uncontrolled mode. |
|
||||
| justify-content | `'space-between' \| 'space-around' \| 'space-evenly'` | `undefined` | Justify-content value of `flex` layout. |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of tabs. |
|
||||
| show-divider | `boolean` | `false` | Whether to show divider of tabs. Only works when type is `'line'`. |
|
||||
| show-divider | `boolean` | `false` | Whether to show divider of tabs. Only works when `type` is `line`. |
|
||||
| pane-style | `string \| object` | `undefined` | Style of the pane. |
|
||||
| tab-style | `string \| object` | `undefined` | Style of the tab. |
|
||||
| tabs-padding | `number` | `0` | Left & right padding of the group of tabs. |
|
||||
| type | `'bar' \| 'line' \| 'card'` | `'bar'` | |
|
||||
| value | `string \| number` | `undefined` | |
|
||||
| on-add | `() => void` | `undefined` | |
|
||||
| on-close | `(name: string \| number) => void` | `undefined` | |
|
||||
| on-update:value | `(value: string \| number) => void` | `undefined` | |
|
||||
| tabs-padding | `number` | `0` | Left & right `padding` of the group of tabs. |
|
||||
| type | `'bar' \| 'line' \| 'card'` | `'bar'` | Tabs type. |
|
||||
| value | `string \| number` | `undefined` | Value in controlled mode. |
|
||||
| on-add | `() => void` | `undefined` | Callback function triggered when add tag. |
|
||||
| on-close | `(name: string \| number) => void` | `undefined` | Callback function triggered when close tag. |
|
||||
| on-update:value | `(value: string \| number) => void` | `undefined` | Callback function triggered when the value changes. |
|
||||
|
||||
### Tab Pane Props
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| closable | `boolean` | `false` | Whether to allow tab to close, Only works when tabs type is `'card'`. |
|
||||
| disabled | `boolean` | `false` | |
|
||||
| display-directive | `'if' \| 'show'` | `'if'` | The directive to use in conditionally rendering. 'if' will use 'v-if' and 'show' will use 'v-show'. When use show directive, the status of tab won't be reset after tab changes. |
|
||||
| tab | `string \| VNode \| () => VNodeChild` | `undefined` | |
|
||||
| name | `string \| number` | required | |
|
||||
| closable | `boolean` | `false` | Whether to allow the tag to be closed. Only works when the tag's `type` is `card`. |
|
||||
| disabled | `boolean` | `false` | Whether to disable. |
|
||||
| display-directive | `'if' \| 'show'` | `'if'` | The directive to use in conditionally rendering. `if` will use `v-if` and `show` will use `v-show`. When use show directive, the status of tab won't be reset after tab changes. |
|
||||
| tab | `string \| VNode \| () => VNodeChild` | `undefined` | Tab label. |
|
||||
| name | `string \| number` | `undefined` | Required, the name of the tab. |
|
||||
|
||||
## Slots
|
||||
|
||||
### Tabs Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ----------- |
|
||||
| default | `()` | |
|
||||
| prefix | `()` | |
|
||||
| suffux | `()` | |
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ------------- |
|
||||
| default | `()` | Tabs content. |
|
||||
| prefix | `()` | Tabs prefix. |
|
||||
| suffix | `()` | Tabs suffix. |
|
||||
|
||||
### Tab Pane Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ----------- |
|
||||
| default | `()` | |
|
||||
| tab | `()` | |
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ------------------ |
|
||||
| default | `()` | Tab content. |
|
||||
| tab | `()` | Tab label content. |
|
||||
|
||||
31
src/tabs/demos/enUS/line-debug.demo.md
Normal file
31
src/tabs/demos/enUS/line-debug.demo.md
Normal file
@ -0,0 +1,31 @@
|
||||
# Line Debug
|
||||
|
||||
```html
|
||||
<n-button @click="name = 'the beatles'">Set Name to the Beatles</n-button>
|
||||
|
||||
<n-card title="song" style="margin-bottom: 16px;">
|
||||
<n-tabs v-model:value="name">
|
||||
<n-tab-pane name="oasis" tab="Oasis"> Wonderwall </n-tab-pane>
|
||||
<n-tab-pane name="the beatles" tab="the Beatles"> Hey Jude </n-tab-pane>
|
||||
<n-tab-pane name="jay chou" tab="jay chou"> 七里香 </n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-card>
|
||||
```
|
||||
|
||||
```js
|
||||
import { defineComponent, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
return {
|
||||
name: ref('oasis')
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
```css
|
||||
.n-button {
|
||||
margin-top: 12px;
|
||||
}
|
||||
```
|
||||
@ -21,43 +21,44 @@ line-debug
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| addable | `boolean \| { disabled?: boolean }` | `false` | 是否展示增加按钮，只在 type 为 `'card'` 时生效 |
|
||||
| closable | `boolean` | `false` | 是否允许 tab 关闭，只在 type 为 `'card'` 时生效 |
|
||||
| default-value | `string \| number` | 第一个标签页的 name 属性 | |
|
||||
| justify-content | `'space-between' \| 'space-around' \| 'space-evenly'` | `undefined` | |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | |
|
||||
| addable | `boolean \| { disabled?: boolean }` | `false` | 是否允许添加标签，只在标签的 `type` 为 `card` 时生效 |
|
||||
| closable | `boolean` | `false` | 是否允许关闭标签，只在标签的 `type` 为 `card` 时生效 |
|
||||
| default-value | `string \| number` | `undefined` | 非受控模式下的默认值 |
|
||||
| justify-content | `'space-between' \| 'space-around' \| 'space-evenly'` | `undefined` | `flex` 布局下主轴的排列方式 |
|
||||
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 标签页的尺寸 |
|
||||
| show-divider | `boolean` | `false` | 是否显示标签分隔符，仅在 `type` 为 `line` 时有效 |
|
||||
| pane-style | `string \| object` | `undefined` | 面板的样式 |
|
||||
| tab-style | `string \| object` | `undefined` | 标签的样式 |
|
||||
| tabs-padding | `number` | `0` | 全部标签最左和最右的 padding |
|
||||
| type | `'bar' \| 'line' \| 'card'` | `'bar'` | |
|
||||
| value | `string \| number` | `undefined` | |
|
||||
| on-add | `() => void` | `undefined` | |
|
||||
| on-close | `(name: string \| number) => void` | `undefined` | |
|
||||
| on-update:value | `(value: string \| number) => void` | `undefined` | |
|
||||
| tabs-padding | `number` | `0` | 全部标签最左和最右的 `padding` |
|
||||
| type | `'bar' \| 'line' \| 'card'` | `'bar'` | 标签类型 |
|
||||
| value | `string \| number` | `undefined` | 受控模式下的值 |
|
||||
| on-add | `() => void` | `undefined` | 添加标签的回调函数 |
|
||||
| on-close | `(name: string \| number) => void` | `undefined` | 关闭标签的回调函数 |
|
||||
| on-update:value | `(value: string \| number) => void` | `undefined` | 选中发生改变时的回调函数 |
|
||||
|
||||
### Tab Pane Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| closable | `boolean` | `false` | 是否允许 tab 关闭，只在 tabs type 为 `'card'` 时生效 |
|
||||
| disabled | `boolean` | `false` | |
|
||||
| display-directive | `'if' \| 'show'` | `'if'` | 选择性渲染使用的指令。if 对应 v-if，show 对应 v-show，使用 show 的时候标签页状态切换后不会被重置 |
|
||||
| tab | `string \| VNode \| () => VNodeChild` | `undefined` | |
|
||||
| name | `string \| number` | required | |
|
||||
| closable | `boolean` | `false` | 是否允许关闭标签，只在标签的 `type` 为 `card` 时生效 |
|
||||
| disabled | `boolean` | `false` | 是否禁用 |
|
||||
| display-directive | `'if' \| 'show'` | `'if'` | 选择性渲染使用的指令，`if` 对应 `v-if`，`show` 对应 `v-show`，使用 `show` 的时候标签页状态切换后不会被重置 |
|
||||
| tab | `string \| VNode \| () => VNodeChild` | `undefined` | 标签的 `tab` |
|
||||
| name | `string \| number` | `undefined` | 必填，标签的名称 |
|
||||
|
||||
## Slots
|
||||
|
||||
### Tabs
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ---- |
|
||||
| default | `()` | |
|
||||
| prefix | `()` | |
|
||||
| suffux | `()` | |
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ---------- |
|
||||
| default | `()` | 标签的内容 |
|
||||
| prefix | `()` | 标签的前缀 |
|
||||
| suffix | `()` | 标签的后缀 |
|
||||
|
||||
### Tab Pane Slots
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ---- |
|
||||
| default | `()` | |
|
||||
| tab | `()` | |
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ------------------- |
|
||||
| default | `()` | 标签项的内容 |
|
||||
| tab | `()` | 标签项 `tab` 的内容 |
|
||||
|
||||
@ -1,25 +1,27 @@
|
||||
# Line Debug
|
||||
# 调试
|
||||
|
||||
```html
|
||||
<n-button @click="name = 'the beatles'">Set Name to the Beatles</n-button>
|
||||
<n-button @click="name = 'the beatles'">将名称设置为披头士乐队</n-button>
|
||||
|
||||
<n-card title="歌曲" style="margin-bottom: 16px;">
|
||||
<n-tabs v-model:value="name">
|
||||
<n-tab-pane name="oasis" tab="Oasis"> Wonderwall </n-tab-pane>
|
||||
<n-tab-pane name="the beatles" tab="the Beatles"> Hey Jude </n-tab-pane>
|
||||
<n-tab-pane name="oasis" tab="绿洲乐队"> Wonderwall </n-tab-pane>
|
||||
<n-tab-pane name="the beatles" tab="披头士乐队"> Hey Jude </n-tab-pane>
|
||||
<n-tab-pane name="jay chou" tab="周杰伦"> 七里香 </n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-card>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
import { defineComponent, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
return {
|
||||
name: 'oasis'
|
||||
name: ref('oasis')
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
@ -13,20 +13,20 @@ indent
|
||||
|
||||
## Props
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| ---------------- | --------- | ----------- | ----------- |
|
||||
| content-indented | `boolean` | `false` | |
|
||||
| content | `string` | `undefined` | |
|
||||
| description | `string` | `undefined` | |
|
||||
| title-extra | `string` | `undefined` | |
|
||||
| title | `string` | `undefined` | |
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| content-indented | `boolean` | `false` | Whether to enable content indentation. |
|
||||
| content | `string` | `undefined` | Content area. |
|
||||
| description | `string` | `undefined` | Description information. |
|
||||
| title-extra | `string` | `undefined` | Additional information for the title. |
|
||||
| title | `string` | `undefined` | Title information. |
|
||||
|
||||
## Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------------ | ---------- | ----------- |
|
||||
| action | `()` | |
|
||||
| default | `()` | |
|
||||
| description | `()` | |
|
||||
| header-extra | `()` | |
|
||||
| header | `()` | |
|
||||
| Name | Parameters | Description |
|
||||
| ------------ | ---------- | ------------------------------------- |
|
||||
| action | `()` | Operating area slot. |
|
||||
| default | `()` | Content information. |
|
||||
| description | `()` | Description information. |
|
||||
| header-extra | `()` | Additional information in the header. |
|
||||
| header | `()` | Header information. |
|
||||
|
||||
@ -13,20 +13,20 @@ indent
|
||||
|
||||
## Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | --------- | ----------- | ---- |
|
||||
| content-indented | `boolean` | `false` | |
|
||||
| content | `string` | `undefined` | |
|
||||
| description | `string` | `undefined` | |
|
||||
| title-extra | `string` | `undefined` | |
|
||||
| title | `string` | `undefined` | |
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | --------- | ----------- | ---------------- |
|
||||
| content-indented | `boolean` | `false` | 是否启用内容缩进 |
|
||||
| content | `string` | `undefined` | 内容区域 |
|
||||
| description | `string` | `undefined` | 描述信息 |
|
||||
| title-extra | `string` | `undefined` | 标题的附加信息 |
|
||||
| title | `string` | `undefined` | 标题 |
|
||||
|
||||
## Slots
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------------ | ---- | ---- |
|
||||
| action | `()` | |
|
||||
| default | `()` | |
|
||||
| description | `()` | |
|
||||
| header-extra | `()` | |
|
||||
| header | `()` | |
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------------ | ---- | -------------- |
|
||||
| action | `()` | 操作区域插槽 |
|
||||
| default | `()` | 内容信息 |
|
||||
| description | `()` | 描述信息 |
|
||||
| header-extra | `()` | 头部的附加信息 |
|
||||
| header | `()` | 头部信息 |
|
||||
|
||||
@ -14,10 +14,10 @@ unix
|
||||
|
||||
## Props
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| ------ | ------------------------------------ | ------------ | ----------- |
|
||||
| format | `string` | `undefined` | |
|
||||
| time | `number \| Date` | `Date.now()` | |
|
||||
| to | `number \| Date` | `Date.now()` | |
|
||||
| type | `'relative' \| 'date' \| 'datetime'` | `'datetime'` | |
|
||||
| unix | `boolean` | `false` | |
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| format | `string` | `undefined` | Time format. |
|
||||
| time | `number \| Date` | `Date.now()` | Time. |
|
||||
| to | `number \| Date` | `Date.now()` | Target time. |
|
||||
| type | `'relative' \| 'date' \| 'datetime'` | `'datetime'` | Time type. |
|
||||
| unix | `boolean` | `false` | `unix` timestamp. |
|
||||
|
||||
@ -14,10 +14,10 @@ unix
|
||||
|
||||
## Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| ------ | ------------------------------------ | ------------ | ---- |
|
||||
| format | `string` | `undefined` | |
|
||||
| time | `number \| Date` | `Date.now()` | |
|
||||
| to | `number \| Date` | `Date.now()` | |
|
||||
| type | `'relative' \| 'date' \| 'datetime'` | `'datetime'` | |
|
||||
| unix | `boolean` | `false` | |
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| ------ | ------------------------------------ | ------------ | ------------- |
|
||||
| format | `string` | `undefined` | 时间格式化 |
|
||||
| time | `number \| Date` | `Date.now()` | 时间 |
|
||||
| to | `number \| Date` | `Date.now()` | 目标时间 |
|
||||
| type | `'relative' \| 'date' \| 'datetime'` | `'datetime'` | 时间类型 |
|
||||
| unix | `boolean` | `false` | `unix` 时间戳 |
|
||||
|
||||
@ -16,30 +16,30 @@ item-placement
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| -------------- | --------------------- | ---------- | ----------- |
|
||||
| item-placement | `'left' \| 'right'` | `'left'` | |
|
||||
| size | `'medium' \| 'large'` | `'medium'` | |
|
||||
| item-placement | `'left' \| 'right'` | `'left'` | Direction. |
|
||||
| size | `'medium' \| 'large'` | `'medium'` | Size. |
|
||||
|
||||
### Timeline Item Props
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| content | `string` | `undefined` | |
|
||||
| time | `string` | `undefined` | |
|
||||
| title | `string` | `undefined` | |
|
||||
| type | `'default' \| 'success' \| 'info' \| 'warning' \| 'error'` | `'default'` | |
|
||||
| content | `string` | `undefined` | Item content. |
|
||||
| time | `string` | `undefined` | Item time. |
|
||||
| title | `string` | `undefined` | Item title. |
|
||||
| type | `'default' \| 'success' \| 'info' \| 'warning' \| 'error'` | `'default'` | Item type. |
|
||||
|
||||
## Slots
|
||||
|
||||
### Timeline Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ----------- |
|
||||
| default | `()` | |
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ----------------- |
|
||||
| default | `()` | Timeline Content. |
|
||||
|
||||
### Timeline Item Slots
|
||||
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ----------- |
|
||||
| default | `()` | |
|
||||
| footer | `()` | |
|
||||
| header | `()` | |
|
||||
| Name | Parameters | Description |
|
||||
| ------- | ---------- | ---------------------------------------------- |
|
||||
| default | `()` | Timeline item content. |
|
||||
| footer | `()` | Content at the bottom of the timeline options. |
|
||||
| header | `()` | Content at the top of the timeline options. |
|
||||
|
||||
@ -16,30 +16,30 @@ item-placement
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| -------------- | --------------------- | ---------- | ---- |
|
||||
| item-placement | `'left' \| 'right'` | `'left'` | |
|
||||
| size | `'medium' \| 'large'` | `'medium'` | |
|
||||
| item-placement | `'left' \| 'right'` | `'left'` | 方向 |
|
||||
| size | `'medium' \| 'large'` | `'medium'` | 大小 |
|
||||
|
||||
### Timeline Item Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| content | `string` | `undefined` | |
|
||||
| time | `string` | `undefined` | |
|
||||
| title | `string` | `undefined` | |
|
||||
| type | `'default' \| 'success' \| 'info' \| 'warning' \| 'error'` | `'default'` | |
|
||||
| content | `string` | `undefined` | 选项内容 |
|
||||
| time | `string` | `undefined` | 选项时间 |
|
||||
| title | `string` | `undefined` | 选项标题 |
|
||||
| type | `'default' \| 'success' \| 'info' \| 'warning' \| 'error'` | `'default'` | 选项类型 |
|
||||
|
||||
## Slots
|
||||
|
||||
### Timeline Slots
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ---- |
|
||||
| default | `()` | |
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ---------- |
|
||||
| default | `()` | 时间线内容 |
|
||||
|
||||
### Timeline Item Slots
|
||||
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ---- |
|
||||
| default | `()` | |
|
||||
| footer | `()` | |
|
||||
| header | `()` | |
|
||||
| 名称 | 参数 | 说明 |
|
||||
| ------- | ---- | ------------------ |
|
||||
| default | `()` | 时间线选项内容 |
|
||||
| footer | `()` | 时间线选项底部内容 |
|
||||
| header | `()` | 时间线选项头部内容 |
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
# Use Checkbox
|
||||
|
||||
If you want to achieve the effect of demo, `checkable`, `cascade` and `multiple` are indispensable.
|
||||
|
||||
```html
|
||||
<n-tree-select
|
||||
multiple
|
||||
cascade
|
||||
checkable
|
||||
:options="options"
|
||||
:default-value="['Norwegian Wood']"
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
# 使用 Checkbox 选择
|
||||
|
||||
想达到 demo 的效果，`checkable`、`cascade`、`multiple` 需要同时设定。
|
||||
|
||||
```html
|
||||
<n-tree-select
|
||||
multiple
|
||||
cascade
|
||||
checkable
|
||||
:options="options"
|
||||
:default-value="['Norwegian Wood']"
|
||||
|
||||
@ -26,39 +26,40 @@ batch-render
|
||||
| Name | Type | default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| allow-drop | `(info: { dropPosition: DropPosition, node: TreeOption, phase: 'drag' \| 'drop' }) => boolean` | A function that prohibit dropping inside leaf node. | Whether to allow dropping. |
|
||||
| block-line | `boolean` | `false` | |
|
||||
| block-node | `boolean` | `false` | |
|
||||
| block-line | `boolean` | `false` | Nodes spread out the whole row. |
|
||||
| block-node | `boolean` | `false` | The node name is spread out in the whole row. |
|
||||
| cancelable | `boolean` | `true` | Whether node's select status can be cancelled. |
|
||||
| cascade | `boolean` | `false` | Whether to cascade checkboxes. |
|
||||
| checkable | `boolean` | `false` | |
|
||||
| checkable | `boolean` | `false` | Whether to display the selection box, you need to set `cascade` to `true`. |
|
||||
| checked-keys | `Array<string \| number>` | `undefined` | If set, checked status will work in controlled manner. |
|
||||
| data | `Array<TreeOption>` | `[]` | The node data of the tree. Reset `data` will cause clearing of some uncontrolled status. If you need to modify data, you'd better make tree work in a controlled manner. |
|
||||
| default-checked-keys | `Array<string \| number>` | `[]` | |
|
||||
| default-expand-all | `boolean` | `false` | |
|
||||
| default-expanded-keys | `Array<string \| number>` | `[]` | |
|
||||
| default-selected-keys | `Array<string \| number>` | `[]` | |
|
||||
| draggable | `boolean` | `false` | |
|
||||
| default-checked-keys | `Array<string \| number>` | `[]` | Multiple options selected by default. |
|
||||
| default-expand-all | `boolean` | `false` | Expand all options. |
|
||||
| default-expanded-keys | `Array<string \| number>` | `[]` | Expanded items by default. |
|
||||
| default-selected-keys | `Array<string \| number>` | `[]` | Nodes selected by default. |
|
||||
| draggable | `boolean` | `false` | Whether it can be dragged. |
|
||||
| expand-on-dragenter | `boolean` | `true` | Whether to expand nodes after dragenter. |
|
||||
| expanded-keys | `Array<string \| number>` | `undefined` | If set, expanded status will work in controlled manner. |
|
||||
| filter | `(node: TreeOption) => boolean` | A simple string based filter | |
|
||||
| multiple | `boolean` | `false` | |
|
||||
| on-load | `(node: TreeOption) => Promise<void>` | `undefined` | |
|
||||
| pattern | `string` | `''` | |
|
||||
| remote | `boolean` | `false` | Whether to load nodes async. It should work with `on-load` |
|
||||
| filter | `(node: TreeOption) => boolean` | `undefined` | A simple string based filter. |
|
||||
| leaf-only | `boolean` | `false` | Whether to open or not, only the bottom tree node is optional. |
|
||||
| multiple | `boolean` | `false` | Whether to allow multiple selection of nodes. |
|
||||
| on-load | `(node: TreeOption) => Promise<void>` | `undefined` | Callback function for asynchronously loading data. |
|
||||
| pattern | `string` | `''` | What to search by default. |
|
||||
| remote | `boolean` | `false` | Whether to load nodes async. It should work with `on-load`. |
|
||||
| render-label | `(info: {option: TreeOption, checked: boolean, selected: boolean}) => VNodeChild` | `undefined` | Render function of all the options' label. |
|
||||
| render-prefix | `(info: {option: TreeOption, checked: boolean, selected: boolean}) => VNodeChild` | `undefined` | Render function of all the options' prefix. |
|
||||
| render-suffix | `(info: {option: TreeOption, checked: boolean, selected: boolean}) => VNodeChild` | `undefined` | Render function of all the options' suffix. |
|
||||
| selectable | `boolean` | `true` | |
|
||||
| selectable | `boolean` | `true` | Whether the node can be selected. |
|
||||
| selected-keys | `Array<string \| number>` | `undefined` | If set, selected status will work in controlled manner. |
|
||||
| virtual-scroll | `boolean` | `false` | Whether to enable virtual scroll. You need to set proper style height of the tree in advance. |
|
||||
| on-dragend | `(data: { node: TreeOption, event: DragEvent }) => void` | `undefined` | |
|
||||
| on-dragenter | `(data: { node: TreeOption, event: DragEvent }) => void` | `undefined` | |
|
||||
| on-dragleave | `(data: { node: TreeOption, event: DragEvent }) => void` | `undefined` | |
|
||||
| on-dragstart | `(data: { node: TreeOption, event: DragEvent }) => void` | `undefined` | |
|
||||
| on-drop | `(data: { node: TreeOption, dragNode: TreeOption, dropPosition: 'before' \| 'inside' \| 'after', event: DragEvent }) => void` | `undefined` | |
|
||||
| on-update:checked-keys | `(keys: Array<string \| number>) => void` | `undefined` | |
|
||||
| on-update:expanded-keys | `(keys: Array<string \| number>) => void` | `undefined` | |
|
||||
| on-update:selected-keys | `(keys: Array<string \| number>) => void` | `undefined` | |
|
||||
| on-dragend | `(data: { node: TreeOption, event: DragEvent }) => void` | `undefined` | The callback function after the node completes the dragging action. |
|
||||
| on-dragenter | `(data: { node: TreeOption, event: DragEvent }) => void` | `undefined` | Callback function in node drag and drop. |
|
||||
| on-dragleave | `(data: { node: TreeOption, event: DragEvent }) => void` | `undefined` | Drag a node, the callback function after the node leaves other nodes. |
|
||||
| on-dragstart | `(data: { node: TreeOption, event: DragEvent }) => void` | `undefined` | Callback function to start dragging a certain node. |
|
||||
| on-drop | `(data: { node: TreeOption, dragNode: TreeOption, dropPosition: 'before' \| 'inside' \| 'after', event: DragEvent }) => void` | `undefined` | The callback function after the node completes the dragging action. |
|
||||
| on-update:checked-keys | `(keys: Array<string \| number>) => void` | `undefined` | Callback function when node multiple options change. |
|
||||
| on-update:expanded-keys | `(keys: Array<string \| number>) => void` | `undefined` | The callback function when the node expansion item changes. |
|
||||
| on-update:selected-keys | `(keys: Array<string \| number>) => void` | `undefined` | The callback function when the selected item of the node changes. |
|
||||
|
||||
### TreeOption Properties
|
||||
|
||||
|
||||
@ -26,50 +26,50 @@ batch-render
|
||||
| 名称 | 类型 | 默认值 | 说明 |
|
||||
| --- | --- | --- | --- |
|
||||
| allow-drop | `(info: { dropPosition: DropPosition, node: TreeOption, phase: 'drag' \| 'drop' }) => boolean` | 一个不允许 drop 在叶节点内部的函数 | 是否允许 drop |
|
||||
| block-line | `boolean` | `false` | |
|
||||
| block-node | `boolean` | `false` | |
|
||||
| block-line | `boolean` | `false` | 节点整行撑开 |
|
||||
| block-node | `boolean` | `false` | 节点名称整行撑开 |
|
||||
| cancelable | `boolean` | `true` | 选中之后是否允许取消 |
|
||||
| cascade | `boolean` | `false` | 是否关联选项 |
|
||||
| checkable | `boolean` | `false` | |
|
||||
| checked-keys | `Array<string \| number>` | `undefined` | 如果设定则 checked 状态受控 |
|
||||
| data | `Array<TreeOption>` | `[]` | 树的节点数据。重新设置 data 会将一些非受控状态清空，如果你需要在使用中改动 data，最好以受控的方式控制树 |
|
||||
| default-checked-keys | `Array<string \| number>` | `[]` | |
|
||||
| default-expand-all | `boolean` | `false` | |
|
||||
| default-expanded-keys | `Array<string \| number>` | `[]` | |
|
||||
| default-selected-keys | `Array<string \| number>` | `[]` | |
|
||||
| draggable | `boolean` | `false` | |
|
||||
| checkable | `boolean` | `false` | 是否显示选择框，需要将 `cascade` 设置为 `true` |
|
||||
| checked-keys | `Array<string \| number>` | `undefined` | 如果设定则 `checked` 状态受控 |
|
||||
| data | `Array<TreeOption>` | `[]` | 树的节点数据。重新设置 `data` 会将一些非受控状态清空，如果你需要在使用中改动 `data`，最好以受控的方式控制树 |
|
||||
| default-checked-keys | `Array<string \| number>` | `[]` | 默认选中的多选项 |
|
||||
| default-expand-all | `boolean` | `false` | 展开全部选项 |
|
||||
| default-expanded-keys | `Array<string \| number>` | `[]` | 默认展开项 |
|
||||
| default-selected-keys | `Array<string \| number>` | `[]` | 默认选中的节点 |
|
||||
| draggable | `boolean` | `false` | 是否可拖拽 |
|
||||
| expand-on-dragenter | `boolean` | `true` | 是否在拖入后展开节点 |
|
||||
| expanded-keys | `Array<string \| number>` | `undefined` | 如果设定则展开受控 |
|
||||
| filter | `(node: TreeOption) => boolean` | 一个简单的字符串过滤算法 | |
|
||||
| filter | `(node: TreeOption) => boolean` | `undefined` | 一个简单的字符串过滤算法 |
|
||||
| leaf-only | `boolean` | `false` | 是否开启仅末层树节点可选 |
|
||||
| multiple | `boolean` | `false` | |
|
||||
| on-load | `(node: TreeOption) => Promise<void>` | `undefined` | |
|
||||
| pattern | `string` | `''` | |
|
||||
| remote | `boolean` | `false` | 是否异步获取选项，和 onLoad 配合 |
|
||||
| multiple | `boolean` | `false` | 是否允许节点多选 |
|
||||
| on-load | `(node: TreeOption) => Promise<void>` | `undefined` | 异步加载数据的回调函数 |
|
||||
| pattern | `string` | `''` | 默认搜索的内容 |
|
||||
| remote | `boolean` | `false` | 是否异步获取选项，和 `onLoad` 配合 |
|
||||
| render-label | `(info: {option: TreeOption, checked: boolean, selected: boolean}) => VNodeChild` | `undefined` | 节点内容的渲染函数 |
|
||||
| render-prefix | `(info: {option: TreeOption, checked: boolean, selected: boolean}) => VNodeChild` | `undefined` | 节点前缀的渲染函数 |
|
||||
| render-suffix | `(info: {option: TreeOption, checked: boolean, selected: boolean}) => VNodeChild` | `undefined` | 节点后缀的渲染函数 |
|
||||
| selectable | `boolean` | `true` | |
|
||||
| selected-keys | `Array<string \| number>` | `undefined` | 如果设定则 selected 状态受控 |
|
||||
| selectable | `boolean` | `true` | 节点是否可以被选中 |
|
||||
| selected-keys | `Array<string \| number>` | `undefined` | 如果设定则 `selected` 状态受控 |
|
||||
| virtual-scroll | `boolean` | `false` | 是否启用虚拟滚动，启用前你需要设定好树的高度样式 |
|
||||
| on-dragend | `(data: { node: TreeOption, event: DragEvent }) => void` | `undefined` | |
|
||||
| on-dragenter | `(data: { node: TreeOption, event: DragEvent }) => void` | `undefined` | |
|
||||
| on-dragleave | `(data: { node: TreeOption, event: DragEvent }) => void` | `undefined` | |
|
||||
| on-dragstart | `(data: { node: TreeOption, event: DragEvent }) => void` | `undefined` | |
|
||||
| on-drop | `(data: { node: TreeOption, dragNode: TreeOption, dropPosition: 'before' \| 'inside' \| 'after', event: DragEvent }) => void` | `undefined` | |
|
||||
| on-update:checked-keys | `(keys: Array<string \| number>) => void` | `undefined` | |
|
||||
| on-update:expanded-keys | `(keys: Array<string \| number>) => void` | `undefined` | |
|
||||
| on-update:selected-keys | `(keys: Array<string \| number>) => void` | `undefined` | |
|
||||
| on-dragend | `(data: { node: TreeOption, event: DragEvent }) => void` | `undefined` | 节点完成拖拽动作后的回调函数 |
|
||||
| on-dragenter | `(data: { node: TreeOption, event: DragEvent }) => void` | `undefined` | 节点拖拽中的回调函数 |
|
||||
| on-dragleave | `(data: { node: TreeOption, event: DragEvent }) => void` | `undefined` | 拖拽一个节点，该节点离开其它节点后的回调函数 |
|
||||
| on-dragstart | `(data: { node: TreeOption, event: DragEvent }) => void` | `undefined` | 开始拖拽某一个节点的回调函数 |
|
||||
| on-drop | `(data: { node: TreeOption, dragNode: TreeOption, dropPosition: 'before' \| 'inside' \| 'after', event: DragEvent }) => void` | `undefined` | 节点完成拖拽动作后的回调函数 |
|
||||
| on-update:checked-keys | `(keys: Array<string \| number>) => void` | `undefined` | 节点多选项发生变化时的回调函数 |
|
||||
| on-update:expanded-keys | `(keys: Array<string \| number>) => void` | `undefined` | 节点展开项发生变化时的回调函数 |
|
||||
| on-update:selected-keys | `(keys: Array<string \| number>) => void` | `undefined` | 节点选中项发生变化时的回调函数 |
|
||||
|
||||
### TreeOption Properties
|
||||
|
||||
| 名称 | 类型 | 说明 |
|
||||
| --- | --- | --- |
|
||||
| key | `string \| number` | 节点的 key，需要唯一 |
|
||||
| key | `string \| number` | 节点的 `key`，需要唯一 |
|
||||
| label | `string` | 节点的内容 |
|
||||
| checkboxDisabled? | `boolean` | 是否禁用节点的 checkbox |
|
||||
| checkboxDisabled? | `boolean` | 是否禁用节点的 `checkbox` |
|
||||
| children? | `TreeOption[]` | 节点的子节点 |
|
||||
| disabled? | `boolean` | 是否禁用节点 |
|
||||
| isLeaf? | `boolean` | 节点是否是叶节点，在 remote 模式下是必须的 |
|
||||
| isLeaf? | `boolean` | 节点是否是叶节点，在 `remote` 模式下是必须的 |
|
||||
| prefix? | `string \| (() => VNodeChild)` | 节点的前缀 |
|
||||
| suffix? | `string \| (() => VNodeChild)` | 节点的后缀 |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user