<template>
  <el-col :xl="{span:span,offset:offset}"
          :lg="{span:allSpanUse?span:lgSpan,offset:offset}"
          :md="{span:allSpanUse?span:mdSpan,offset:offset}"
          :sm="{span:allSpanUse?span:smSpan,offset:offset}"
          :xs="{span:allSpanUse?span:xsSpan,offset:offset}"
          @click.native="$emit('click')"
          @mouseover.native="emitEvent('mouseover')"
          @mouseout.native="emitEvent('mouseout')">
    <slot></slot>
  </el-col>
</template>

<script>

export default {
  props: {
    lgSpan: {
      type: Number,
      default: 8
    },
    mdSpan: {
      type: Number,
      default: 8
    },
    smSpan: {
      type: Number,
      default: 12
    },
    span: {
      type: Number,
      default: 24
    },
    xsSpan: {
      type: Number,
      default: 24
    },
    allSpanUse: {
      type: Boolean,
      default: true,
    },
    offset: {
      type: Number,
      default: 0
    },
  },
  components: {},
  data() {
    return {};
  },
  computed: {
    xlStyle() {
      return {
        span: this.span,
        offset: this.offset
      }
    }
  },
  watch: {},
  methods: {
    emitEvent(eventName) {
      this.$emit(eventName)
    }
  },


  created() {

  },
  mounted() {

  },


}


</script>

<style scoped>

</style>

