mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-09 04:31:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

doc(log)

Browse Source
This commit is contained in:
07akioni 2020-02-04 16:29:09 +08:00
parent ad06e0c57e
commit 17a8a181f5
11 changed files with 368 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/documentation/components/log/enUS/event.md
View File

@ -1,5 +1,5 @@
# Event
Log has `require-more`, `reach-top` and `reach-bottom` event. Note that even if logs are scrolled to top or bottom, when you wheel to the same direction, `require-more` will still be triggered. If you don't want to trigger handler when logs are at top or bottom. Use `reach-top` or `reach-bottom` instead.
Log has `require-more`, `reach-top` and `reach-bottom` event. Note that even if logs are scrolled to top or bottom, when you wheel to the same direction, `require-more` will still be triggered while `reach-xxx` will not. If you don't want to trigger handler when logs are at top or bottom. Use `reach-top` or `reach-bottom` instead.
```html
<n-log
:log="log"

8
demo/documentation/components/log/enUS/index.md
View File

@ -51,4 +51,10 @@ loading
|-|-|-|
|require-more|`(from: 'top' \| 'bottom')`||
|reach-top|`()`|
|reach-bottom|`()`|
|reach-bottom|`()`|
## Methods
|Name|Parameters|Description|
|-|-|-|
|scrollToTop|`(dismissEvent: boolean = false)`||
|scrollToBottom|`(dismissEvent: boolean = false)`||

44
demo/documentation/components/log/enUS/scroll.md
View File

@ -5,9 +5,7 @@ You can easily make log scroll to top or bottom. Also you can make the scroll ac
```html
<n-button-group>
<n-button @click="scrollTo('bottom', false)">Scroll To Bottom</n-button>
<n-button @click="scrollTo('bottom', true)"
>Scroll To Bottom (silent)</n-button
>
<n-button @click="scrollTo('bottom', true)">Scroll To Bottom (silent)</n-button>
<n-button @click="scrollTo('top', false)">Scroll To Top</n-button>
<n-button @click="scrollTo('top', true)">Scroll To Top (silent)</n-button>
</n-button-group>
@ -24,11 +22,11 @@ You can easily make log scroll to top or bottom. Also you can make the scroll ac
```js
function log() {
const l = [];
const l = []
for (let i = 0; i < 10; ++i) {
l.push(Math.random().toString(16));
l.push(Math.random().toString(16))
}
return l.join("\n") + "\n";
return l.join("\n") + "\n"
}
export default {
@ -36,38 +34,44 @@ export default {
return {
loading: false,
log: log()
};
}
},
methods: {
clear() {
this.log = "";
this.log = ""
},
handleRequireMore(from) {
this.$NMessage.info("Require More from " + from);
if (this.loading) return;
this.loading = true;
this.$NMessage.info("Require More from " + from)
if (this.loading) return
this.loading = true
setTimeout(() => {
if (from === "top") {
this.log = log() + this.log;
this.log = log() + this.log
} else if (from === "bottom") {
this.log = this.log + log();
this.log = this.log + log()
}
this.loading = false;
}, 1000);
this.loading = false
}, 1000)
},
handleReachTop() {
this.$NMessage.info("Reach Top");
this.$NMessage.info("Reach Top")
},
handleReachBottom() {
this.$NMessage.info("Reach Bottom");
this.$NMessage.info("Reach Bottom")
},
scrollTo(to, dismissEvent = false) {
if (to === "bottom") {
this.$refs.log.scrollToBottom(dismissEvent);
this.$refs.log.scrollToBottom(dismissEvent)
} else {
this.$refs.log.scrollToTop(dismissEvent);
this.$refs.log.scrollToTop(dismissEvent)
}
}
}
};
}
```
```css
.n-button-group {
margin-bottom: 12px;
}
```

2
demo/documentation/components/log/enUS/size.md
View File

@ -1,4 +1,4 @@
# Size
# Rows
Use `rows` to change the size of log.
```html

54
demo/documentation/components/log/zhCN/debug.md Normal file
View File

@ -0,0 +1,54 @@
# Debug
```html
<n-card title="Random String Logs" :segmented="{
header: 'soft',
content: 'hard'
}">
<n-log
style="margin-top: -12px; margin-bottom: -12px;"
:log="log"
@require-more="handleRequireMore"
:loading="loading"
trim
/>
<template v-slot:action>
<n-button @click="clear">Clear</n-button>
</template>
</n-card>
```
```js
function log () {
const l = []
for (let i = 0; i < 40; ++i) {
l.push((Math.random()).toString(16))
}
return l.join('\n') + '\n'
}
export default {
data () {
return {
loading: false,
log: log()
}
},
methods: {
clear () {
this.log = ''
},
handleRequireMore (from) {
if (this.loading) return
this.loading = true
setTimeout(() => {
if (from === 'top') {
this.log = log() + this.log
} else if (from === 'bottom') {
this.log = this.log + log()
}
this.loading = false
}, 1000)
}
}
}
```

55
demo/documentation/components/log/zhCN/event.md Normal file
View File

@ -0,0 +1,55 @@
# 事件
Log 有 `require-more`、`reach-top` 和 `reach-bottom` 事件。需要注意的是即使 Log 已经滚到了头或者尾，你继续滚动鼠标的时候，`require-more` 还是会被触发，而 `reach-xxx` 并不会。如果你不需要这种特性，可以使用 `reach-top` 或者 `reach-bottom`。
```html
<n-log
:log="log"
@require-more="handleRequireMore"
@reach-top="handleReachTop"
@reach-bottom="handleReachBottom"
:loading="loading"
trim
/>
```
```js
function log () {
const l = []
for (let i = 0; i < 10; ++i) {
l.push((Math.random()).toString(16))
}
return l.join('\n') + '\n'
}
export default {
data () {
return {
loading: false,
log: log()
}
},
methods: {
clear () {
this.log = ''
},
handleRequireMore (from) {
this.$NMessage.info('Require More from ' + from)
if (this.loading) return
this.loading = true
setTimeout(() => {
if (from === 'top') {
this.log = log() + this.log
} else if (from === 'bottom') {
this.log = this.log + log()
}
this.loading = false
}, 1000)
},
handleReachTop () {
this.$NMessage.info('Reach Top')
},
handleReachBottom () {
this.$NMessage.info('Reach Bottom')
}
}
}
```

53
demo/documentation/components/log/zhCN/highlight.md Normal file
View File

@ -0,0 +1,53 @@
# 高亮
在你使用高亮之前，请看本页开始的注意事项，那些对于确保这个例子按预期展示是很重要的。
```html
<n-log
:log="log"
@require-top="handlerequireTop"
@require-bottom="handlerequireBottom"
:loading="loading"
language="naive-log"
trim
/>
```
```js
function log () {
const l = []
for (let i = 0; i < 40; ++i) {
l.push((Math.random()).toString(16))
}
return l.join('\n') + '\n'
}
export default {
data () {
return {
loading: false,
log: log()
}
},
methods: {
clear () {
this.log = ''
},
handlerequireTop () {
if (this.loading) return
this.loading = true
setTimeout(() => {
this.log = log() + this.log
this.loading = false
}, 1000)
},
handlerequireBottom () {
if (this.loading) return
this.loading = true
setTimeout(() => {
this.log = this.log + log()
this.loading = false
}, 1000)
}
}
}
```

60
demo/documentation/components/log/zhCN/index.md
View File

@ -0,0 +1,60 @@
# 日志 Log
<!--single-column-->
如果你有一些日志要展示，可以使用 Log。
<n-alert title="注意" type="warning">
由于尺寸原因，Naive UI 并不把 hightlight.js 内置。如果你需要高亮日志，请确保你在使用之前已经设定了 highlight.js。
</n-alert>
在本页如何高亮的演示中，我们定义了一个叫做 `naive-log` 的语言来高亮全部的数字。下面的代码是我们怎么定义的。如果你想了解 highlight.js，可以参考 <n-a href="https://highlightjs.org/">hightlight.js</n-a> 和 <n-a href="https://highlightjs.readthedocs.io/en/latest/index.html">highlight.js developer documentation</n-a>
```js
...
hljs.registerLanguage('naive-log', () => ({
contains: [
{
className: 'number',
begin: /\d+/
}
]
}))
Vue.use(NaiveUI)
NaiveUI.setHljs(hljs)
...
```
## 演示
```demo
size
event
scroll
highlight
loading
```
## Props
|名称|类型|默认值|介绍|
|-|-|-|-|
|loading|`boolean`|`false`||
|trim|`boolean`|`false`||
|log|`string`|`null`||
|lines|`Array<string>`|`null`||
|font-size|`number`|`14`||
|line-height|`number`|`1.25`||
|language|`string`|`null`||
|rows|`number`|`15`||
|hljs|`object`|`null`||
## Events
|名称|参数|介绍|
|-|-|-|
|require-more|`(from: 'top' \| 'bottom')`||
|reach-top|`()`|
|reach-bottom|`()`|
## Methods
|名称|参数|介绍|
|-|-|-|
|scrollToTop|`(dismissEvent: boolean = false)`||
|scrollToBottom|`(dismissEvent: boolean = false)`||

27
demo/documentation/components/log/zhCN/loading.md Normal file
View File

@ -0,0 +1,27 @@
# 加载中
```html
<n-switch v-model="loading" />
<n-log
:loading="loading"
:log="log"
/>
```
```js
function log () {
const l = []
for (let i = 0; i < 40; ++i) {
l.push((Math.random()).toString(16))
}
return l.join('\n') + '\n'
}
export default {
data () {
return {
loading: false,
log: log()
}
}
}
```

75
demo/documentation/components/log/zhCN/scroll.md Normal file
View File

@ -0,0 +1,75 @@
# 滚动
你可以很简单的让 Log 滚到顶部或者底部。同时你可以控制这个滚动操作是否发出事件。
```html
<n-button-group>
<n-button @click="scrollTo('bottom', false)">滚动到底部</n-button>
<n-button @click="scrollTo('bottom', true)">滚动到底部（无事件）</n-button>
<n-button @click="scrollTo('top', false)">滚动到顶部</n-button>
<n-button @click="scrollTo('top', true)">滚动到顶部（无事件）</n-button>
</n-button-group>
<n-log
ref="log"
:log="log"
@require-more="handleRequireMore"
@reach-top="handleReachTop"
@reach-bottom="handleReachBottom"
:loading="loading"
trim
/>
```
```js
function log() {
const l = []
for (let i = 0; i < 10; ++i) {
l.push(Math.random().toString(16))
}
return l.join("\n") + "\n"
}
export default {
data() {
return {
loading: false,
log: log()
}
},
methods: {
clear() {
this.log = ""
},
handleRequireMore(from) {
this.$NMessage.info("Require More from " + from)
if (this.loading) return
this.loading = true
setTimeout(() => {
if (from === "top") {
this.log = log() + this.log
} else if (from === "bottom") {
this.log = this.log + log()
}
this.loading = false
}, 1000)
},
handleReachTop() {
this.$NMessage.info("Reach Top")
},
handleReachBottom() {
this.$NMessage.info("Reach Bottom")
},
scrollTo(to, dismissEvent = false) {
if (to === "bottom") {
this.$refs.log.scrollToBottom(dismissEvent)
} else {
this.$refs.log.scrollToTop(dismissEvent)
}
}
}
}
```
```css
.n-button-group {
margin-bottom: 12px;
}
```

11
demo/documentation/components/log/zhCN/size.md Normal file
View File

@ -0,0 +1,11 @@
# 行数
使用 `rows` 来设定 Log 的尺寸。
```html
<n-log :rows="5" :log="`1
2
3
4
5
6`"/>
```