반응형
Vuejs에서 DOM 요소 사이의 거리를 계산하는 가장 좋은 방법은 무엇인가?
데이터에서 pdf 파일을 생성하기 위한 도구를 만들고 있는데 105mm * 148mm와 105mm * 210mm의 두 가지 형식으로 만들어야 한다.그래서 나는 내 전체 문서를 받았고 이제 페이지 나누기를 삽입할 시간이야.간단한 수업으로 한다.
.page-break { display: block; page-break-before: always; }
이제 이 수업을 내 v-for 루프에 삽입해야 해.그래서 기본적인 아이디어는 간격을 계산하는 겁니다. 각 지수가 6의 배수인 것처럼, 내가 하나를 삽입하는 겁니다.하지만 최선의 방법은 아니고, 90mm 이상일 때 휴지를 삽입하고 싶다.
그러기 위해 2회 휴식 사이의 거리를 계산해 거리가 90mm에 가까우면 새로 삽입하고 싶었다.하지만, 내 동적 DOM 요소에 접근할 방법을 찾을 수가 없어...
그래서 질문은 간단하다.이 거리를 어떻게 계산하는가?아니면 목표를 달성하기 위한 더 좋은 방법이 있다면 무엇을 개선할 수 있을까?
각각에 div/component를 추가하는 것으로 믿으며,v-for각 칸에 고유 ID를 추가할 수 있다.이제 아래 방법들은 당신에게 하나의 div의 높이를 줄 수 있다.px그리고 당신은 변환할 수 있는 방법을 가지게 될 것이다.px로mm.
만약 당신이 jquery를 사용하고 있다면, 당신은 할 수 있다.
$('#nthDiv').height();
그렇지 않은 경우 다음을 수행하십시오.
document.getElementById('#nthDiv').clientHeight;
document.getElementById('#nthDiv').offsetHeight;
다음 코드가 있는 경우:
<div v-for="(item, index) in items" :class="{'page-break': isBreakNeeded(index)}" :id="index + 'thDiv'">
///Your code
</div>
다음 방법을 추가하십시오.
isBreakNeeded (index) {
var height = 0
do {
index -= 1;
height += document.getElementById('#' + index + 'thDiv').offsetHeight;
} while (index >= 0 || pageBreakAdded[index] == true)
if(height > threshold){
pageBreakAdded[index] = true
return true
}
else{
return false
}
}
vue 요소의 데이터 속성에도 다음 해시를 추가해야 페이지 나누기를 추가한 인덱스를 추적할 수 있다.
pageBreakAdded: {}
그래서 이런 접근법을 시도했다.
- a를 삽입하다
page-break내 루프 템플릿 내부(div v-for each data text element) - 모든 것을 선택하다
page-break렌더링 후 - 을 사용하여 계산하다.
getBoundingClientRect()- 선정을 반복하다.
- 전류와 다음 전류와의 거리를 구하다.
- 허용 범위를 벗어나면 DOM에서 삭제해
이 방법은 효과가 있지만 매우 추악하고, 좋은 범위를 계산하는 것은 매우 어렵고, 엄청나게 비싸다!작은 데이터세트가 있으면 괜찮지만 책 전체가 있으면 너무 길어서...
그리고 이것은 (로) 그것을 하는 첫 번째 시도다.Vue템플팅)
<template>
<div class="content">
<div class="pages">
<div class="page-footer">
<div class="page-break"></div>
</div>
<div class="dynamic">
<div v-for="(entry, index) in conv" class="row">
<div v-if="entry.msgs[0].value === 'break'">
<span class="date">{{entry.msgs[0].metadate}}</span>
</div>
<div v-else>
<span class="author">{{ entry.user }}</span>
<span class="hour">{{ entry.msgs[0].metahour }}</span>
<div class="phrases">
<span v-for="msg in entry.msgs">
{{ msg.value }}
</span>
</div>
</div>
<div class="page-footer" :data-base="index">
<span class="page-number" :data-base="index">{{ pageNumberFor(index) }}</span>
<div class="page-break"></div>
</div>
</div>
</div>
<div class="page-footer" data-base="end">
<span class="page-number" data-base="end">{{ pageNumberFor('end') }}</span>
<div class="page-break"></div>
</div>
</div>
</div>
</template>
<script>
import und from 'underscore'
export default {
name: "Data",
data () {
return {
conv: null,
cleaned: false,
pageNumbers: {}
}
},
computed: {
mmScale: () => 0.264583333,
heightBreak: () => 210
},
mounted () {
this.$http.get('static/data_sorted_backup.json').then(
// this.$http.get('static/data_sorted.json').then(
(response) => {
this.conv = this.groupBy(response.data)
},
(response) => {
console.log('error');
}
)
},
updated () {
console.log('updated');
if(!this.cleaned) this.cleanPageBreak()
},
methods: {
groupBy (json) {
let result = []
result.push(json[0])
let punc = new RegExp(/[\?\.\!\;\(\)]?$/, 'ig')
for (var i = 1; i < json.length; i++) {
let val = json[i].msgs[0].value
val = val.charAt(0).toUpperCase() + val.slice(1);
if( punc.test(val) === false ) val += '.'
json[i].msgs[0].value = val
let len = result[result.length -1].msgs.length
// if it's not the same day
let origin = result[result.length -1].msgs[len - 1].metadate
let new_entry = json[i].msgs[0].metadate
// console.log(i, origin, new_entry);
if( origin !== new_entry ){
result.push({
msgs: [{
value:"break",
metadate: json[i].msgs[0].metadate
}]
})
i--
continue;
}
// if the previous author is the same
if(result[result.length -1].user === json[i].user){
result[result.length -1].msgs.push({
value: json[i].msgs[0].value,
metadate: json[i].msgs[0].metadate,
metahour: json[i].msgs[0].metahour
})
}else{
result.push(json[i])
}
}
return result
},
cleanPageBreak () {
console.log('cleanPageBreak');
let breaks = this.$el.querySelectorAll('.page-footer')
let distance
let enough
let previousTop = breaks[0].getBoundingClientRect().top
let seuil = this.heightBreak * 0.85
console.log(breaks.length, seuil);
for (let i = 1; i < breaks.length; ++i) {
console.log(i);
distance = (breaks[i].getBoundingClientRect().top - previousTop) * this.mmScale
enough = distance < this.heightBreak && distance >= seuil
if (enough) {
previousTop = breaks[i].getBoundingClientRect().top
} else if(i != breaks.length -1) {
breaks[i].remove()
}
}
this.cleaned = true
this.mapNumbers()
},
mapNumbers () {
console.log('mapNumbers');
let numbers = Array.from(this.$el.querySelectorAll('.page-number'))
numbers.map( (elem, index) => {
this.pageNumbers[elem.dataset.base] = {}
this.pageNumbers[elem.dataset.base].index = index + 1
})
},
pageNumberFor (index) {
if(this.pageNumbers[index]) return this.pageNumbers[index].index
return 0
}
}
}
</script>
<style lang="scss">
@import url('https://fonts.googleapis.com/css?family=Abel|Abhaya+Libre');
.page-footer{
position: relative;
margin: 12mm 0;
// border: 1px dotted black;
.page-break {
display: block;
page-break-before: always;
}
.page-number {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: -28mm;
}
}
.content {
padding: 0 16mm 0 10mm;
font-family: 'Abhaya Libre', serif;
.pages{
position: relative;
}
}
.row {
margin: 0;
font-size: 0;
span{
font-size: 13px;
}
span:first-letter {
text-transform: uppercase;
}
.date, .hour {
font-family: 'Abel', sans-serif;
}
.date {
font-size: 15px;
text-align: center;
display: block;
padding-top: 10mm;
padding-bottom: 2mm;
}
.author{
display: block;
text-transform: uppercase;
text-align: center;
}
.hour {
margin-bottom: 3mm;
margin-top: -2px;
display: block;
text-align: center;
font-size: 9px;
}
.phrases{
text-indent:5mm;
}
}
.row + .row {
margin-top: 5mm;
}
</style>
반응형
'programing' 카테고리의 다른 글
| 스프링 MVC의 컨트롤러 작업에서 외부 URL로 리디렉션 (0) | 2022.05.19 |
|---|---|
| Vuex / Vue를 사용하여 비동기 데이터 검색을 처리하는 방법 (0) | 2022.05.19 |
| Java에서 인터페이스 이름 지정 (0) | 2022.05.19 |
| Vuex Store 모듈에서 Vue.js 플러그인 사용 (0) | 2022.05.19 |
| Android에서 파일 읽기/쓰기 문자열 (0) | 2022.05.19 |