1. 程式人生 > >Vue-- vue-preview(圖片查看器)的使用步驟:

Vue-- vue-preview(圖片查看器)的使用步驟:

view 找到 www. use 格式 rom log url eight


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(圖片查看器)的使用步驟: