<template>
  <div
    class="dev-main-item"
    :data-ref="itemObj.ref"
    :data-type="itemObj.type"
    :style="{ width: (100/24*itemObj.options.span).toFixed(5) + '%'}"
    @click.stop="itemClick(itemObj)"
  >
    {{ itemObj.options.labelName }}
    <el-input-number
      v-model="itemObj.options.vModel"
      :size="itemObj.options.size"
      :min="itemObj.options.min"
      :max="itemObj.options.max"
      :step="itemObj.options.step"
      :step-strictly="itemObj.options.stepStrictly"
      :precision="itemObj.options.precision"
      :disabled="itemObj.options.disabled"
      :controls="itemObj.options.controls"
      :name="itemObj.options.name"
      :label="itemObj.options.label"
      :placeholder="itemObj.options.placeholder"
      controls-position="right"
    />
  </div>
</template>

<script>
import ApDevItemBase from './base/ApDevItemBase'

export default {
  name: 'ApDevInputNumber',
  extends: ApDevItemBase,
  data() {
    return {}
  },
  created() {
    // 默认参数
    this.defaultOptions = {
      span: 12,
      vModel: 0,
      min: 0,
      max: 10,
      step: 1,
      stepStrictly: false,
      controls: true
    }
  },
  methods: {

  }
}
</script>

<style scoped>

</style>
