mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-12 12:25:16 +08:00
Merge pull request #96 from wanli-song/develop
modify(icon,drawer demo)
This commit is contained in:
commit
adbc3222cb
@ -9,14 +9,14 @@
|
||||
<div
|
||||
ref="target"
|
||||
style="position:relative;
|
||||
width:500px;
|
||||
height:500px;
|
||||
border:1px solid rgba(0, 0, 0, .1);
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
margin-top: 10px;">
|
||||
<p style="
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);">
|
||||
Appear area
|
||||
</p>
|
||||
|
@ -9,9 +9,9 @@
|
||||
<div
|
||||
ref="target"
|
||||
style="position:relative;
|
||||
width:500px;
|
||||
height:500px;
|
||||
border:1px solid rgba(0, 0, 0, .1);
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
margin-top: 10px;"
|
||||
>
|
||||
<p style="position:absolute;
|
||||
|
@ -10,7 +10,7 @@
|
||||
/>
|
||||
<div class="icons">
|
||||
<icon-wrapper
|
||||
v-for="name in displayNames"
|
||||
v-for="name in filteredNames"
|
||||
:key="name"
|
||||
:name="name"
|
||||
>
|
||||
@ -25,7 +25,7 @@
|
||||
<script>
|
||||
import icons from '../../../../../src/_icons/index'
|
||||
import iconWrapper from './iconWrapper'
|
||||
import getScrollParent from '../../../../../src/_utils/dom/getScrollParent'
|
||||
// import getScrollParent from '../../../../../src/_utils/dom/getScrollParent'
|
||||
import { state } from '../../../../store'
|
||||
|
||||
export default {
|
||||
@ -36,8 +36,8 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
pattern: '',
|
||||
loadNumber: 20,
|
||||
container: null,
|
||||
// loadNumber: 20,
|
||||
// container: null,
|
||||
state: state
|
||||
}
|
||||
},
|
||||
@ -55,25 +55,25 @@ export default {
|
||||
} else {
|
||||
return this.names
|
||||
}
|
||||
},
|
||||
displayNames () {
|
||||
return this.filteredNames.slice(0, this.loadNumber)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.container = getScrollParent(this.$el)
|
||||
this.container.addEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
methods: {
|
||||
handleScroll () {
|
||||
const scrollTop = this.container.scrollTop
|
||||
const clientHeight = this.container.clientHeight
|
||||
const scrollHeight = this.container.scrollHeight
|
||||
if (scrollTop + clientHeight === scrollHeight) {
|
||||
this.loadNumber += 20
|
||||
}
|
||||
}
|
||||
// displayNames () {
|
||||
// return this.filteredNames.slice(0, this.loadNumber)
|
||||
// }
|
||||
}
|
||||
// mounted () {
|
||||
// this.container = getScrollParent(this.$el)
|
||||
// this.container.addEventListener('scroll', this.handleScroll)
|
||||
// },
|
||||
// methods: {
|
||||
// handleScroll () {
|
||||
// const scrollTop = this.container.scrollTop
|
||||
// const clientHeight = this.container.clientHeight
|
||||
// const scrollHeight = this.container.scrollHeight
|
||||
// if (scrollTop + clientHeight === scrollHeight) {
|
||||
// this.loadNumber += 20
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -10,7 +10,7 @@
|
||||
/>
|
||||
<div class="icons">
|
||||
<icon-wrapper
|
||||
v-for="name in displayNames"
|
||||
v-for="name in filteredNames"
|
||||
:key="name"
|
||||
:name="name"
|
||||
>
|
||||
@ -25,7 +25,7 @@
|
||||
<script>
|
||||
import icons from '../../../../../src/_icons/index'
|
||||
import iconWrapper from './iconWrapper'
|
||||
import getScrollParent from '../../../../../src/_utils/dom/getScrollParent'
|
||||
// import getScrollParent from '../../../../../src/_utils/dom/getScrollParent'
|
||||
import { state } from '../../../../store'
|
||||
|
||||
export default {
|
||||
@ -36,8 +36,8 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
pattern: '',
|
||||
loadNumber: 20,
|
||||
container: null,
|
||||
// loadNumber: 20,
|
||||
// container: null,
|
||||
state: state
|
||||
}
|
||||
},
|
||||
@ -55,25 +55,25 @@ export default {
|
||||
} else {
|
||||
return this.names
|
||||
}
|
||||
},
|
||||
displayNames () {
|
||||
return this.filteredNames.slice(0, this.loadNumber)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.container = getScrollParent(this.$el)
|
||||
this.container.addEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
methods: {
|
||||
handleScroll () {
|
||||
const scrollTop = this.container.scrollTop
|
||||
const clientHeight = this.container.clientHeight
|
||||
const scrollHeight = this.container.scrollHeight
|
||||
if (scrollTop + clientHeight === scrollHeight) {
|
||||
this.loadNumber += 20
|
||||
}
|
||||
}
|
||||
// displayNames () {
|
||||
// return this.filteredNames.slice(0, this.loadNumber)
|
||||
// }
|
||||
}
|
||||
// mounted () {
|
||||
// this.container = getScrollParent(this.$el)
|
||||
// this.container.addEventListener('scroll', this.handleScroll)
|
||||
// },
|
||||
// methods: {
|
||||
// handleScroll () {
|
||||
// const scrollTop = this.container.scrollTop
|
||||
// const clientHeight = this.container.clientHeight
|
||||
// const scrollHeight = this.container.scrollHeight
|
||||
// if (scrollTop + clientHeight === scrollHeight) {
|
||||
// this.loadNumber += 20
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user