반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 개발
- vsCode
- 네트워크
- TensorFlow
- 오블완
- localserver
- webpack
- node
- build
- Android
- 티스토리챌린지
- ReactNative
- PYTHON
- androidstudio
- linux
- react
- 리눅스
- jest
- IOS
- Chrome
- 맥
- centos
- xcode
- unittest
- MachineLearning
- qunit
- VirtualBox
- MAC
- 센토스
Archives
- Today
- Total
로메오의 블로그
[VUE + TYPESCRIPT] 메세지 추가 애니메이션 본문
반응형
<template>
<div>
<div class="scroll-box">
<section :id="message" v-for="(message, key) in messages" :key="key">{{message}}. 메세지</section>
</div>
<a href="#el1">1</a> |
<a href="#el2">2</a> |
<a href="#el3">3</a> |
<a href="javascript:;" @click="top">top</a> |
<a href="javascript:;" @click="bottom">bottom</a> |
<a href="javascript:;" @click="addMessage">추가</a> |
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class TestScrollView extends Vue {
messages = ['el1', 'el2', 'el3']
lastIndex = 3
top () {
const scrolls = this.$el.querySelector('#el1')
if (scrolls) {
scrolls.scrollIntoView(false)
}
}
bottom () {
const scrolls = this.$el.querySelector('#el' + this.lastIndex)
if (scrolls) {
scrolls.scrollIntoView({ behavior: 'smooth' })
}
}
addMessage () {
this.lastIndex++
this.messages.push('el' + this.lastIndex)
this.$nextTick(() => {
this.bottom()
})
}
}
</script>
<style scoped>
.scroll-box {
scroll-behavior: smooth;
padding: 15px;
background-color: #eaeaea;
display: block;
width: 200px;
height: 120px;
overflow-y: scroll;
text-align: center;
}
section {
margin: 20px;
height: 100px
}
</style>
반응형
'Frontend > Vue' 카테고리의 다른 글
[VUE + TYPESCRIPT] font-awesome 설치 (0) | 2022.04.28 |
---|---|
[VUE + TYPESCRIPT] vue splitpanes (0) | 2022.04.20 |
[VUE + TYPESCRIPT] proxy server 구현 (0) | 2022.03.24 |
[VUE + TYPESCRIPT] global component 선언하기 (0) | 2022.03.22 |
[VUE + TYPESCRIPT] vuetify 설치 + VueDraggableResizable 사용하기 (0) | 2022.03.22 |
Comments