<template>
  <div>
    <h1>测试组件</h1>
    <div class="oprate-list">
      <button @click="toRight">右移</button>
      <button @click="toTop">上移</button>
      <button @click="toLeft">左移</button>
      <button @click="toBottom">下移</button>
    </div>
    <component
      :is="compName"
      v-if="compName"
      :style="{position:'absolute',top:options.top+'px',left:options.left+'px',width:options.width_new+'px',height:options.height_new+'px'}"
    />

  </div>
</template>

<script>

import testDiv from './testDiv'
import Vue from 'vue'

Vue.component('test-div', testDiv)

export default {
  data() {
    return {
      compName: '',
      options: {
        top: 150,
        left: 200,
        width_new: 400,
        height_new: 200
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.compName = 'test-div'
    }, 2000)
  },
  methods: {
    toRight() {
      this.options.left += 10
    },
    toTop() {
      this.options.top -= 10
    },
    toLeft() {
      this.options.left -= 10
    },
    toBottom() {
      this.options.top += 10
    }
  }

}
</script>

<style scoped lang="scss">
.test {
    background-color: blue;
}
.oprate-list {
    margin-left: 50px;
    button {
        margin-right: 10px;
    }
}
</style>
