码迷,mamicode.com
首页 > 其他好文 > 详细

Vue-- vue-preview(图片查看器)的使用步骤:

时间:2017-11-26 20:29:08      阅读:2943      评论:0      收藏:0      [点我收藏+]

标签:alt   图片   vue   数据   gif   click   http   --   技术分享   


 

vue-preview的使用步骤:
        1)下载
        2)配置:找到配置文件加入:
            {
                test: /vue-preview.src.*?js$/,
                loader: babel-loader
            },
            在处理url()请求的配置中加入:svg的配置
            {
                test: /\.(jpg|png|gif|ttf|svg)$/,
                loader: "url-loader?limit=40000"
            }
        3)在main.js加载:
            //引入veu-preview
            import VuePreview from vue-preview
            //使用vue-preview
            Vue.use(VuePreview)
        4)在tamplate中引入html代码:
            <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)">   
        5)得到list数据
            格式:
                 list: [{
                    src: https://placekitten.com/600/400,
                    w: 600,
                    h: 400
                    }, {
                    src: https://placekitten.com/1200/900,
                    w: 1200,
                    h: 900
                    }]

 

使用链接:https://www.npmjs.com/package/vue-preview/

vue的template代码:

技术分享图片

script代码:

技术分享图片

技术分享图片

效果:

技术分享图片

 

Vue-- vue-preview(图片查看器)的使用步骤:

标签:alt   图片   vue   数据   gif   click   http   --   技术分享   

原文地址:http://www.cnblogs.com/mrszhou/p/7899887.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!