更新记录

1.1.4（2024-08-26）

修复打包报错问题

1.1.3（2024-08-26）

清除console

1.1.2（2024-08-23）

示例gif

平台兼容性

xn-scale-view

开发文档

UTS 语法 UTS API插件 UTS 组件插件 Hello UTS

使用方法

<template>
    <view class="box" @click="click" @touchstart="" @touchmove="" @touchend="">
        <xn-scale-view :scale="scale" @change="change" style="flex: 1;">
            <view style="flex: 1;background-color: red; position: relative; justify-content: center; align-items: center;">
                <view style="position: absolute; top: 0; left: 0; width: 20px; height: 20px; background: #000;"></view>
                <view style="position: absolute; top: 0; right: 0; width: 20px; height: 20px; background: #000;"></view>
                <view style="position: absolute; bottom: 0; left: 0; width: 20px; height: 20px; background: #000;"></view>
                <view style="position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; background: #000;"></view>
                <view>
                    <text style="color: #ffffff;">xn-scale-view</text>
                </view>
            </view>
        </xn-scale-view>
    </view>
    <view class="content">
        <button class="button" type="primary"  @tap="changeScale(1)">scale++</button>
        <button class="button" type="primary"  @tap="changeScale(0)">scale--</button>
    </view>
</template>

<script setup>
    const click = (e) => {
        console.log(e);
    };
    const  = (e) => {
        console.log("", e);
    };
    const  = (e) => {
        console.log("", e);
    };
    const  = (e) => {
        console.log("", e);
    };
    const scale = ref(1);
    const changeScale = (type) => {
        type === 1 ? scale.value += 0.2 : scale.value -= 0.2;
        console.log("changeScale", scale.value);
    }
    const change = (value) => {
        console.log(value.detail.type, value.detail);
        if (value.detail.type === "zoom") {
            scale.value = value.detail.scale;
        }
    }
</script>

<style lang="scss">
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20rpx;
        .button{
            margin-bottom: 20rpx;
            width: 710rpx;
        }
    }
    .box{
        width: 750rpx;
        height: 422rpx;
        background: #000;
    }
</style>