mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-25 14:10:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(log): no event emitted, deprecate old scrollToXxx

Browse Source
This commit is contained in:
07akioni 2020-10-22 23:26:34 +08:00
parent dc90ab6426
commit d0deb804e5
7 changed files with 103 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
demo/documentation/components/log/enUS/index.demo-entry.md
View File

@ -53,5 +53,4 @@ loading
## Methods
|Name|Parameters|Description|
|-|-|-|
|scrollToTop|`(dismissEvent: boolean = false)`||
|scrollToBottom|`(dismissEvent: boolean = false)`||
|scrollTo|`(options: { y?: number, position?: 'top' \| 'bottom', slient?: boolean })`||

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

@ -4,10 +4,10 @@ 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('top', false)">Scroll To Top</n-button>
<n-button @click="scrollTo('top', true)">Scroll To Top (silent)</n-button>
<n-button @click="scrollTo({ position: 'bottom', slient: false })">Scroll To Bottom</n-button>
<n-button @click="scrollTo({ position: 'bottom', slient: true })">Scroll To Bottom (silent)</n-button>
<n-button @click="scrollTo({ position: 'top', slient: false })">Scroll To Top</n-button>
<n-button @click="scrollTo({ position: 'top', slient: true })">Scroll To Top (silent)</n-button>
</n-button-group>
<n-log
ref="log"
@ -21,51 +21,47 @@ You can easily make log scroll to top or bottom. Also you can make the scroll ac
```
```js
function log() {
function log () {
const l = []
for (let i = 0; i < 10; ++i) {
l.push(Math.random().toString(16))
}
return l.join("\n") + "\n"
return l.join('\n') + '\n'
}
export default {
inject: ['message'],
data() {
data () {
return {
loading: false,
log: log()
}
},
methods: {
clear() {
this.log = ""
clear () {
this.log = ''
},
handleRequireMore(from) {
this.message.info("Require More from " + from)
handleRequireMore (from) {
this.message.info('Require More from ' + from)
if (this.loading) return
this.loading = true
setTimeout(() => {
if (from === "top") {
if (from === 'top') {
this.log = log() + this.log
} else if (from === "bottom") {
} else if (from === 'bottom') {
this.log = this.log + log()
}
this.loading = false
}, 1000)
},
handleReachTop() {
this.message.info("Reach Top")
handleReachTop () {
this.message.info('Reach Top')
},
handleReachBottom() {
this.message.info("Reach Bottom")
handleReachBottom () {
this.message.info('Reach Bottom')
},
scrollTo(to, dismissEvent = false) {
if (to === "bottom") {
this.$refs.log.scrollToBottom(dismissEvent)
} else {
this.$refs.log.scrollToTop(dismissEvent)
}
scrollTo(...args) {
this.$refs.log.scrollTo(...args)
}
}
}

3
demo/documentation/components/log/zhCN/index.demo-entry.md
View File

@ -53,5 +53,4 @@ loading
## Methods
|名称|参数|说明|
|-|-|-|
|scrollToBottom|`(dismissEvent: boolean = false)`||
|scrollToTop|`(dismissEvent: boolean = false)`||
|scrollTo|`(options: { y?: number, position?: 'top' \| 'bottom', slient?: boolean })`||

38
demo/documentation/components/log/zhCN/scroll.demo.md
View File

@ -3,10 +3,10 @@
```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 @click="scrollTo({ position: 'bottom', slient: false })">滚动到底部</n-button>
<n-button @click="scrollTo({ position: 'bottom', slient: true })">滚动到底部（无事件）</n-button>
<n-button @click="scrollTo({ position: 'top', slient: false })">滚动到顶部</n-button>
<n-button @click="scrollTo({ position: 'top', slient: true })">滚动到顶部（无事件）</n-button>
</n-button-group>
<n-log
ref="log"
@ -20,51 +20,47 @@
```
```js
function log() {
function log () {
const l = []
for (let i = 0; i < 10; ++i) {
l.push(Math.random().toString(16))
}
return l.join("\n") + "\n"
return l.join('\n') + '\n'
}
export default {
inject: ['message'],
data() {
data () {
return {
loading: false,
log: log()
}
},
methods: {
clear() {
this.log = ""
clear () {
this.log = ''
},
handleRequireMore(from) {
this.message.info("Require More from " + from)
handleRequireMore (from) {
this.message.info('Require More from ' + from)
if (this.loading) return
this.loading = true
setTimeout(() => {
if (from === "top") {
if (from === 'top') {
this.log = log() + this.log
} else if (from === "bottom") {
} else if (from === 'bottom') {
this.log = this.log + log()
}
this.loading = false
}, 1000)
},
handleReachTop() {
this.message.info("Reach Top")
this.message.info('Reach Top')
},
handleReachBottom() {
this.message.info("Reach Bottom")
this.message.info('Reach Bottom')
},
scrollTo(to, dismissEvent = false) {
if (to === "bottom") {
this.$refs.log.scrollToBottom(dismissEvent)
} else {
this.$refs.log.scrollToTop(dismissEvent)
}
scrollTo(...args) {
this.$refs.log.scrollTo(...args)
}
}
}

70
src/log/src/Log.vue
View File

@ -39,6 +39,7 @@ import NScrollbar from '../../scrollbar'
import NLogLoader from './LogLoader.vue'
import NLogLine from './LogLine.vue'
import { throttle } from 'lodash-es'
import { warn } from '../../_utils'
import styles from './styles'
export default {
@ -124,7 +125,7 @@ export default {
data () {
return {
memorizedScrollTop: 0,
dismissEvent: false,
slient: false,
memorizedScrollBottom: null
}
},
@ -149,9 +150,9 @@ export default {
return this.hljs || this.$naive.hljs
},
handleScroll (e, container, content) {
if (this.dismissEvent) {
if (this.slient) {
this.$nextTick(() => {
this.dismissEvent = false
this.slient = false
})
return
}
@ -177,21 +178,25 @@ export default {
if (onReachBottom) onReachBottom()
}
},
handleWheel (e) {
if (this.dismissEvent) {
if (this.slient) {
this.$nextTick(() => {
this.dismissEvent = false
this.slient = false
})
return
}
if (this.scrollbarRef && this.scrollbarRef.containerRef) {
const container = this.scrollbarRef.containerRef
const containerHeight = container.offsetHeight
const containerScrollTop = container.scrollTop
if (this.scrollbarRef.$refs.scrollContent) {
const content = this.scrollbarRef.$refs.scrollContent
const contentHeight = content.offsetHeight
const {
scrollbarRef
} = this
if (scrollbarRef) {
const {
containerRef,
contentRef
} = scrollbarRef
if (containerRef && contentRef) {
const containerHeight = containerRef.offsetHeight
const containerScrollTop = containerRef.scrollTop
const contentHeight = contentRef.offsetHeight
const scrollTop = containerScrollTop
const scrollBottom =
contentHeight - containerScrollTop - containerHeight
@ -211,21 +216,34 @@ export default {
}
}
},
scrollToTop (dismissEvent = false) {
this.scrollTo('top', dismissEvent)
},
scrollToBottom (dismissEvent = false) {
this.scrollTo('bottom', dismissEvent)
},
scrollTo (to, dismissEvent = false) {
if (dismissEvent) {
this.dismissEvent = true
scrollTo (options) {
const {
scrollbarRef
} = this
const {
slient,
y,
position
} = options
if (slient) {
this.slient = true
}
if (to === 'bottom') {
this.scrollbarRef.scrollTo(0, Number.MAX_SAFE_INTEGER)
} else {
this.scrollbarRef.scrollTo(0, 0)
if (y !== undefined) {
scrollbarRef.scrollTo(0, y)
} else if (position === 'bottom') {
scrollbarRef.scrollTo(0, Number.MAX_SAFE_INTEGER)
} else if (position === 'top') {
scrollbarRef.scrollTo(0, 0)
}
},
// deprecated
scrollToTop (slient = false) {
warn('log', '`scrollToTop` is deprecated, please use `scrollTo({ position: \'top\'})` instead.')
this.scrollTo('top', slient)
},
scrollToBottom (slient = false) {
warn('log', '`scrollToTop` is deprecated, please use `scrollTo({ position: \'bottom\'})` instead.')
this.scrollTo('bottom', slient)
}
}
}

17
think.md
View File

@ -285,6 +285,23 @@ const naive = create({
})
```
## 2020.10.22
```js
// extend Element.prototype.scrollTo
// override 1 (xCoord, yCoord) keep it
// overried 2 ScrollOptions
// ScrollOptions {
// x: number,
// y: number,
// behavior: 'auto' | 'smooth'
// index?: number
// key?: number
// el?: Element
// position?: 'bottom' | 'top',
// slient?: boolean
// }
```
## TODO 排序不分先后
1. <del>Focus Detector on Time Selector</del>
2. <del>Menu Root Indent = 0 可能造成问题</del>

7
vue3.md
View File

@ -146,9 +146,10 @@ placeable 进行了大调整
- `$NLoadingBar`
- new
- `n-loading-bar-provider`
- [ ] log
- TODO
- event bug
- [x] log
- deprecate
- `scrollToTop` => `scrollTo`
- `scrollToBottom` => `scrollTo`
- [x] menu
- new
- `popover-body-style`