<template>
  <PreviewBox class="img-list">
    <li
      v-for="(item, index) in list"
      :key="index"
      :style="`height: ${height}px; width: ${width}px`"
    >
      <button type="button">
        <img :src="item" draggable="false" />
      </button>
    </li>
  </PreviewBox>
</template>
<script>
// @yunjidoc 布局组件 - 图片列表
import PreviewBox from '../../PreviewBox'
export default {
  componentName: 'LogList',
  components: { PreviewBox },
  props: {
    /**
     * @prop {Array} list 图片数组
     */
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    /**
     * @prop {Number, String} height 每个方块卡片的高度 默认: 100
     */
    width: {
      type: [Number, String],
      default: 100
    },
    /**
     * @prop {Number, String} height 每个方块卡片的高度 默认: 100
     */
    height: {
      type: [Number, String],
      default: 100
    }
  }
}
</script>

<style lang="less" scoped>
@import '~styles/var';
.img-list {
  text-align: left;
  li {
    width: 100px;
    height: 100px;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-align: center;
    border-radius: 3px;
    background: #f2f2f2;
    margin-right: 10px;
    transition: 0.3s;
    border: 1px solid @border-color-base;
    button {
      border: 0;
      background: transparent;
      height: 100%;
      width: 100%;
      padding: 0;
      outline: none;
    }
    img {
      max-width: 100%;
      max-height: 100%;
    }
  }
}
</style>
