Vue-- thumbnail

Installation --- need to view the official website -

cnpm i vue-preview -s

 

<!-- 缩略图区域 -->
    <div class="thumb-img-list">
      <!-- 使用 v-for 循环渲染缩略图 -->
      <img class="preview-img" v-for="(item, index) in photolist" :src="item.src" height="100" @click="$preview.open(index, photolist)" :key="index">
    </div>

  

## to achieve the effect thumbnail

. \ 1 to load all the pictures and display it on the page;

. \ 2 use vue-previewplug-ins to achieve thumbnail effect;

. \ 3 How to Use thumbnails components of it:

+ Run cnpm i vue-preview -Sinstallation

+ Global configuration file globalConfig.js, the mounting of this assembly:

```

import VuePreview from 'vue-preview'

Vue.use(VuePreview)

```

+ In page, first to get a picture, in accordance with standard formats do a wrapper: add each picture wand hproperties;

+ The examples provided in the official imgsticker onto the page, to render the data on the line;

Guess you like

Origin www.cnblogs.com/fdxjava/p/11641966.html