uni-plugin-light/lib/loader/v-lazy.js

uni-app相关插件、loader及webpack基础配置

'use strict';

var loaderUtils = require('loader-utils');

var PLATFORM_MAP = {
  MP_WX: 'mp-weixin',
  MP_QQ: 'mp-qq',
  H5: 'h5'
};

var ALL_PLATFORM = 'ALL';
function shouldUseLoader() {
  var defaultPlatforms = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  var options = loaderUtils.getOptions(this) || {};
  var _options$platforms = options.platforms,
    platforms = _options$platforms === void 0 ? defaultPlatforms : _options$platforms;
  var platform = process.env.UNI_PLATFORM || '';
  if (platforms === ALL_PLATFORM || platforms.indexOf(ALL_PLATFORM) > -1) {
    return true;
  }
  return platforms.includes(platform);
}
var PLATFORMS_MP = [PLATFORM_MAP.MP_WX, PLATFORM_MAP.MP_QQ];

var htmlReg = /(?<=<template>)([\s\S]+)(?=<\/template>)/;
var imgReg = /(<img[\s\S]+?)v-lazy=(?:"|')(.*?)(?:"|')([\s\S]*?>)/g;
var sizeReg = /(?<=[\s\n]+(?:data-)?)size=(?:"|')(\d+)(?:"|')/;
var widthReg = /(?<=[\s\n]+(?:data-)?)width=(?:"|')(\d+)(?:"|')/;
var heightReg = /(?<=[\s\n]+(?:data-)?)height=(?:"|')(\d+)(?:"|')/;
function vLazyCore(source, options) {
  var _ref = options || {},
    urlHandler = _ref.urlHandler;
  var html = '';
  var match = source.match(htmlReg);
  if (match !== null && match !== void 0 && match[1]) {
    html = match[1];
  }
  if (!html) return source;
  if (!html.match(imgReg)) return source;
  var newHtml = handleImg(html, urlHandler);
  var newSource = source.replace(htmlReg, function () {
    return newHtml;
  });
  return newSource;
}
function getSize(pre, post, reg) {
  var size = '';
  var preMatch = pre.match(reg);
  var postMatch = post.match(reg);
  if (preMatch !== null && preMatch !== void 0 && preMatch[1]) {
    size = preMatch[1];
  } else if (postMatch !== null && postMatch !== void 0 && postMatch[1]) {
    size = postMatch[1];
  }
  return size;
}
function getImgSrc(_ref2) {
  var urlHandler = _ref2.urlHandler,
    src = _ref2.src,
    size = _ref2.size,
    width = _ref2.width,
    height = _ref2.height;
  var srcStr = src;
  if (!urlHandler) {
    return src;
  }
  if (width && height) {
    srcStr = "".concat(urlHandler, "(").concat(src, ", ").concat(width, ", ").concat(height, ")");
  } else if (size) {
    srcStr = "".concat(urlHandler, "(").concat(src, ", ").concat(size, ", ").concat(size, ")");
  } else {
    srcStr = "".concat(urlHandler, "(").concat(src, ")");
  }
  return srcStr;
}
function handleImg() {
  var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
  var urlHandler = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
  var res = str.replace(imgReg, function () {
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    var pre = args[1],
      src = args[2],
      post = args[3];
    var size = getSize(pre, post, sizeReg);
    var width = getSize(pre, post, widthReg);
    var height = getSize(pre, post, heightReg);
    var srcStr = getImgSrc({
      urlHandler: urlHandler,
      src: src,
      size: size,
      width: width,
      height: height
    });
    var innerRes = "".concat(pre, " :src=\"").concat(srcStr, "\" lazy-load ").concat(post);
    return innerRes;
  });
  return res;
}

/**
 * 替换vue模板中的v-lazy，比如
 * <img v-lazy="img"> => <img :src="img">
 *
 * 如果提供 options.urlHandler，则用 urlHandler 包裹，比如：
 * <img v-lazy="img"> => <img :src="getCompressUrl(img)">
 *
 * 如果提供 size 和 urlHandler，则向 urlHandler 传递 size 参数，比如：
 * <img v-lazy="img" size="50"> => <img :src="getCompressUrl(img, 50, 50)">
 *
 *
 * 以下几种size都是有效的：
 * <img v-lazy="src" size="50">
 * <img v-lazy="src" data-size="50">
 * <img v-lazy="src" width="50" height="100">
 * <img v-lazy="src" data-width="50" data-height="100">
 */
function lazyLoader(source) {
  if (!shouldUseLoader.call(this, PLATFORMS_MP)) return source;
  var options = loaderUtils.getOptions(this) || {};
  var newSource = vLazyCore(source, options);
  return newSource;
}

module.exports = lazyLoader;