图片的懒加载----------文字悬浮于图片上----设置文字的最大高度---图片的li相对定位---文字绝对定位

//1.1导入Mint-UI中  图片懒加载组件

import { Lazyload } from 'mint-ui';

Vue.use(Lazyload); 

Lazy load
图片懒加载指令。

引入
import { Lazyload } from 'mint-ui';

Vue.use(Lazyload);
例子
为 img 元素添加 v-lazy 指令，指令的值为图片的地址。同时需要设置图片在加载时的样式。


  

    
  

image[lazy=loading] {
  width: 40px;
  height: 300px;
  margin: auto;
}
若列表不在 window 上滚动，则需要将被滚动元素的 id 属性以修饰符的形式传递给 v-lazy 指令


  

    

      
    
  

　　

 

 

 

 

-------------------------------------------------------------------------------------------

 

------------positition: relation

文字-------.info {

　　position: absolute;

　　bottom: 0;　　

}

 设置文字的最大高度

max-height: 84px;

 

tag="li"--------------由于vue 需要路由跳转，所以将 li标签换成标签‘

所以要指定一下tag

 

    
        <ul class="lazyul">
            <router-link tag="li" v-for="item in photolist" :key="item.id" :to="'/home/photoinfo/' + item.id">
                
                <img v-lazy="item.img_url">
                <div class="info">
                    <h1 class="info-title">{{ item.title }}h1>
                    <div class="info-content">{{ item.zhaiyao }}div>
                div>
            router-link>
        ul>