更新记录

1.0.0（2024-07-22） 下载此版本

监听元素尺寸的动态变化

平台兼容性

tzm-resize

<style>
    .box {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .content {
        /* 1.设置父元素的position != static;*/
        position: relative;
        background-color: #409eff;
        color: #fff;
    }

    button {
        margin: 10px;
    }

    .body {
        width: 100%;
    }
</style>

<template>
    <view class="box">
        <view class="content" :style="{width: content.width+'vw',height: content.height+'vw'}">
            // 4.使用组件
            <tzmResize @resize="Change"></tzmResize>
            <view>
                宽度: {{width}}px
            </view>
            <view>
                高度: {{height}}px
            </view>
        </view>
        <view class="body">
            <button @click="setWidth('+')">宽度++</button>
            <button @click="setWidth('-')">宽度--</button>
            <button @click="setHeight('+')">高度++</button>
            <button @click="setHeight('-')">高度--</button>
        </view>
    </view>
</template>

<script>
    // 2.导入组件
    import tzmResize from './components/tzm-resize/tzm-resize.vue'
    export default {
        data() {
            return {
                width: 0,
                height: 0,
                content: {
                    width: 20,
                    height: 20
                }
            }
        },
        methods: {
            // 5.监听回调
            Change(event) {
                this.width = event.width
                this.height = event.height
                console.log(`监听到元素大小改变, width: ${this.width};height: ${this.height}`)
            },
            setWidth(type) {
                if (type == '+') {
                    this.content.width += 1
                } else {
                    this.content.width -= 1
                }
            },
            setHeight(type) {
                if (type == '+') {
                    this.content.height += 1
                } else {
                    this.content.height -= 1
                }
            }
        },
        components: {
            // 3.注册组件
            tzmResize
        }
    }
</script>