| 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()]);
 
-   }
 
- });
 
 
  |