vue基于viewer實作的圖檔檢視器

vue2-viewer

vue2-viewer 是一款強大的圖像浏覽插件，可以實作圖像的放大預覽，旋轉，任意比例放大和縮小等功能

vue2-viewer 是viewer.js vue的實作，效果以及樣式完全移植自viewer.js關于viewer.js可以參考連結

[http://fengyuanchen.github.io/viewer/]

插件中所有的效果均大量地使用了css3的新特性替換了viewer.js中的js動畫，是以vue2-viewer主要實用場景是現代浏覽器中。

使用文檔

安裝

npm install --save vue2-viewer           

複制

在main.js中引入并使用插件

import ImageViewer from 'vue2-viewer';
Vue.use(ImageViewer);           

複制

插件會在全局注冊vue-viewer元件

使用元件

vue2-viewer 提供兩種使用模式，單圖檔模式和多圖清單模式。

單圖檔模式

props

參數	說明	類型	必須
thumb	要顯示的小圖的連結	string	true
full	點選放大後的大圖連結	string	true

示例：

<vue-viewer style="display: inline-block"
  :thumb="image"
  :full="image">
</vue-viewer>
<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'vue2-viewer-test',
      image: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3427452369,2586833644&fm=173&app=25&f=JPEG?w=580&h=347&s=908FF35A050626E2428C001E030090D6',
    }
  }
}
</script>           

複制

效果展示：

多圖檔模式

props

參數	說明	類型	必須
thumb	要顯示的小圖清單的連結數組	array	true
full	點選放大後的大圖的連結數組	array	true
list-ul-class	預設小圖的清單外層ul的自定義class 用于自定義清單的樣式，包括ul内部的slot的内容的樣式都可以通過這個方式自定義	string	false

Scoped Slot

name	說明
~	清單中的每一個元素中除了預設圖以外的内容

示例：

<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>
<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'vue2-viewer-test',
      imageList: [
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550224739247&di=512032866bea6329b1e46c735d50ac8b&imgtype=0&src=http%3A%2F%2Fimglf2.ph.126.net%2FdHH6OM2rD8JucPGAotUfag%3D%3D%2F6608219914074710297.jpg',
        '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'
      ]
    }
  },
  methods: {
    onRemove(index) {
      alert(index);
    }
  }
}
</script>
<style>
.image-list{
  margin: 0; padding: 0
}
.image-list li {
  display: inline-block;
  margin: 0 10px;
  list-style: none;
  position: relative;
}
.image-list li img {
  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>           

複制

效果展示：