# ImgCard 图片卡片布局

版本：1.14.0

开发：郑杰7

# 安装

$ npm i @hui-pro/img-card
# 或者
$ yarn add @hui-pro/img-card

# 引入

import ImgCard from '@hui-pro/img-card';
import '@hui-pro/img-card/theme/index.scss'
Vue.use(ImgCard);

# 原始版

<div style="height: 360px;">
      <h-img-card
          :pic-list="picList"
          :card-ratio="cardRatio"
          @clickImgBox="clickImgBox"
          @mouseover="mouseover"
          @mouseout="mouseout"
        >
          <template slot-scope="scope">
            <!-- 这边之所以用容器包一层，是防止图片不是对应比例，垂直居中处理 -->
            <div
              class="card-hidden-container"
              :style="{ 'padding-top': paddingTop }"
            >
              <img width="100%" :src="scope.row.src" />
            </div>
            <!-- 左边区域用于放checkbox -->
            <div class="h-card-left">
              <el-checkbox
                v-model="scope.row.checked"
                @click.native.stop=""
              ></el-checkbox>
            </div>
            <!-- 内容区 -->
            <div class="card-message">
              <div class="card-message-item">{{ scope.row.name }}</div>
              <div class="card-message-item card-color-light">
                {{ scope.row.text }}
              </div>
            </div>
            <!-- 底部工具栏 -->
            <div class="h-card-bottom-toolbar">
              <span class="h-card-bottom-toolbar-item h-icon-add"></span>
              <span class="h-card-line"></span>
              <span class="h-card-bottom-toolbar-item h-icon-associate"></span>
              <span class="h-card-line"></span>
              <span class="h-card-bottom-toolbar-item h-icon-details"></span>
            </div>
          </template>
          <template slot="pagination">
            <el-pagination
              slot="pagination"
              :current-page="1"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="20"
              layout="total, sizes, prev, pager, next, jumper"
              :total="100"
            />
          </template>
        </h-img-card>
    </div>
    <script>
  export default {
    data() {
      return {
        picList: [],
        cardRatio: '16:9',
        paddingTop: `${(100 / 16) * 9}%`
      }
    },
    created () {
      for (let i = 0; i < 24; i++) {
        this.picList.push({
          src: 'http://10.33.43.178:8999/img/test1-1.png',
          name: `IPC-Camera00${i}`,
          text: `2019-03-${i}`,
          collect: false,
          checked: true
        })
      }
    },
    methods: {
      clickImgBox (e) {
        console.warn(e)
      },
      mouseover () {},
      mouseout () {}
    }
  }
</script>

# h-img-card-item布局，更加灵活

<div style="height: 360px;">
      <h-img-card
          :pic-list="picList"
          :card-ratio="cardRatio"
          @clickImgBox="clickImgBox"
          @mouseover="mouseover"
          @mouseout="mouseout"
        >
          <template slot-scope="scope">
            <!-- 这边之所以用容器包一层，是防止图片不是对应比例，垂直居中处理 -->
            <div
              class="card-hidden-container"
              :style="{ 'padding-top': paddingTop }"
            >
              <img width="100%" :src="scope.row.src" />
            </div>
            <!-- 左边区域用于放checkbox -->
            <div class="h-card-left">
              <el-checkbox
                v-model="scope.row.checked"
                @click.native.stop=""
              ></el-checkbox>
            </div>
            <!-- 内容区 -->
            <div class="card-message">
              <div class="card-message-item">{{ scope.row.name }}</div>
              <div class="card-message-item card-color-light">
                {{ scope.row.text }}
              </div>
            </div>
            <!-- 底部工具栏 -->
            <div class="h-card-bottom-toolbar">
              <span class="h-card-bottom-toolbar-item h-icon-add"></span>
              <span class="h-card-line"></span>
              <span class="h-card-bottom-toolbar-item h-icon-associate"></span>
              <span class="h-card-line"></span>
              <span class="h-card-bottom-toolbar-item h-icon-details"></span>
            </div>
          </template>
          <template slot="pagination">
            <el-pagination
              slot="pagination"
              :current-page="1"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="20"
              layout="total, sizes, prev, pager, next, jumper"
              :total="100"
            />
          </template>
        </h-img-card>
    </div>
    <script>
  export default {
    data() {
      return {
        picList: [],
        cardRatio: '16:9',
        paddingTop: `${(100 / 16) * 9}%`
      }
    },
    created () {
      for (let i = 0; i < 24; i++) {
        this.picList.push({
          src: 'http://10.33.43.178:8999/img/test1-1.png',
          name: `IPC-Camera00${i}`,
          text: `2019-03-${i}`,
          collect: false,
          checked: true
        })
      }
    },
    methods: {
      clickImgBox (e) {
        console.warn(e)
      },
      mouseover () {},
      mouseout () {}
    }
  }
</script>

# API

# Attributes

参数	说明	类型	可选值	默认值
pic-list	图片数组列表	Array	-	[]
custom-span	是否由用户自定义栅格（{ lg: 3, md: 4, sm: 6, xs: 7 }）	Object	-	null
card-ratio	图片比例（不同的比例，栅格不一样）	String	目前就'16:9'和'1:1'2种	'16:9'

# Events

事件	说明	回调参数
click-img-box	整个卡片点击事件	data(当前卡片对象)
mouseover	鼠标移入	event,data(当前卡片对象)
mouseout	鼠标移除	event,data(当前卡片对象)

# Slot

name	说明	参数
默认	用于放卡片内容	row, index
pagination	用于放分页器	--

# h-img-card-item

说明
这是一个自适应布局的容器（即el-col）