# ImgCarousel 多图切换

版本：1.14.0

开发：高明君

交互：苗任越、林思思

UI：鲁欣如、应远山

规范：[已评审] http://10.33.43.73/BBG_UED/BUI_Design/bscs/v2.0/issues/35

# 安装

$ npm i @hui-pro/img-carousel -D
# 或者
$ yarn add @hui-pro/img-carousel --dev

# 引入

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

# 基础用法

基础用法

<h-img-carousel :data="urls" />
<script>
  export default {
    data() {
      return {
        urls: [
          {
            url: require('./assets/img/img-carousel/1.jpg'),
            title: '图片1'
          },
          {
            url: require('./assets/img/img-carousel/2.jpg'),
            title: '图片2'
          }
        ]
      };
    }
  };
</script>

# 皮肤

皮肤:

light light-gray dark transparent

皮肤

<template>
  <div>
    <div class="h-demo-title">皮肤:</div>
    <el-radio-group class="h-btn-group" v-model="theme">
      <el-radio label="light">light</el-radio>
      <el-radio label="light-gray">light-gray</el-radio>
      <el-radio label="dark">dark</el-radio>
      <el-radio label="transparent">transparent</el-radio>
    </el-radio-group>
    <h-img-carousel class="h-demo-carousel" :data="urls" :theme="theme" />
  </div>
</template>

# 多类型

多类型

<template>
  <div class="h-demo-carousel">
    <h-img-carousel theme="light-gray" :data="dataWithVideo" />
  </div>
</template>
<script>
  import videoUrl from './assets/video/movie.ogg';
  export default {
    data() {
      return {
        urls: [
          {
            type: 0,
            url: require('./assets/img/img-carousel/1.jpg'),
            title: '图片'
          },
          {
            type: 1,
            url: videoUrl,
            title: '视频'
          }
        ],
        dataWithVideo: []
      };
    }
  };
</script>

# 事件

100%

事件

<template>
  <code-box title="事件" description="通过事件控制">
    <div class="h-demo-carousel">
      <h-img-carousel
        ref="carousel"
        :data="dataWithVideo"
        :view-data.sync="viewData"
        :current-index.sync="currentIndex"
      />
    </div>
    <h-img-snippets-btn-group theme="light-gray">
      <el-button icon="h-icon-search" @click="prev">
        上一个
      </el-button>
      <el-button icon="h-icon-search" @click="next">
        下一个
      </el-button>
      <h-img-snippets-zoom
        @zoom-out="zoomOut"
        @zoom-in="zoomIn"
        :scale="viewData.ratio"
      />
      <el-button icon="h-icon-search" @click="reset">
        适当尺寸
      </el-button>
      <el-button icon="h-icon-search" @click="selected(0)">
        首页
      </el-button>
      <el-button icon="h-icon-search" @click="selected(8)">
        第八个
      </el-button>
      <el-button icon="h-icon-search" @click="selected(urls.length - 1)">
        尾页
      </el-button>
      <el-button icon="h-icon-search" @click="setNull">
        空数据
      </el-button>
      <el-button icon="h-icon-search" @click="resetData">
        重置数据
      </el-button>
    </h-img-snippets-btn-group>
    <h-album
      theme="light-gray"
      ref="album"
      :data="dataWithVideo"
      :current-index.sync="currentIndex"
      always-center
    />
  </code-box>
</template>

<script>
  import Vue from 'vue';
  import Album from '@hui-pro/album';
  import ImgCarousel from '@hui-pro/img-carousel';
  import '@hui-pro/album/theme/index.scss';
  import '@hui-pro/img-carousel/theme/index.scss';
  import videoUrl from './assets/video/movie.ogg';
  Vue.use(Album);
  Vue.use(ImgCarousel);
  export default {
    data() {
      return {
        urls: [
          {
            url: require('./assets/img/img-carousel/1.jpg'),
            title: '图片1'
          },
          {
            url: require('./assets/img/img-carousel/2.jpg'),
            title: '图片2'
          }
        ],
        dataWithVideo: [],
        scale: 1,
        viewData: {},
        currentIndex: 0
      };
    },
    methods: {
      prev() {
        this.$refs.carousel.$prev();
      },
      next() {
        this.$refs.carousel.$next();
      },
      selected(index) {
        this.$refs.carousel.$selected(index);
        this.$refs.album.$selected(index);
      },
      handleOnPrev(item) {
        this.$refs.album.$prev();
      },
      handleOnNext(item) {
        this.$refs.album.$next();
      },
      zoomIn(type) {
        this.$refs.carousel.$zoomIn();
      },
      zoomOut(type) {
        this.$refs.carousel.$zoomOut();
      },
      reset() {
        this.$refs.carousel.$resetImgView();
        this.scale = 1;
      }
    }
  };
</script>

# 自定义内容

自定义内容

<template>
  <div class="h-demo-carousel">
    <h-img-carousel :data="urls">
      <template slot="item" slot-scope="scope">
        <div class="h-demo-custom">
          <h-img-view
            :src="scope.item.url"
            :title="scope.item.title"
            class="h-demo-img-view"
            mode="contain"
          />
          <h-img-view
            src="/hui-pro/images/home-image-blue.png"
            class="h-demo-img-view"
            mode="contain"
          />
        </div>
      </template>
    </h-img-carousel>
  </div>
</template>

<style lang="scss" scoped>
  .h-demo-custom {
    display: flex;
    height: 100%;
    padding: 0 80px;
    .h-demo-img-view {
      width: 50%;
    }
  }
</style>

# API

提示

ImgCarousel 继承 ImgView，支持 ImgView 所有属性

# Attributes

参数	说明	类型	默认值	可选值
data	数据	Array	[]	-
data-props	数据 key 值别名	Object	对应 data key 名	-
current-index	当前项索引，支持 `sync` 修饰符	Number	0	-
theme	主题	Fixed:String	'light'	'light', 'light-gray', 'dark', 'transparent'
single-hide-btn	单数据是否隐藏左右两侧按钮	Boolean	false	-
no-transition 1.12.0+	是否取消过渡动画	Boolean	false	-

# extends Attributes

ImgView API

# data

key	说明	可选值	默认值
type	类型	0：图片，1：视频	0

# dataProps

key	说明	可选值	默认值
title	图片 title	-	title
type	图片类型	-	type
url	图片 src 地址或视频地址	-	url
key	唯一标识	-	key

# Event

事件名	说明	值
on-change	选中项变化回调	数据项
on-changed 1.9.3+	动画完成后回调，可在此阶段获取 DOM 结构，以及 $reset 等操作	数据项
on-zoom	缩放回调	`scale` 当前缩放比例 `translateX` 横向偏移 `translateY` 纵向偏移

# Ref Event

事件名	说明	参数
$prevPage	上一页	-
$nextPage	下一页	-
$prev	上一个	-
$next	下一个	-
$selected	选中某一项	index:选中项索引
$resetImgView	重置视图	-
$getItemRef	获取当前视图 ref	-

# Ref extends ImgView Event

提示

仅对图片生效,即 type：0

ImgView API

# Slots

插槽名称	说明
item	自定义项

← ImgPreview 图片大图 TargetImgUpload 上传目标图片 →