viewer.js 显示图片名称和照片属性

<link href="~/Scripts/viewer/viewer.min.css?v=20190612" rel="stylesheet" />
<script src="~/Scripts/viewer/viewer.min.js?v=20190612"></script>


<style type="text/css">
    .photo-with-attr-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        z-index: 999999;
        background-color: rgba(0, 0, 0, 0.7);
    }
    .photo-with-attr-container   .photo-container
    {
        float: left;
        height: 100%;
        width: calc(100% - 300px);
    }
    .photo-with-attr-container .attr-container {
            float: right;
            height: 100%;
            width: 300px;
            background: white;
      }
     .photo-with-attr-container .attr-container .image-attr-title  span
{
        margin: 10px;
    }

    .photo-with-attr-container .attr-container .image-attr-title {
        padding:16px; 
        border-bottom: 1px solid #ebeef5;
    }

    .photo-with-attr-container .attr-container .image-attr-content {
        padding: 10px;
        height: calc(100% - 50px);
        width: 300px;
        position: absolute;
    }

    .photo-with-attr-container .attr-container .el-scrollbar__wrap {
        overflow-x: hidden;
    }

    .image-attr-content .ivu-form-item{
            margin-bottom: 0px;
    }

</style>


<script type="text/x-template" id="viewerTemplate">
        <div style="visibility:hidden">
            <div ref="left">
                <div role="button" class="viewer-button viewer-close" data-viewer-action="mix" @@click="hide" />
                <div class="image-attr-title">
                    <label>照片属性</label>
                </div>
                <div class="image-attr-content">
                    <div style="height:100%;">
                        <card v-for="item in currentAttr" v-bind:key="item.Name" style="margin-bottom:8px;width:100%;">
                            <div slot="title" class="clearfix">
                                <span>{{ item.Name }}</span>
                            </div>
                            <div>
                                <i-form label-width="90" size="mini">
                                    <form-item v-for="imageAttr in item.AttrList" v-bind:key="imageAttr.Name" v-bind:label="imageAttr.Name">
                                        <label> {{ imageAttr.Value }}</label>
                                    </form-item>
                                </i-form>
                            </div>
                        </card>
                    </div>
                </div>
            </div>
        </div>
 </script>
<script type="text/javascript">



Vue.component("ViewPhotoWithAttr",{
    template: "#viewerTemplate",
  name: ‘ViewPhotoWithAttr‘,
  props: {
    imageList: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      viewer: null,
      containerEl: null,
      visible: false,
      currentImage: {},
      currentAttr: []
    }
  },
  watch: {
    imageList() {
    },
    ‘currentImage.id‘(id) {
        var that = this
        var srcPart = ‘@Url.Action("ImageAttr", "Image")‘ + ‘/‘;
        this.$http({
            url: srcPart + id,
            method: ‘get‘
        }).then(function (response) {
            if (response.data.success) {
            that.currentAttr = response.data.data
        }
      })
    },
    visible(val) {
      var el = this.containerEl
      if (el) {
        el.style.visibility = val ? ‘visible‘ : ‘hidden‘
      }
    }
  },
    mounted() {
      //  ‘viewer-title‘
        
  },
  destroyed() {
    this.destroy()
  },
  methods: {
    init() {
      var body = document.body

      this.destroy()
      var container = document.createElement(‘div‘)
      container.className = ‘photo-with-attr-container‘
      container.style.visibility = ‘hidden‘

      var imageContainer = document.createElement(‘div‘)
      imageContainer.className = ‘photo-container‘

      var imagesEl = document.createElement(‘div‘)
      imagesEl.style.display = ‘none‘
      for (var item of this.imageList) {
        var image = document.createElement(‘img‘)
        image.src = item.imageUrlSmall
        image.alt = item.picName;
        imagesEl.appendChild(image)
      }
      imageContainer.appendChild(imagesEl)

      container.appendChild(imageContainer)
      var attrContainer = document.createElement(‘div‘)
      attrContainer.className = ‘attr-container‘
      attrContainer.appendChild(this.$refs.left)
      container.appendChild(attrContainer)
      body.appendChild(container)
      // var el = this.$refs.images
      var that = this
      var viewer = new Viewer(imagesEl, {
        fullscreen: true,
        inline: true,
        title: function (img, obj) {
            return img.getAttribute("alt");
        },
        container: imageContainer,
        url(image) {
          var src = image.getAttribute("src");
          var item = that.imageList.filter(d => d.imageUrlSmall === src)[0]
          return item.imageUrl
        },
        hide() {
          that.visible = false
        },
        hidden() {
          that.visible = false
        },
        view(image) {
          var src = image.detail.image.getAttribute("src");
          var item = that.imageList.filter(d => d.imageUrl === src)[0]

          that.currentImage = item
          console.log(that.currentImage)
        }
      })
      this.viewer = viewer
      this.containerEl = container
    },
    destroy() {
      if (this.viewer) {
        this.viewer.destroy()
      }
      var body = document.body
      var container = document.getElementsByClassName(‘photo-with-attr-container‘)
      if (container && container.length > 0) {
        for (var item of container) {
          body.removeChild(item)
        }
      }
      this.containerEl = null
      this.viewer = null
    },
    hide() {
      // this.viewer.exit()
      this.destroy()
      var that = this
      this.$nextTick(function() {
          that.visible = false
      })
    },
    view(index) {
      this.visible = true
      if (!this.viewer) {
        this.init()
      }
      var that = this
      this.$nextTick(function(){
          that.viewer.view(index)
      })
    }
  }

})
</script>

 
    imageList: {
      type: Array,
      default: null
    }

     for (var item of this.imageList) {
        var image = document.createElement(‘img‘)
        image.src = item.imageUrlSmall 
        image.alt = item.picName; //对alt属性赋值
        imagesEl.appendChild(image)
      }

        title: function (img, obj) {  // 这里实现显示图片名称
            return img.getAttribute("alt");
        },