Vue(小案例_vue+axios仿手機app)_圖片列表操作

一、前言                                                                                     

                                      1、讓圖片還沒有被完全加載出來的時候給用戶提示

                                      2、圖片查看器

二、主要內容                                                                              

1、讓圖片還沒有被完全加載出來的時候給用戶提示

　　(1)演示如下圖所示

　　

　　（2）只需要在請求數據的時候，判斷當前的數據的長度是否為0，為零就調用mint-ui中的toast

 

 loadImageByCategoryId(id){ //這里傳入請求的id
                this.$axios.get('api/index?type=top&key=79b64827a7a0f95504dfb2f7e903208d')
                .then(res=>{
                     console.log(res.data.result.data)
                     this.imgList==res.data.result.data

                     if(this.imgList.length == 0){//判斷當前請求到的數據是否為0，如果為0，就調用Toast提示
                        this.$Toast({
                            message:'沒有圖片!',
                            inconClass:''

                        })
                     }
                })
                .catch(err=>{
                    console.log('數據獲取失敗',err);
                })
            }

 

2、圖片查看器

         演示效果：

           

　　  (1)需要下載插件

npm i vue-preview -S  //下載vue-preview -S 插件

 

　　（2）然后全局引用，在main.js中全局引用

//引入圖片查看器
import VuePreview from 'vue-preview'
Vue.use(VuePreview);//內部會構造,掛載一個全局的組件Vue.component('vue-preview',{})

 

　　（3）在vue組件中引入

  <vue-preview :slides="slide1" @close="handleClose"></vue-preview>

　　（4）我們可以根據自己的需要調整樣式，先在style里面加入樣式，查看瀏覽器發現並沒有變化

<style type="text/css" scoped>
  figure{
    width: 100%;
    
  }
</style>

這里自動引入的是全局的global.css樣式，所以如果要給圖片查看器加樣式，必須在全局中添加

 

 　　（3）測試代碼如下

<template>
  <div id='Test'>
     <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
  </div>
 
</template>

<script>
export default {
    name:'Test',
    data () {
      return {
        slide1: [
          {
            src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
            msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
            alt: 'picture1',
            title: 'Image Caption 1',
            w: 600,
            h: 400
          },
          {
            src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
            msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
            alt: 'picture2',
            title: 'Image Caption 2',
            w: 1200,
            h: 900
          }
        ]
      }
    },
    methods: {
      handleClose () {
        console.log('close event')
      }
    }
  }
</script>
<style type="text/css" scoped>
  figure{
    width: 50px;
    height: 120px;
    
  }
</style>

 

三、總結