VUE3.0监听容器宽度变化

VUE3.0监听容器宽度变化

<template>
	<a-row class="table-box" ref="tableBox" />
</template>

不解释了，直接上代码

<script lang="ts">
	import { defineComponent, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
	export default defineComponent({
		setup() {
			onMounted(() => {
				getWidth();
				window.addEventListener('resize', getWidth);
			});
			onUnmounted(() => {
				window.removeEventListener('resize', getWidth);
			});
			const tableBox = ref();
			const getWidth = () => {
				nextTick(() => {
					if (tableBox.value) {
						//div容器获取tableBox.value.clientWidth
						let newWidth = tableBox.value.$el.clientWidth;
						width.value = (newWidth - 450) / 2;
					}
				});
			};
			return {
				tableBox,
				width,
			}
		}
	})
</script>