vue mint-ui lazy-load 懒加载

首先导入mint-ui  

//引入MintUi全部
import MintUI from 'mint-ui'
Vue.use(MintUI)

在需要图片懒加载的地方使用v-lazy指令 

    <ul>
      <li v-for="(item) in photolist" :key="item.id">
        <router-link :to="'/home/getimageInfo/'+item.id">
          <img v-lazy="rootPath+item.img_url" />
        </router-link>
      </li>
    </ul>

设置样式 

image[lazy="loading"] {
  width: 40px;
  height: 300px;
  margin: auto;
}