王钦
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