<template>
    <div class="img-list">
      <div class="img-item" 
            :style="formatterGapStyle(gap)" 
            v-for="(item,index) in items"
            :key="index">
              <junpLink :action="item.action">
                  <img :src="item.src">
              </junpLink>
      </div>
    </div>
</template>

<script>

import Field from '../mixins/field'

export default {

  name: "MultipleImage",

  mixins:[ Field ],

  props: {
    gap: {
      type: Number,
      default:()=>{
        return 0
      }
    },
    cols: {
      type: Number,
      default:()=>{
        return 0
      }
    },
    items:{
      type: Array,
      default:()=>{
        return []
      }
    }
  },

  methods: {}
};
</script>

<style lang="scss" scoped>
.img-list {
  display: flex;

  .img-item {
    display: inline-flex;
    flex: 1;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>