王钦
9 months ago
25 changed files with 143 additions and 164 deletions
@ -1,74 +0,0 @@ |
|||||
<template> |
|
||||
<!-- v-size-ob 指令，可以在 dom 元素改变大小时获取 dom 元素的尺寸，并且返回尺寸 --> |
|
||||
<div v-size-ob="handleChange" class="container"> |
|
||||
<div class="scroll"> |
|
||||
<div class="content"> |
|
||||
<slot></slot> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { reactive } from 'vue'; |
|
||||
const s = reactive({ // 声明一个响应式数据存储一下 |
|
||||
w: 0, |
|
||||
h: 0, |
|
||||
}); |
|
||||
function handleChange(size) { // 通过 v-size-ob 指令的返回值获取 container 的大小 |
|
||||
s.w = size.width; |
|
||||
s.h = size.height; |
|
||||
} |
|
||||
const map = new WeakMap(); |
|
||||
const ob = new ResizeObserver((entries) => { |
|
||||
for (const entry of entries) { |
|
||||
const handler = map.get(entry.target); |
|
||||
if (handler) { |
|
||||
const box = entry.borderBoxSize[0]; |
|
||||
handler({ |
|
||||
width: box.inlineSize, |
|
||||
height: box.blockSize, |
|
||||
}); |
|
||||
} |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
export default { |
|
||||
name: 'smartAnalysis', |
|
||||
components: { |
|
||||
}, |
|
||||
mounted(el, binding) { |
|
||||
ob.observe(el); |
|
||||
map.set(el, binding.value); |
|
||||
}, |
|
||||
unmounted(el) { |
|
||||
ob.unobserve(el); |
|
||||
}, |
|
||||
}; |
|
||||
|
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
/* 为每一个盒子加上边框方便查看效果 */ |
|
||||
.container { |
|
||||
outline: 5px solid #f1ac6a; |
|
||||
height: calc(v-bind("s.h") * 1px); |
|
||||
position: absolute; |
|
||||
left: 100%; |
|
||||
transform-origin: 0 0; |
|
||||
transform: rotate(90deg); |
|
||||
} |
|
||||
.scroll { |
|
||||
outline: 5px solid #7985ec; |
|
||||
width: calc(v-bind("s.h") * 1px); |
|
||||
height: calc(v-bind("s.w") * 1px); |
|
||||
position: relative; |
|
||||
overflow: auto; |
|
||||
transform-origin: 0 0; |
|
||||
transform: translateY(calc(v-bind("s.h") * 1px)) rotate(-90deg); |
|
||||
} |
|
||||
.content { |
|
||||
outline: 5px solid #f1ac6a; |
|
||||
height: calc(v-bind("s.h") * 1px); |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue