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