dataease/frontend/src/views/chart/view/PositionAdjust.vue

<template>
  <div style="width: 100%;padding: 10px;">
    <el-col>
      <el-form
        label-width="40px"
        size="mini"
      >
        <el-form-item
          :label="$t('panel.space_top')"
          class="form-item"
          prop="marginTop"
        >
          <el-input
            v-model="styleInfo.top"
            type="number"
            :min="0"
            :max="maxTop"
            class="hide-icon-number"
          >
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item
          :label="$t('panel.space_left')"
          :min="0"
          class="form-item"
          prop="marginTop"
        >
          <el-input
            v-model="styleInfo.left"
            type="number"
            :min="0"
            :max="maxLeft"
            class="hide-icon-number"
          >
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item
          :label="$t('panel.space_width')"
          :min="0"
          class="form-item"
          prop="marginTop"
        >
          <el-input
            v-model="styleInfo.width"
            :min="0"
            :max="maxWidth"
            type="number"
            class="hide-icon-number"
          >
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item
          :label="$t('panel.space_height')"
          :min="0"
          class="form-item"
        >
          <el-input
            v-model="styleInfo.height"
            type="number"
            :min="0"
            :max="maxHeight"
            class="hide-icon-number"
          >
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
      </el-form>
    </el-col>
  </div>
</template>

<script>

import { mapState } from 'vuex'

export default {
  name: 'PositionAdjust',
  props: {},
  data() {
    return {
      maxHeight: 2000,
      maxTop: 20000
    }
  },
  computed: {
    maxLeft() {
      return 1600 - this.styleInfo.width - this.componentGap
    },
    maxWidth() {
      return 1600 - this.styleInfo.left - this.componentGap
    },
    styleInfo() {
      return this.$store.state.curComponent.style
    },
    ...mapState([
      'componentGap'
    ])
  },
  watch: {
    'styleInfo.top': function() {
      this.topOnChange()
    },
    'styleInfo.left': function() {
      this.leftOnChange()
    },
    'styleInfo.width': function() {
      this.widthOnChange()
    },
    'styleInfo.height': function() {
      this.heightOnChange()
    }
  },
  mounted() {
  },
  methods: {
    leftOnChange() {
      if (this.styleInfo.left > this.maxLeft) {
        this.styleInfo.left = this.maxLeft
      } else if (this.styleInfo.left < 0) {
        this.styleInfo.left = 0
      }
      this.$store.commit('canvasChange')
    },
    widthOnChange() {
      if (this.styleInfo.width > this.maxWidth) {
        this.styleInfo.width = this.maxWidth
      } else if (this.styleInfo.width < 0) {
        this.styleInfo.left = 0
      }
      this.$store.commit('canvasChange')
    },
    heightOnChange() {
      if (this.styleInfo.height > this.maxHeight) {
        this.styleInfo.height = this.maxHeight
      } else if (this.styleInfo.height < 0) {
        this.styleInfo.height = 0
      }
      this.$store.commit('canvasChange')
    },
    topOnChange() {
      if (this.styleInfo.top > this.maxTop) {
        this.styleInfo.top = this.maxTop
      } else if (this.styleInfo.top < 0) {
        this.styleInfo.top = 0
      }
      this.$store.commit('canvasChange')
    }
  }
}
</script>

<style scoped>

</style>