uniapp中movable-area放大缩小页面demo效果(整理)

<template>
  <view class="">
    <!-- 这个可以独立写-设置宽高就行 -->
    <movable-area scale-area style="width: 375rpx; height: 730rpx;">
      <movable-view direction="all" out-of-bounds scale scale-min="1" scale-max="10">
        <image mode="widthFix" src="../../static/img/kong.png"></image>
      </movable-view>
    </movable-area>
    <!-- 这个可以独立写-设置宽高就行 -->
    <view class="uni-padding-wrap uni-common-mt">
      <view class="uni-title uni-common-mt">
        示例 1
        <text>\nmovable-view 区域小于 movable-area</text>
      </view>
      <movable-area>
        <movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view>
      </movable-area>
      <view @tap="tap" class="uni-link uni-center uni-common-mt">
        点击这里移动至 (30px, 30px)
      </view>
      <view class="uni-title uni-common-mt">
        示例 2
        <text>\nmovable-view区域大于movable-area</text>
      </view>
      <movable-area>
        <movable-view class="max" direction="all">text</movable-view>
      </movable-area>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        x: 0,
        y: 0,
        old: {
          x: 0,
          y: 0
        }
      }
    },
    methods: {
      tap: function(e) {
        this.x = this.old.x
        this.y = this.old.y
        this.$nextTick(function() {
          this.x = 30
          this.y = 30
        })
      },
      onChange: function(e) {
        this.old.x = e.detail.x
        this.old.y = e.detail.y
      }
    }
  }
</script>
<style>
  page {
    background-color: #F8F8F8;
    height: 100%;
    font-size: 32rpx;
    line-height: 1.6;
  }
  movable-view {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300rpx;
    width: 300rpx;
    background: #1AAD19;
    color: #fff;
  }
  movable-area {
    height: 730rpx;
    width: 375rpx;
    margin: 50rpx;
    background-color: #ccc;
    overflow: hidden;
  }
</style>