zoukankan      html  css  js  c++  java
  • Nuxt.js使用lazyload

    Vue的使用方式:

    1. 安装插件:

    npm install vue-lazyload --save-dev

    2. main.js引入插件:

    import VueLazyLoad from 'vue-lazyload'
    Vue.use(VueLazyLoad,{
        error:'./static/error.png',
        loading:'./static/loading.png'
    })

    3. vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy 

    <img class="item-pic" v-lazy="newItem.picUrl"/>

    Nuxt的使用方式:

    1. 安装插件:

    npm install vue-lazyload --save-dev

    2.Plugin增加vue-lazyload.js,static/images加载loading.png 可以去iconfont下载

    import Vue from 'vue'
    import VueLazyLoad from 'vue-lazyload'
    Vue.use(VueLazyLoad,{
        error:'./images/error.png',
       loading:'./images/loading.png'
    })

    3.nuxt.config.js配置

    plugins:[
      { src: '~/plugins/vue-lazyload', ssr: true },
      { src: '~/plugins/mint-ui', ssr: true }
    ],
    build: {
      vendor:['mint-ui','axios','vue-lazyload'],
    }

    4.图片使用

     <img :src="item.TmImg">  改为 
     <img v-lazy="item.TmImg">
  • 相关阅读:
    洛谷 P1593 因子和
    洛谷 P1167 刷题
    洛谷 P1613 跑路
    洛谷 P1629 邮递员送信
    洛谷 P1654 OSU!
    洛谷 P1967 货车运输
    FPGA开平方的实现
    FPGA设计思想之串并转换
    verilog乘法器的设计
    FPGA浮点数定点数的处理
  • 原文地址:https://www.cnblogs.com/kobewang/p/9378229.html
Copyright © 2011-2022 走看看