Merge pull request #96 from wanli-song/develop

modify(icon,drawer demo)
This commit is contained in:
07akioni 2020-03-20 16:57:16 +08:00 committed by GitHub Enterprise
commit adbc3222cb
4 changed files with 51 additions and 51 deletions

View File

@ -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>

View File

@ -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;

View File

@ -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>

View File

@ -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>