"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;
|
