<template>

    <vue-viewer multiple
                :thumb="imageList"
                list-ul-class="image-list"
                :full="imageList"
    >
      <!--在列表中加入右上角删除按钮-->
      <!--<template slot-scope="target">
        <span class="icon-remove" @click.stop="onRemove(target.index)" style="">&times;</span>
      </template>-->
    </vue-viewer>


</template>

<script>

export default {
  name: 'ImagesView',
  data () {
    return {
      msg: 'vue2-viewer',
      // imageList: [
      //   'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=488030022,1694816207&fm=173&app=25&f=JPEG?w=580&h=347&s=A08FB35A5E0616C664F5631C030010D6',
      //   'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2574767313,3929397124&fm=173&app=25&f=JPEG?w=580&h=868&s=B784EEA3460236E17A1F137F0300A058',
      //   'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=488030022,1694816207&fm=173&app=25&f=JPEG?w=580&h=347&s=A08FB35A5E0616C664F5631C030010D6',
      //   'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2574767313,3929397124&fm=173&app=25&f=JPEG?w=580&h=868&s=B784EEA3460236E17A1F137F0300A058',
      //   'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=488030022,1694816207&fm=173&app=25&f=JPEG?w=580&h=347&s=A08FB35A5E0616C664F5631C030010D6',
      //   'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2574767313,3929397124&fm=173&app=25&f=JPEG?w=580&h=868&s=B784EEA3460236E17A1F137F0300A058',
      // ]
    }
  },
  props: {
    imageList: {
      type: Array,
      required: true
    },
  },
  methods: {
    onRemove(index) {
      alert(index);
    }
  }
}
</script>
<style scoped>
::v-deep .viewer-container {
  top: 55px;
}
.image-list{
  margin: 0; padding: 0
}
.image-list li {
  display: inline-block;
  margin: 10px  10px 10px;

  list-style: none;
  position: absolute;
}
::v-deep .image-list li img {
  float: left;
  margin-left: 2%;
  margin-top: 1%;
  box-shadow: 0 0 5px #333;
}
.icon-remove{
  width: 20px; height:20px;
  text-align: center; line-height: 20px;
  background:#f33;
  position:absolute; top:-10px; right:-10px;
  border-radius: 10px;
  cursor: pointer;
  color:#fff;
}
a {
  color: #42b983;
}
</style>
