Mint-Ui使用vue-lazyload

第一步

首先：

npm i mint-ui -S

在main.js中：

import mintUI from 'mint-ui';
import 'mint-ui/lib/style.min.css'
Vue.use(mintUI);

第二步

在使用的页面：

import { Lazyload } from 'mint-ui';

第三步

把img标签中src换成  v-lazy=

<img v-lazy="netif.imagePrefix+item.img_url" alt="">

第四步

在样式中，对imgb标签进行设计：

img[lazy=loading] {
  width: 100%;
  height: 300px;
  margin: auto;
}

这样就OK了。

注意：若想要设计加载之前要显示的图片，需要在main.js中对Vue.use(mintUI);改为：

Vue.use(MintUI, {
  lazyload: {
    preLoad: 1.3,
    //表示出错时显示的图片
    error: 'dist/error.png',
    //表示未加载之前显示的图片
    loading: 'dist/loading.gif',
    attempt: 1,
    filter: {
      webp(listener, options) {

      },
    },
  },
});