first

node_modules/vant/lib/image/index.js

@@ -0,0 +1,199 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _babelHelperVueJsxMergeProps = _interopRequireDefault(require("@vue/babel-helper-vue-jsx-merge-props"));
+
+var _utils = require("../utils");
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _createNamespace = (0, _utils.createNamespace)('image'),
+    createComponent = _createNamespace[0],
+    bem = _createNamespace[1];
+
+var _default = createComponent({
+  props: {
+    src: String,
+    fit: String,
+    alt: String,
+    round: Boolean,
+    width: [Number, String],
+    height: [Number, String],
+    radius: [Number, String],
+    lazyLoad: Boolean,
+    iconPrefix: String,
+    showError: {
+      type: Boolean,
+      default: true
+    },
+    showLoading: {
+      type: Boolean,
+      default: true
+    },
+    errorIcon: {
+      type: String,
+      default: 'photo-fail'
+    },
+    loadingIcon: {
+      type: String,
+      default: 'photo'
+    }
+  },
+  data: function data() {
+    return {
+      loading: true,
+      error: false
+    };
+  },
+  watch: {
+    src: function src() {
+      this.loading = true;
+      this.error = false;
+    }
+  },
+  computed: {
+    style: function style() {
+      var style = {};
+
+      if ((0, _utils.isDef)(this.width)) {
+        style.width = (0, _utils.addUnit)(this.width);
+      }
+
+      if ((0, _utils.isDef)(this.height)) {
+        style.height = (0, _utils.addUnit)(this.height);
+      }
+
+      if ((0, _utils.isDef)(this.radius)) {
+        style.overflow = 'hidden';
+        style.borderRadius = (0, _utils.addUnit)(this.radius);
+      }
+
+      return style;
+    }
+  },
+  created: function created() {
+    var $Lazyload = this.$Lazyload;
+
+    if ($Lazyload && _utils.inBrowser) {
+      $Lazyload.$on('loaded', this.onLazyLoaded);
+      $Lazyload.$on('error', this.onLazyLoadError);
+    }
+  },
+  beforeDestroy: function beforeDestroy() {
+    var $Lazyload = this.$Lazyload;
+
+    if ($Lazyload) {
+      $Lazyload.$off('loaded', this.onLazyLoaded);
+      $Lazyload.$off('error', this.onLazyLoadError);
+    }
+  },
+  methods: {
+    onLoad: function onLoad(event) {
+      this.loading = false;
+      this.$emit('load', event);
+    },
+    onLazyLoaded: function onLazyLoaded(_ref) {
+      var el = _ref.el;
+
+      if (el === this.$refs.image && this.loading) {
+        this.onLoad();
+      }
+    },
+    onLazyLoadError: function onLazyLoadError(_ref2) {
+      var el = _ref2.el;
+
+      if (el === this.$refs.image && !this.error) {
+        this.onError();
+      }
+    },
+    onError: function onError(event) {
+      this.error = true;
+      this.loading = false;
+      this.$emit('error', event);
+    },
+    onClick: function onClick(event) {
+      this.$emit('click', event);
+    },
+    genPlaceholder: function genPlaceholder() {
+      var h = this.$createElement;
+
+      if (this.loading && this.showLoading) {
+        return h("div", {
+          "class": bem('loading')
+        }, [this.slots('loading') || h(_icon.default, {
+          "attrs": {
+            "name": this.loadingIcon,
+            "classPrefix": this.iconPrefix
+          },
+          "class": bem('loading-icon')
+        })]);
+      }
+
+      if (this.error && this.showError) {
+        return h("div", {
+          "class": bem('error')
+        }, [this.slots('error') || h(_icon.default, {
+          "attrs": {
+            "name": this.errorIcon,
+            "classPrefix": this.iconPrefix
+          },
+          "class": bem('error-icon')
+        })]);
+      }
+    },
+    genImage: function genImage() {
+      var h = this.$createElement;
+      var imgData = {
+        class: bem('img'),
+        attrs: {
+          alt: this.alt
+        },
+        style: {
+          objectFit: this.fit
+        }
+      };
+
+      if (this.error) {
+        return;
+      }
+
+      if (this.lazyLoad) {
+        return h("img", (0, _babelHelperVueJsxMergeProps.default)([{
+          "ref": "image",
+          "directives": [{
+            name: "lazy",
+            value: this.src
+          }]
+        }, imgData]));
+      }
+
+      return h("img", (0, _babelHelperVueJsxMergeProps.default)([{
+        "attrs": {
+          "src": this.src
+        },
+        "on": {
+          "load": this.onLoad,
+          "error": this.onError
+        }
+      }, imgData]));
+    }
+  },
+  render: function render() {
+    var h = arguments[0];
+    return h("div", {
+      "class": bem({
+        round: this.round
+      }),
+      "style": this.style,
+      "on": {
+        "click": this.onClick
+      }
+    }, [this.genImage(), this.genPlaceholder(), this.slots()]);
+  }
+});
+
+exports.default = _default;