HUI-VUE-Pro

# Album 相册

版本：1.14.0

开发：高明君

交互：苗任越、林思思

UI：鲁欣如、应远山

规范：[已评审] http://pc11-publicisms/resource/%E8%A7%84%E8%8C%83/UI%E8%A7%84%E8%8C%83-BS&CS/%E7%BB%BC%E5%90%88%E5%AE%89%E9%98%B2-%E5%A4%8D%E7%94%A8%E7%BB%84%E4%BB%B6/index.html#artboard3

# 安装

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

# 引入

import Vue from 'vue';
import Album from '@hui-pro/album';
import '@hui-pro/album/theme/index.scss';
Vue.use(Album);

# 基础用法

左端对齐
居中对齐
基础用法
<template>
  <el-row class="h-demo-block-line" :gutter="16">
    <el-col :span="4">
      <span class="demonstration">左端对齐</span>
    </el-col>
    <el-col :span="20">
      <h-album :data="data" />
    </el-col>
  </el-row>
  <el-row class="h-demo-block-line" :gutter="16">
    <el-col :span="4">
      <span class="demonstration">居中对齐</span>
    </el-col>
    <el-col :span="20">
      <h-album :data="data" alwaysCenter />
    </el-col>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        data: []
      };
    },
    created() {
      for (let index = 0; index < 30; index++) {
        this.data.push({
          title: 'title',
          url: '/hui-pro/images/home-image-blue.png',
          key: index
        });
      }
    }
  };
</script>

# 皮肤

light
light-gray
dark
基础用法
<template>
  <el-row class="h-demo-block-line" :gutter="16">
    <el-col :span="4">
      <span class="demonstration">light</span>
    </el-col>
    <el-col :span="20">
      <h-album :data="data" theme="light" />
    </el-col>
  </el-row>
  <el-row class="h-demo-block-line" :gutter="16">
    <el-col :span="4">
      <span class="demonstration">light-gray</span>
    </el-col>
    <el-col :span="20">
      <h-album :data="data" theme="light-gray" />
    </el-col>
  </el-row>
  <el-row class="h-demo-block-line" :gutter="16">
    <el-col :span="4">
      <span class="demonstration">dark</span>
    </el-col>
    <el-col :span="20">
      <h-album :data="data" theme="dark" />
    </el-col>
  </el-row>
</template>

# 事件

0

基础用法
<template>
  <p>
    <el-button type="default" @click="selected">
      第一项
    </el-button>
    <el-button type="default" @click="prevPage">
      上一页
    </el-button>
    <el-button type="default" @click="nextPage">
      下一页
    </el-button>
    <el-button type="default" @click="prev">
      上一个
    </el-button>
    <el-button type="default" @click="next">
      下一个
    </el-button>
    <el-button type="default" @click="reset">
      重置
    </el-button>
    <span class="h-demo-key" v-text="key" />
  </p>
  <h-album
    :data="data"
    theme="light"
    ref="album"
    :currentIndex="10"
    @on-change="handleOnChange"
  />
</template>

<script>
  export default {
    data() {
      return {
        data: [],
        key: 0
      };
    },
    created() {
      for (let index = 0; index < 30; index++) {
        this.data.push({
          title: `标题 ${index}`,
          url: '/hui-pro/images/home-image-blue.png',
          key: index
        });
      }
    },
    methods: {
      prevPage() {
        this.$refs.album.$prevPage();
      },
      nextPage() {
        this.$refs.album.$nextPage();
      },
      prev() {
        this.$refs.album.$prev();
      },
      next() {
        this.$refs.album.$next();
      },
      selected() {
        this.$refs.album.$selected(0);
      },
      handleOnChange(item) {
        this.key = item.key;
      },
      reset() {
        this.$refs.album.$reset();
      }
    }
  };
</script>

# 自定义内容

自定义内容
<template>
  <h-album :data="data" theme="light">
    <template slot="item" slot-scope="scope">
      <h-img-view
        :src="scope.item.url"
        :title="scope.item.title"
        mode="contain"
      />
      <div class="h-demo-album-title">{{ scope.item.title }}</div>
    </template>
  </h-album>
</template>

<style lang="scss" scoped>
  .h-demo-album-title {
    position: absolute;
    bottom: 0;
  }
</style>

# API

提示

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

# Attributes

参数 说明 类型 可选值 默认值
data 数据 Array [] -
data-props 数据 key 值别名 Object - 对应 data key 名
theme 主题 Fixed:String 'light', 'light-gray', 'dark' -
current-index 当前项索引，支持 sync 修饰符 Number 0 -
img-size 缩略图尺寸 Object { width: 72, height: 72 } -
always-center 始终保持居中对齐 Boolean false -
shadow 1.11.6+ 是否显示蒙层 Boolean true -

# Rewrite Attributes

参数 原默认值 现默认值
empty-size 'fit' 'xs'
mode 'adjust' 'cover'
lazyload false true

提示

为提高加载性能，lazyload 默认是开启的。开启后当图片首次加载或加载过慢时会出现短暂占位图闪烁，若想提高视觉体验可将 lazyload 关闭，来达到图片预加载效果。利弊使用者自行把控。

# extends Attributes

# dataProps

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

# Event

事件名 说明 值
on-change 选中项变化回调 数据项

# Ref Event

事件名 说明 参数
$prevPage 上一页 -
$nextPage 下一页 -
$prev 上一个 -
$next 下一个 -
$selected 选中某一项 index:选中项索引
$reset 重置控件 -

# Slots

插槽名称 说明
item 自定义项

← ImgView 图片预览 →