1 | import { isVNode as _isVNode, createVNode as _createVNode } from "vue";
|
2 |
|
3 | function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
4 |
|
5 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
6 |
|
7 | import { tuple } from '../_util/type';
|
8 | import { defineComponent, inject, nextTick } from 'vue';
|
9 | import { defaultConfigProvider } from '../config-provider';
|
10 | import { getComponent } from '../_util/props-util';
|
11 | import PropTypes from '../_util/vue-types';
|
12 |
|
13 | function _isSlot(s) {
|
14 | return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
|
15 | }
|
16 |
|
17 | export default defineComponent({
|
18 | name: 'AAvatar',
|
19 | props: {
|
20 | prefixCls: PropTypes.string,
|
21 | shape: PropTypes.oneOf(tuple('circle', 'square')),
|
22 | size: {
|
23 | type: [Number, String],
|
24 | default: 'default'
|
25 | },
|
26 | src: PropTypes.string,
|
27 |
|
28 |
|
29 | srcset: PropTypes.string,
|
30 |
|
31 |
|
32 | srcSet: PropTypes.string,
|
33 | icon: PropTypes.VNodeChild,
|
34 | alt: PropTypes.string,
|
35 | loadError: {
|
36 | type: Function
|
37 | }
|
38 | },
|
39 | setup: function setup() {
|
40 | return {
|
41 | configProvider: inject('configProvider', defaultConfigProvider)
|
42 | };
|
43 | },
|
44 | data: function data() {
|
45 | return {
|
46 | isImgExist: true,
|
47 | isMounted: false,
|
48 | scale: 1,
|
49 | lastChildrenWidth: undefined,
|
50 | lastNodeWidth: undefined
|
51 | };
|
52 | },
|
53 | watch: {
|
54 | src: function src() {
|
55 | var _this = this;
|
56 |
|
57 | nextTick(function () {
|
58 | _this.isImgExist = true;
|
59 | _this.scale = 1;
|
60 |
|
61 | _this.$forceUpdate();
|
62 | });
|
63 | }
|
64 | },
|
65 | mounted: function mounted() {
|
66 | var _this2 = this;
|
67 |
|
68 | nextTick(function () {
|
69 | _this2.setScale();
|
70 |
|
71 | _this2.isMounted = true;
|
72 | });
|
73 | },
|
74 | updated: function updated() {
|
75 | var _this3 = this;
|
76 |
|
77 | nextTick(function () {
|
78 | _this3.setScale();
|
79 | });
|
80 | },
|
81 | methods: {
|
82 | setScale: function setScale() {
|
83 | if (!this.$refs.avatarChildren || !this.$refs.avatarNode) {
|
84 | return;
|
85 | }
|
86 |
|
87 | var childrenWidth = this.$refs.avatarChildren.offsetWidth;
|
88 |
|
89 | var nodeWidth = this.$refs.avatarNode.offsetWidth;
|
90 |
|
91 | if (childrenWidth === 0 || nodeWidth === 0 || this.lastChildrenWidth === childrenWidth && this.lastNodeWidth === nodeWidth) {
|
92 | return;
|
93 | }
|
94 |
|
95 | this.lastChildrenWidth = childrenWidth;
|
96 | this.lastNodeWidth = nodeWidth;
|
97 |
|
98 | this.scale = nodeWidth - 8 < childrenWidth ? (nodeWidth - 8) / childrenWidth : 1;
|
99 | },
|
100 | handleImgLoadError: function handleImgLoadError() {
|
101 | var loadError = this.$props.loadError;
|
102 | var errorFlag = loadError ? loadError() : undefined;
|
103 |
|
104 | if (errorFlag !== false) {
|
105 | this.isImgExist = false;
|
106 | }
|
107 | }
|
108 | },
|
109 | render: function render() {
|
110 | var _sizeCls, _extends3;
|
111 |
|
112 | var _a, _b;
|
113 |
|
114 | var _this$$props = this.$props,
|
115 | customizePrefixCls = _this$$props.prefixCls,
|
116 | shape = _this$$props.shape,
|
117 | size = _this$$props.size,
|
118 | src = _this$$props.src,
|
119 | alt = _this$$props.alt,
|
120 | srcset = _this$$props.srcset,
|
121 | srcSet = _this$$props.srcSet;
|
122 | var icon = getComponent(this, 'icon');
|
123 | var getPrefixCls = this.configProvider.getPrefixCls;
|
124 | var prefixCls = getPrefixCls('avatar', customizePrefixCls);
|
125 | var _this$$data = this.$data,
|
126 | isImgExist = _this$$data.isImgExist,
|
127 | scale = _this$$data.scale,
|
128 | isMounted = _this$$data.isMounted;
|
129 | var sizeCls = (_sizeCls = {}, _defineProperty(_sizeCls, "".concat(prefixCls, "-lg"), size === 'large'), _defineProperty(_sizeCls, "".concat(prefixCls, "-sm"), size === 'small'), _sizeCls);
|
130 |
|
131 | var classString = _extends(_extends(_defineProperty({}, prefixCls, true), sizeCls), (_extends3 = {}, _defineProperty(_extends3, "".concat(prefixCls, "-").concat(shape), shape), _defineProperty(_extends3, "".concat(prefixCls, "-image"), src && isImgExist), _defineProperty(_extends3, "".concat(prefixCls, "-icon"), icon), _extends3));
|
132 |
|
133 | var sizeStyle = typeof size === 'number' ? {
|
134 | width: "".concat(size, "px"),
|
135 | height: "".concat(size, "px"),
|
136 | lineHeight: "".concat(size, "px"),
|
137 | fontSize: icon ? "".concat(size / 2, "px") : '18px'
|
138 | } : {};
|
139 | var children = (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a);
|
140 |
|
141 | if (src && isImgExist) {
|
142 | children = _createVNode("img", {
|
143 | "src": src,
|
144 | "srcset": srcset || srcSet,
|
145 | "onError": this.handleImgLoadError,
|
146 | "alt": alt
|
147 | }, null);
|
148 | } else if (icon) {
|
149 | children = icon;
|
150 | } else {
|
151 | var childrenNode = this.$refs.avatarChildren;
|
152 |
|
153 | if (childrenNode || scale !== 1) {
|
154 | var transformString = "scale(".concat(scale, ") translateX(-50%)");
|
155 | var childrenStyle = {
|
156 | msTransform: transformString,
|
157 | WebkitTransform: transformString,
|
158 | transform: transformString
|
159 | };
|
160 | var sizeChildrenStyle = typeof size === 'number' ? {
|
161 | lineHeight: "".concat(size, "px")
|
162 | } : {};
|
163 |
|
164 | var _children = function () {
|
165 | return children;
|
166 | }();
|
167 |
|
168 | children = _createVNode("span", {
|
169 | "class": "".concat(prefixCls, "-string"),
|
170 | "ref": "avatarChildren",
|
171 | "style": _extends(_extends({}, sizeChildrenStyle), childrenStyle)
|
172 | }, _isSlot(children) ? children : {
|
173 | default: function _default() {
|
174 | return [_children];
|
175 | }
|
176 | });
|
177 | } else {
|
178 | var _childrenStyle = {};
|
179 |
|
180 | if (!isMounted) {
|
181 | _childrenStyle.opacity = 0;
|
182 | }
|
183 |
|
184 | var _children2 = function () {
|
185 | return children;
|
186 | }();
|
187 |
|
188 | children = _createVNode("span", {
|
189 | "class": "".concat(prefixCls, "-string"),
|
190 | "ref": "avatarChildren",
|
191 | "style": {
|
192 | opacity: 0
|
193 | }
|
194 | }, _isSlot(children) ? children : {
|
195 | default: function _default() {
|
196 | return [_children2];
|
197 | }
|
198 | });
|
199 | }
|
200 | }
|
201 |
|
202 | return _createVNode("span", {
|
203 | "ref": "avatarNode",
|
204 | "class": classString,
|
205 | "style": sizeStyle
|
206 | }, _isSlot(children) ? children : {
|
207 | default: function _default() {
|
208 | return [children];
|
209 | }
|
210 | });
|
211 | }
|
212 | }); |
\ | No newline at end of file |