MovableView 可移动的视图容器

基础样式

<se-movable-area class="movable-area" width="300px" height="300px">
  <se-movable-view class="movable-view" direction="all"></se-movable-view>
</se-movable-area>
<style>
  .movable-area {
    background: #eee;
  }
  .movable-view {
    width: 80px;
    height: 80px;
    background: #01d567;
  }
</style>

移动至指定位置

<se-button @click="move(30, 30)">移动到（30，30）</se-button>
<se-movable-area class="movable-area" width="300px" height="300px">
  <se-movable-view class="movable-view" ref="movableView" :x="x" :y="y"></se-movable-view>
</se-movable-area>
<script>
  export default {
    data() {
      return {
        x: 0,
        y: 0
      }
    },
    methods: {
      move(x, y) {
        this.$refs.movableView.setPosition(x, y)
      }
    }
  }
</script>
<style>
  .movable-area {
    margin-bottom: 10px;
    background: #eee;
  }
  .movable-view {
    width: 80px;
    height: 80px;
    background: #01d567;
  }
</style>

扩大效果

<se-button @click="scale">扩大两倍</se-button>

<se-movable-area class="movable-area" width="300px" height="300px">
  <se-movable-view class="movable-view" ref="movableView" :x="x" :y="y"></se-movable-view>
</se-movable-area>

<script>
  export default {
    data() {
      return {
        x: 50,
        y: 50
      }
    },
    methods: {
      scale() {
        this.$refs.movableView.setScale(2)
      }
    }
  }
</script>

<style>
  .movable-area {
    margin-bottom: 10px;
    background: #eee;
  }
  .movable-view {
    width: 60px;
    height: 60px;
    background: #01d567;
  }
</style>

超过可移动区域后可移动

<se-movable-area class="movable-area" width="300px" height="300px">
  <se-movable-view class="movable-view" :out-of-bounds="true"></se-movable-view>
</se-movable-area>

<style>
  .movable-area {
    background: #eee;
  }
  .movable-view {
    width: 80px;
    height: 80px;
    background: #01d567;
  }
</style>

movable-view 区域大于 movable-area

<se-movable-area class="movable-area" width="200px" height="200px">
  <se-movable-view class="movable-view" :out-of-bounds="true">
    hello
  </se-movable-view>
</se-movable-area>

<style>
  .movable-area {
    background: #eee;
  }
  .movable-view {
    width: 300px;
    color: #fff;
    line-height: 300px;
    text-align: center;
    background: #01d567;
  }
</style>

禁止移动

<se-movable-area class="movable-area" width="300px" height="300px">
  <se-movable-view class="movable-view" :disabled="true"></se-movable-view>
</se-movable-area>

<style>
  .movable-area {
    background: #eee;
  }
  .movable-view {
    width: 80px;
    height: 80px;
    background: #f43131;
  }
</style>

Props

Events