v-viewer

by mirari

HTML

<link href="//unpkg.com/viewerjs/dist/viewer.css" rel="stylesheet">
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/viewerjs/dist/viewer.js"></script>
<script src="//unpkg.com/v-viewer/dist/v-viewer.js"></script>
<div id="app">
  <div v-viewer class="images clearfix">
    <template v-for="image in images">
      <img :src="image" class="image" :key="image">
    </template>
  </div>
</div>

SCSS

.image {
    width: calc(20% - 10px);
    cursor: pointer;
    margin: 5px;
    display: inline-block;
  }

JavaScript

Vue.use(VueViewer.default)
console.log(VueViewer.default)
var Main = {
  methods: {
    toggle() {

    }
  },
  data() {
    return {
			images: [
      	'http://mirari.cc/v-viewer/assets/img/losglaciares_1920_1200_ss_01_thumbnail.5025b19.jpg',
        'http://mirari.cc/v-viewer/assets/img/losglaciares_1920_1200_ss_02_thumbnail.ead8dcf.jpg'
      ]
    }
  }
}
var App = Vue.extend(Main)
new App().$mount('#app')