怎么在vue中利用viewer實現(xiàn)一個圖片查看器

怎么在vue中利用viewer實現(xiàn)一個圖片查看器？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

vue2-viewer

vue2-viewer 是一款強大的圖像瀏覽插件，可以實現(xiàn)圖像的放大預(yù)覽，旋轉(zhuǎn)，任意比例放大和縮小等功能

使用文檔

安裝

npm install --save vue2-viewer

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

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

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

使用組件

vue2-viewer 提供兩種使用模式，單圖片模式和多圖列表模式。

單圖片模式

props

示例：

<vue-viewer 
 :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

Scoped Slot

示例：

<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)" >&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>

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。