mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
chore: some doc fixes & get rid of asthemecontext
This commit is contained in:
parent
54f1e241c7
commit
27e782ca17
@ -27,7 +27,7 @@ debug
|
|||||||
|circle|`boolean`|`false`||
|
|circle|`boolean`|`false`||
|
||||||
|round|`boolean`|`false`||
|
|round|`boolean`|`false`||
|
||||||
|loading|`boolean`|`false`||
|
|loading|`boolean`|`false`||
|
||||||
|keyboard|`boolean`|`true`|Whether is supports keyboard operation.|
|
|keyboard|`boolean`|`true`|Whether is supports keyboard operation.|
|
||||||
|icon-placement|`'left' \| 'right'`|`'left'`||
|
|icon-placement|`'left' \| 'right'`|`'left'`||
|
||||||
|theme|`'light' \| 'dark'`|`null`||
|
|theme|`'light' \| 'dark'`|`null`||
|
||||||
|
|
||||||
|
@ -9,6 +9,11 @@ basic
|
|||||||
#### $NLoadingBar Methods
|
#### $NLoadingBar Methods
|
||||||
|Name|Type|Description|
|
|Name|Type|Description|
|
||||||
|-|-|-|
|
|-|-|-|
|
||||||
|`start`|`() => void`||
|
|`start`|`(option: LoadingBarOption) => void`||
|
||||||
|`finish`|`() => void`||
|
|`finish`|`(option: LoadingBarOption) => void`||
|
||||||
|`error`|`() => void`||
|
|`error`|`(option: LoadingBarOption) => void`||
|
||||||
|
|
||||||
|
#### LoadingBarOption Type
|
||||||
|
|Property|Type|Description|
|
||||||
|
|-|-|-|
|
||||||
|
|theme|`'light' \| 'dark'`||
|
@ -9,6 +9,11 @@ basic
|
|||||||
#### $NLoadingBar Methods
|
#### $NLoadingBar Methods
|
||||||
|名称|类型|说明|
|
|名称|类型|说明|
|
||||||
|-|-|-|
|
|-|-|-|
|
||||||
|`start`|`() => void`||
|
|`start`|`(option: LoadingBarOption) => void`||
|
||||||
|`finish`|`() => void`||
|
|`finish`|`(option: LoadingBarOption) => void`||
|
||||||
|`error`|`() => void`||
|
|`error`|`(option: LoadingBarOption) => void`||
|
||||||
|
|
||||||
|
#### LoadingBarOption Type
|
||||||
|
|属性|类型|说明|
|
||||||
|
|-|-|-|
|
||||||
|
|theme|`'light' \| 'dark'`||
|
@ -1,6 +1,6 @@
|
|||||||
# Basic
|
# Basic
|
||||||
```html
|
```html
|
||||||
<div style="overflow: hidden">
|
<div>
|
||||||
<n-upload
|
<n-upload
|
||||||
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
||||||
:headers="{
|
:headers="{
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
# Controlled File List
|
# Controlled File List
|
||||||
Example is only a joke.
|
Example is only a joke.
|
||||||
```html
|
```html
|
||||||
<div style="overflow: hidden">
|
<div>
|
||||||
<n-upload
|
<n-upload
|
||||||
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
||||||
:file-list="fileList"
|
:file-list="fileList"
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
# Default File List
|
# Default File List
|
||||||
```html
|
```html
|
||||||
<div style="overflow: hidden">
|
<div>
|
||||||
<n-upload
|
<n-upload
|
||||||
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
||||||
:default-file-list="defaultFileList"
|
:default-file-list="defaultFileList"
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
# Drag to Upload
|
# Drag to Upload
|
||||||
```html
|
```html
|
||||||
<div style="overflow: hidden">
|
<div>
|
||||||
<n-upload action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f">
|
<n-upload action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f">
|
||||||
<n-upload-dragger>
|
<n-upload-dragger>
|
||||||
<div style="margin-bottom: 12px;">
|
<div style="margin-bottom: 12px;">
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
# Change File on Finish
|
# Change File on Finish
|
||||||
You can change file's property when upload finishes.
|
You can change file's property when upload finishes.
|
||||||
```html
|
```html
|
||||||
<div style="overflow: hidden">
|
<div>
|
||||||
<n-upload
|
<n-upload
|
||||||
:on-finish="handleFinish"
|
:on-finish="handleFinish"
|
||||||
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
||||||
|
@ -8,7 +8,7 @@ You can use `submit` method to submit in uncontrolled manner. Also you can do it
|
|||||||
>
|
>
|
||||||
Upload File
|
Upload File
|
||||||
</n-button>
|
</n-button>
|
||||||
<div style="overflow: hidden">
|
<div>
|
||||||
<n-upload
|
<n-upload
|
||||||
@change="handleChange"
|
@change="handleChange"
|
||||||
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
# 基础用法
|
# 基础用法
|
||||||
```html
|
```html
|
||||||
<div style="overflow: hidden">
|
<div>
|
||||||
<n-upload
|
<n-upload
|
||||||
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
||||||
:headers="{
|
:headers="{
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
# 受控的文件列表
|
# 受控的文件列表
|
||||||
下面的例子纯属玩笑。
|
下面的例子纯属玩笑。
|
||||||
```html
|
```html
|
||||||
<div style="overflow: hidden">
|
<div>
|
||||||
<n-upload
|
<n-upload
|
||||||
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
||||||
:file-list="fileList"
|
:file-list="fileList"
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
# 默认文件列表
|
# 默认文件列表
|
||||||
```html
|
```html
|
||||||
<div style="overflow: hidden">
|
<div>
|
||||||
<n-upload
|
<n-upload
|
||||||
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
||||||
:default-file-list="defaultFileList"
|
:default-file-list="defaultFileList"
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
# 拖拽上传
|
# 拖拽上传
|
||||||
```html
|
```html
|
||||||
<div style="overflow: hidden">
|
<div>
|
||||||
<n-upload action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f">
|
<n-upload action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f">
|
||||||
<n-upload-dragger>
|
<n-upload-dragger>
|
||||||
<div style="margin-bottom: 12px;">
|
<div style="margin-bottom: 12px;">
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
# 上传完成的回调
|
# 上传完成的回调
|
||||||
你可以在回调中修改文件的属性。
|
你可以在回调中修改文件的属性。
|
||||||
```html
|
```html
|
||||||
<div style="overflow: hidden">
|
<div>
|
||||||
<n-upload
|
<n-upload
|
||||||
:on-finish="handleFinish"
|
:on-finish="handleFinish"
|
||||||
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
||||||
|
@ -8,7 +8,7 @@
|
|||||||
>
|
>
|
||||||
上传文件
|
上传文件
|
||||||
</n-button>
|
</n-button>
|
||||||
<div style="overflow: hidden">
|
<div>
|
||||||
<n-upload
|
<n-upload
|
||||||
@change="handleChange"
|
@change="handleChange"
|
||||||
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
action="http://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
||||||
|
@ -22,6 +22,7 @@ import popover from '../documentation/components/popover'
|
|||||||
import alert from '../documentation/components/alert'
|
import alert from '../documentation/components/alert'
|
||||||
import datePicker from '../documentation/components/datePicker'
|
import datePicker from '../documentation/components/datePicker'
|
||||||
import inputNumber from '../documentation/components/inputNumber'
|
import inputNumber from '../documentation/components/inputNumber'
|
||||||
|
import icon from '../documentation/components/icon'
|
||||||
import radio from '../documentation/components/radio'
|
import radio from '../documentation/components/radio'
|
||||||
import form from '../documentation/components/form'
|
import form from '../documentation/components/form'
|
||||||
import tabs from '../documentation/components/tabs'
|
import tabs from '../documentation/components/tabs'
|
||||||
@ -84,10 +85,7 @@ export const childRoutes = [
|
|||||||
{ path: '/n-nimbus-service-layout', component: nimbusServiceLayoutDemo },
|
{ path: '/n-nimbus-service-layout', component: nimbusServiceLayoutDemo },
|
||||||
{ path: '/n-layout', component: layout },
|
{ path: '/n-layout', component: layout },
|
||||||
{ path: '/n-gradient-text', component: gradientText },
|
{ path: '/n-gradient-text', component: gradientText },
|
||||||
{
|
{ path: '/n-icon', component: icon },
|
||||||
path: '/n-icon',
|
|
||||||
component: () => import('../documentation/components/icon')
|
|
||||||
},
|
|
||||||
{ path: '/n-checkbox', component: checkbox },
|
{ path: '/n-checkbox', component: checkbox },
|
||||||
{ path: '/n-button', component: button },
|
{ path: '/n-button', component: button },
|
||||||
{ path: '/n-switch', component: nswitch },
|
{ path: '/n-switch', component: nswitch },
|
||||||
|
@ -32,11 +32,10 @@
|
|||||||
<script>
|
<script>
|
||||||
import withapp from '../../_mixins/withapp'
|
import withapp from '../../_mixins/withapp'
|
||||||
import themeable from '../../_mixins/themeable'
|
import themeable from '../../_mixins/themeable'
|
||||||
import asthemecontext from '../../_mixins/asthemecontext'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'NAvatar',
|
name: 'NAvatar',
|
||||||
mixins: [withapp, themeable, asthemecontext],
|
mixins: [withapp, themeable],
|
||||||
props: {
|
props: {
|
||||||
size: {
|
size: {
|
||||||
type: [String, Number],
|
type: [String, Number],
|
||||||
|
@ -39,7 +39,6 @@
|
|||||||
import getScrollParent from '../../_utils/dom/getScrollParent'
|
import getScrollParent from '../../_utils/dom/getScrollParent'
|
||||||
import withapp from '../../_mixins/withapp'
|
import withapp from '../../_mixins/withapp'
|
||||||
import themeable from '../../_mixins/themeable'
|
import themeable from '../../_mixins/themeable'
|
||||||
import asthemecontext from '../../_mixins/asthemecontext'
|
|
||||||
import NBasePortal from '../../_base/Portal'
|
import NBasePortal from '../../_base/Portal'
|
||||||
import formatLength from '../../_utils/css/formatLength'
|
import formatLength from '../../_utils/css/formatLength'
|
||||||
|
|
||||||
@ -48,7 +47,7 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
NBasePortal
|
NBasePortal
|
||||||
},
|
},
|
||||||
mixins: [withapp, themeable, asthemecontext],
|
mixins: [withapp, themeable],
|
||||||
props: {
|
props: {
|
||||||
right: {
|
right: {
|
||||||
type: [Number, String],
|
type: [Number, String],
|
||||||
|
@ -34,7 +34,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import withapp from '../../_mixins/withapp'
|
import withapp from '../../_mixins/withapp'
|
||||||
import themeable from '../../_mixins/themeable'
|
import themeable from '../../_mixins/themeable'
|
||||||
import asthemecontext from '../../_mixins/asthemecontext'
|
|
||||||
import asformitem from '../../_mixins/asformitem'
|
import asformitem from '../../_mixins/asformitem'
|
||||||
import CheckMark from './CheckMark'
|
import CheckMark from './CheckMark'
|
||||||
import LineMark from './LineMark'
|
import LineMark from './LineMark'
|
||||||
@ -54,7 +53,6 @@ export default {
|
|||||||
mixins: [
|
mixins: [
|
||||||
withapp,
|
withapp,
|
||||||
themeable,
|
themeable,
|
||||||
asthemecontext,
|
|
||||||
asformitem(
|
asformitem(
|
||||||
{
|
{
|
||||||
change: 'change',
|
change: 'change',
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import withapp from '../../_mixins/withapp'
|
import withapp from '../../_mixins/withapp'
|
||||||
import themeable from '../../_mixins/themeable'
|
import themeable from '../../_mixins/themeable'
|
||||||
import asthemecontext from '../../_mixins/asthemecontext'
|
|
||||||
import asformitem from '../../_mixins/asformitem'
|
import asformitem from '../../_mixins/asformitem'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -9,7 +8,6 @@ export default {
|
|||||||
mixins: [
|
mixins: [
|
||||||
withapp,
|
withapp,
|
||||||
themeable,
|
themeable,
|
||||||
asthemecontext,
|
|
||||||
asformitem()
|
asformitem()
|
||||||
],
|
],
|
||||||
provide () {
|
provide () {
|
||||||
|
@ -1,12 +1,11 @@
|
|||||||
<script>
|
<script>
|
||||||
import withapp from '../../_mixins/withapp'
|
import withapp from '../../_mixins/withapp'
|
||||||
import themeable from '../../_mixins/themeable'
|
import themeable from '../../_mixins/themeable'
|
||||||
import asthemecontext from '../../_mixins/asthemecontext'
|
|
||||||
import styleScheme from '../../_utils/naive/styleScheme'
|
import styleScheme from '../../_utils/naive/styleScheme'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'NElement',
|
name: 'NElement',
|
||||||
mixins: [withapp, themeable, asthemecontext],
|
mixins: [withapp, themeable],
|
||||||
props: {
|
props: {
|
||||||
as: {
|
as: {
|
||||||
type: String,
|
type: String,
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
v-show="!enter || status === 'starting'"
|
v-show="!enter || status === 'starting'"
|
||||||
class="n-loading-bar-container"
|
class="n-loading-bar-container"
|
||||||
:class="{
|
:class="{
|
||||||
[`n-${theme}-theme`]: theme
|
[`n-${syntheticTheme}-theme`]: syntheticTheme
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
@ -37,10 +37,16 @@ export default {
|
|||||||
status: null,
|
status: null,
|
||||||
finishCallback: null,
|
finishCallback: null,
|
||||||
enter: false,
|
enter: false,
|
||||||
|
inheritedTheme: null,
|
||||||
theme: null,
|
theme: null,
|
||||||
activeAction: null
|
activeAction: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
syntheticTheme () {
|
||||||
|
return this.theme || this.inheritedTheme
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleAfterEnter () {
|
handleAfterEnter () {
|
||||||
this.enter = true
|
this.enter = true
|
||||||
|
@ -6,42 +6,45 @@ export default {
|
|||||||
loadingBarInstance: null,
|
loadingBarInstance: null,
|
||||||
finishCallback () {
|
finishCallback () {
|
||||||
if (this.loadingBarInstance) {
|
if (this.loadingBarInstance) {
|
||||||
// document.body.removeChild(this.loadingBarInstance.$el)
|
|
||||||
this.loadingBarInstance.$el.remove()
|
this.loadingBarInstance.$el.remove()
|
||||||
this.loadingBarInstance.$destroy()
|
this.loadingBarInstance.$destroy()
|
||||||
this.loadingBarInstance = null
|
this.loadingBarInstance = null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
start () {
|
start ({ theme } = { theme: null }) {
|
||||||
if (!this.loadingBarInstance) {
|
if (!this.loadingBarInstance) {
|
||||||
this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
|
this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
|
||||||
document.body.appendChild(this.loadingBarInstance.$el)
|
document.body.appendChild(this.loadingBarInstance.$el)
|
||||||
}
|
}
|
||||||
this.loadingBarInstance.theme = this.theme
|
this.loadingBarInstance.inheritedTheme = this.theme
|
||||||
|
this.loadingBarInstance.theme = theme
|
||||||
this.loadingBarInstance.start()
|
this.loadingBarInstance.start()
|
||||||
},
|
},
|
||||||
error () {
|
error ({ theme } = { theme: null }) {
|
||||||
if (!this.loadingBarInstance) {
|
if (!this.loadingBarInstance) {
|
||||||
this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
|
this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
|
||||||
document.body.appendChild(this.loadingBarInstance.$el)
|
document.body.appendChild(this.loadingBarInstance.$el)
|
||||||
}
|
}
|
||||||
this.loadingBarInstance.theme = this.theme
|
this.loadingBarInstance.inheritedTheme = this.theme
|
||||||
|
this.loadingBarInstance.theme = theme
|
||||||
this.loadingBarInstance.error(this.finishCallback.bind(this))
|
this.loadingBarInstance.error(this.finishCallback.bind(this))
|
||||||
},
|
},
|
||||||
finish () {
|
finish ({ theme } = { theme: null }) {
|
||||||
if (!this.loadingBarInstance) {
|
if (!this.loadingBarInstance) {
|
||||||
this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
|
this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
|
||||||
document.body.appendChild(this.loadingBarInstance.$el)
|
document.body.appendChild(this.loadingBarInstance.$el)
|
||||||
}
|
}
|
||||||
this.loadingBarInstance.theme = this.theme
|
this.loadingBarInstance.inheritedTheme = this.theme
|
||||||
|
this.loadingBarInstance.theme = theme
|
||||||
this.loadingBarInstance.finish(this.finishCallback.bind(this))
|
this.loadingBarInstance.finish(this.finishCallback.bind(this))
|
||||||
},
|
},
|
||||||
update (percent) {
|
update ({ percent, theme } = { theme: null }) {
|
||||||
if (!this.loadingBarInstance) {
|
if (!this.loadingBarInstance) {
|
||||||
this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
|
this.loadingBarInstance = new this.Vue(NLoadingBar).$mount()
|
||||||
document.body.appendChild(this.loadingBarInstance.$el)
|
document.body.appendChild(this.loadingBarInstance.$el)
|
||||||
}
|
}
|
||||||
this.loadingBarInstance.theme = this.theme
|
this.loadingBarInstance.inheritedTheme = this.theme
|
||||||
|
this.loadingBarInstance.theme = theme
|
||||||
this.loadingBarInstance.update(percent)
|
this.loadingBarInstance.update(percent)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -57,7 +57,6 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import themeable from '../../_mixins/themeable'
|
import themeable from '../../_mixins/themeable'
|
||||||
import asthemecontext from '../../_mixins/asthemecontext'
|
|
||||||
import NIcon from '../../Icon'
|
import NIcon from '../../Icon'
|
||||||
import mdClose from '../../_icons/md-close'
|
import mdClose from '../../_icons/md-close'
|
||||||
import mdCheckmarkCircle from '../../_icons/md-checkmark-circle'
|
import mdCheckmarkCircle from '../../_icons/md-checkmark-circle'
|
||||||
@ -76,7 +75,7 @@ export default {
|
|||||||
mdInformationCircle,
|
mdInformationCircle,
|
||||||
mdCloseCircle
|
mdCloseCircle
|
||||||
},
|
},
|
||||||
mixins: [ themeable, asthemecontext ],
|
mixins: [ themeable ],
|
||||||
props: {
|
props: {
|
||||||
closable: {
|
closable: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
3
think.md
3
think.md
@ -207,7 +207,7 @@ zindex 的问题解决了,虽然很简单,在 static 元素上设定 zindex
|
|||||||
72. <del>Input Group</del>
|
72. <del>Input Group</del>
|
||||||
73. <del>Dropdown API 修改为 label + value,目前为止 UI 并没有出现过 key,不能只为了它搞特殊,value 可以,key 甚至会另有作用,现在占用实际是个危险的事情</del>
|
73. <del>Dropdown API 修改为 label + value,目前为止 UI 并没有出现过 key,不能只为了它搞特殊,value 可以,key 甚至会另有作用,现在占用实际是个危险的事情</del>
|
||||||
74. card slot
|
74. card slot
|
||||||
75. table fixed computed left right
|
75. <del>table fixed computed left right</del>
|
||||||
76. gradient text 的切换能解决?
|
76. gradient text 的切换能解决?
|
||||||
77. <del>Auto Complete Group</del>
|
77. <del>Auto Complete Group</del>
|
||||||
78. <del>select add tag</del>
|
78. <del>select add tag</del>
|
||||||
@ -217,6 +217,7 @@ zindex 的问题解决了,虽然很简单,在 static 元素上设定 zindex
|
|||||||
82. Form Item 不返回 true 的时候... 错误信息不会消失,这似乎不太合理?
|
82. Form Item 不返回 true 的时候... 错误信息不会消失,这似乎不太合理?
|
||||||
83. Form Item 应该和 Input Group 也契合良好
|
83. Form Item 应该和 Input Group 也契合良好
|
||||||
84. Notification 主题切换需要工作良好
|
84. Notification 主题切换需要工作良好
|
||||||
|
85. Notification 这个东西很特殊...
|
||||||
|
|
||||||
```
|
```
|
||||||
Done
|
Done
|
||||||
|
Loading…
Reference in New Issue
Block a user