lc-lightbox-full

幻灯片组件

注意事项

• 常用于详情页面的图片放大显示，让用户清晰看到效果
• 需要设置图片的显示高度，也可以设置宽度（默认750px）
• 可以传入一组图片，滑动显示

效果

使用方法

<template>
  <div class="lc-demo">
    <scroller class="scroller">
      <title title="lc-lightbox-full"></title>
      <category title="使用案例"></category>
      <div class="wrapper">
        <image class="demo-image"
               src="images/banner1.jpg"
               @click="openLightBox"
               aria-label="点击按钮弹出全屏图片,这类情况不建议朗读给盲人"></image>
        <text class="image-text" :aria-hidden="true">点击图片弹出全屏图片</text>
        <div class="btn"
             @click="openLightBox"
             :accessible="true"
             aria-label="点击按钮弹出全屏图片,这类情况不建议朗读给盲人">
          <text class="btn-txt">点击按钮弹出全屏图片</text>
        </div>
      </div>
      <lc-lightbox-full
        ref="lc-lightbox"
        height="800"
        :image-list="imageList"
        @LcLightboxOverlayClicked="lightboxOverlayClick"
        :show="show">
      </lc-lightbox-full>
    </scroller>
  </div>
</template>

<style scoped>
  .lc-demo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
  }
  .wrapper {
    align-items: center;
  }
  .scroller {
    flex: 1;
    align-items: center;
  }
  .demo-image {
    width: 300px;
    height: 300px;
    margin-top: 100px;
  }
  .btn {
    width: 560px;
    height: 80px;
    margin-top: 100px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #399DE2;
  }
  .image-text {
    font-size: 26px;
    color: #9B7B56;
    margin-top: 10px;
  }
  .btn-txt {
    color: #ffffff;
    font-size: 28px;
  }
</style>
<script>
  import Title from 'lighting-ui/packages/_mods/title.vue';
  import Category from 'lighting-ui/packages/_mods/category.vue';
  import LcLightboxFull from 'lighting-ui/packages/lc-lightbox-full';
  export default {
    components: { Title, Category, LcLightboxFull },
    data: function () {
      return {
        imageList: [
          { src: 'images/banner1.jpg' },
          { src: 'images/banner2.jpg' },
          { src: 'images/banner3.jpg' }
        ],
        show: false
      };
    },
    methods: {
      openLightBox () {
        this.show = true;
      },
      lightboxOverlayClick () {
        this.show = false;
      }
    }
  };
</script>

可配置参数

Prop	Type	Required	Default	Description
show	Bool	Y	false	全屏图片是否显示
imageList	Array	Y	[]	全屏显示图片列表
height	Number	Y	750	全屏显示图片高度
width	Number	Y	750	全屏显示图片宽度
show-indicator	Bool	N	true	全屏后是否显示索引…
indicator-color	Object	N	{}	索引样式配置（注 1）

注 1 中样式：

{'item-color': 'rgba(255, 195, 0, .5)','item-selected-color': '#ffc300','item-size': '20px'}

事件回调

// 点击蒙层关闭预览 `@LcLightboxOverlayClicked="LcLightboxOverlayClicked"`