vue开发常见问题集锦（二）——vue移动端图片点击放大

安装

npm install --save vue-picture-preview

使用

在项目的入口文件处进行配置

import vuePicturePreview from 'vue-picture-preview'

Vue.use(vuePicturePreview)

在根路由处进行添加插槽

<!-- Vue root compoment template -->

<div id="app">

    <router-view></router-view>

    <lg-preview></lg-preview>

</div>

对于所有图片都可以使用 v-preview 指令来绑定他们的预览功能

<img v-for="img in imgs" v-preview="img" :src="img">

export default {

    data () {

        return {

            imgs: ['http://covteam.u.qiniudn.com/ka2.jpg', 'http://covteam.u.qiniudn.com/poster.png']

        }

    }

}