| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189 | import _mergeJSXProps2 from "@vue/babel-helper-vue-jsx-merge-props";import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";import { createNamespace, isDef, addUnit, inBrowser } from '../utils';import Icon from '../icon';var _createNamespace = createNamespace('image'),    createComponent = _createNamespace[0],    bem = _createNamespace[1];export 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 (isDef(this.width)) {        style.width = addUnit(this.width);      }      if (isDef(this.height)) {        style.height = addUnit(this.height);      }      if (isDef(this.radius)) {        style.overflow = 'hidden';        style.borderRadius = addUnit(this.radius);      }      return style;    }  },  created: function created() {    var $Lazyload = this.$Lazyload;    if ($Lazyload && 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, {          "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, {          "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", _mergeJSXProps([{          "ref": "image",          "directives": [{            name: "lazy",            value: this.src          }]        }, imgData]));      }      return h("img", _mergeJSXProps2([{        "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()]);  }});
 |