@taole/dev-helper 0.0.21 → 0.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Tdiv/index.js +48 -11
- package/dist/tdiv.umd.js +48 -11
- package/package.json +1 -1
package/Tdiv/index.js
CHANGED
|
@@ -57,7 +57,8 @@ class Tdiv extends HTMLElement {
|
|
|
57
57
|
return [
|
|
58
58
|
'_class', 'usePx', '_style', 'src', 'width', 'height', 'absolute',
|
|
59
59
|
'top', 'left', 'right', 'bottom', 'zIndex', 'pointer', 'flex', 'column', 'center',
|
|
60
|
-
'text', 'color','radius','border','borderColor', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit'
|
|
60
|
+
'text', 'color', 'radius', 'border', 'borderColor', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit',
|
|
61
|
+
'dot9', 'dot9Border'
|
|
61
62
|
];
|
|
62
63
|
}
|
|
63
64
|
|
|
@@ -113,7 +114,6 @@ class Tdiv extends HTMLElement {
|
|
|
113
114
|
_update() {
|
|
114
115
|
if (this._iscalcstyle) return;
|
|
115
116
|
this._iscalcstyle = true;
|
|
116
|
-
// console.log('update');
|
|
117
117
|
// 读取所有属性
|
|
118
118
|
const _class = this._getAttr('_class') || '';
|
|
119
119
|
const usePx = this._getAttr('usePx', 'boolean');
|
|
@@ -132,6 +132,7 @@ class Tdiv extends HTMLElement {
|
|
|
132
132
|
const column = this._getAttr('column', 'boolean');
|
|
133
133
|
const center = this._getAttr('center', 'boolean');
|
|
134
134
|
const text = this._getAttr('text');
|
|
135
|
+
const bold = this._getAttr('bold', 'boolean');
|
|
135
136
|
const color = this._getAttr('color');
|
|
136
137
|
const radius = this._getAttr('radius');
|
|
137
138
|
const border = this._getAttr('border');
|
|
@@ -140,6 +141,10 @@ class Tdiv extends HTMLElement {
|
|
|
140
141
|
const debug = this._getAttr('debug', 'boolean');
|
|
141
142
|
const viewportWidth = this._getAttr('viewportWidth', 'number');
|
|
142
143
|
const viewportUnit = this._getAttr('viewportUnit');
|
|
144
|
+
const textEllipsis = this._getAttr('textEllipsis');
|
|
145
|
+
let dot9 = (this._getAttr('dot9', 'string') || '').split(" ");
|
|
146
|
+
let dot9Border = (this._getAttr('dot9Border', 'string') || this._getAttr('dot9', 'string') || '').split(" ");
|
|
147
|
+
|
|
143
148
|
// class
|
|
144
149
|
let extraClass = ['tw-img-div'];
|
|
145
150
|
if (_class) extraClass.push(_class);
|
|
@@ -147,6 +152,15 @@ class Tdiv extends HTMLElement {
|
|
|
147
152
|
// 分组样式
|
|
148
153
|
const calcOpt = { usePx, viewportWidth, viewportUnit };
|
|
149
154
|
let layoutStyle = '';
|
|
155
|
+
|
|
156
|
+
let useDot9 = false;
|
|
157
|
+
if (dot9.length === 4 && dot9Border.length === 4) {
|
|
158
|
+
useDot9 = true;
|
|
159
|
+
dot9Border.forEach((item, index) => {
|
|
160
|
+
dot9Border[index] = calc(item, calcOpt);
|
|
161
|
+
});
|
|
162
|
+
}
|
|
163
|
+
|
|
150
164
|
// 宽度
|
|
151
165
|
if (hasValue(width)) {
|
|
152
166
|
const widthStyle = `width: ${calc(width, calcOpt)};`;
|
|
@@ -193,21 +207,44 @@ class Tdiv extends HTMLElement {
|
|
|
193
207
|
}
|
|
194
208
|
|
|
195
209
|
if (text) layoutStyle += `font-size: ${calc(text, calcOpt)};`;
|
|
210
|
+
if (bold) layoutStyle += `font-weight: bold;`;
|
|
211
|
+
if(textEllipsis !== null){
|
|
212
|
+
const isSingleLine = !/^\d+$/.test(textEllipsis);
|
|
213
|
+
layoutStyle += `overflow: hidden;`;
|
|
214
|
+
layoutStyle += `text-overflow: ellipsis;`;
|
|
215
|
+
if(isSingleLine){
|
|
216
|
+
layoutStyle += `white-space: nowrap;`;
|
|
217
|
+
} else {
|
|
218
|
+
layoutStyle += `white-space: pre-wrap;`;
|
|
219
|
+
layoutStyle += `overflow-wrap: break-word;`;
|
|
220
|
+
layoutStyle += `word-break: break-all;`;
|
|
221
|
+
layoutStyle += `display: -webkit-box;`;
|
|
222
|
+
layoutStyle += `-webkit-line-clamp: ${textEllipsis};`;
|
|
223
|
+
layoutStyle += `-webkit-box-orient: vertical;`;
|
|
224
|
+
layoutStyle += `line-clamp: ${textEllipsis};`;
|
|
225
|
+
layoutStyle += `box-orient: vertical;`;
|
|
226
|
+
}
|
|
227
|
+
}
|
|
196
228
|
if (src) {
|
|
197
229
|
let realSrc = src;
|
|
198
230
|
if (src.indexOf('https://') === -1) {
|
|
199
231
|
realSrc = `https://dynamics-share.tuwan.com/${src}`;
|
|
200
|
-
if(isSupportWebp){
|
|
232
|
+
if (isSupportWebp) {
|
|
201
233
|
realSrc = `https://dynamics-share.tuwan.com/${src}?x-oss-process=image/format,webp/ignore-error,1`;
|
|
202
234
|
}
|
|
203
235
|
}
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
layoutStyle +=
|
|
209
|
-
} else
|
|
210
|
-
layoutStyle +=
|
|
236
|
+
if (useDot9) {
|
|
237
|
+
layoutStyle += `border-image: url(${realSrc}) ${dot9.join(" ")} fill;`;
|
|
238
|
+
layoutStyle += `border-width: ${dot9Border.join(" ")};`;
|
|
239
|
+
layoutStyle += `border-style: solid;`;
|
|
240
|
+
layoutStyle += `box-sizing: border-box;`;
|
|
241
|
+
} else {
|
|
242
|
+
layoutStyle += `background-image: url(${realSrc});`;
|
|
243
|
+
if (srcMode === 'fill') {
|
|
244
|
+
layoutStyle += 'background-size: 100% 100%;';
|
|
245
|
+
} else if (srcMode === 'cover') {
|
|
246
|
+
layoutStyle += 'background-size: cover;';
|
|
247
|
+
}
|
|
211
248
|
}
|
|
212
249
|
}
|
|
213
250
|
if (color) layoutStyle += `color: ${color};`;
|
|
@@ -227,7 +264,7 @@ class Tdiv extends HTMLElement {
|
|
|
227
264
|
const onClickAttr = this._getAttr('onClick');
|
|
228
265
|
if (onClickAttr && typeof window[onClickAttr] === 'function') {
|
|
229
266
|
window[onClickAttr](e);
|
|
230
|
-
} else if(onClickAttr && typeof onClickAttr === 'function') {
|
|
267
|
+
} else if (onClickAttr && typeof onClickAttr === 'function') {
|
|
231
268
|
onClickAttr(e);
|
|
232
269
|
}
|
|
233
270
|
}
|
package/dist/tdiv.umd.js
CHANGED
|
@@ -141,7 +141,8 @@
|
|
|
141
141
|
return [
|
|
142
142
|
'_class', 'usePx', '_style', 'src', 'width', 'height', 'absolute',
|
|
143
143
|
'top', 'left', 'right', 'bottom', 'zIndex', 'pointer', 'flex', 'column', 'center',
|
|
144
|
-
'text', 'color','radius','border','borderColor', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit'
|
|
144
|
+
'text', 'color', 'radius', 'border', 'borderColor', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit',
|
|
145
|
+
'dot9', 'dot9Border'
|
|
145
146
|
];
|
|
146
147
|
}
|
|
147
148
|
|
|
@@ -197,7 +198,6 @@
|
|
|
197
198
|
_update() {
|
|
198
199
|
if (this._iscalcstyle) return;
|
|
199
200
|
this._iscalcstyle = true;
|
|
200
|
-
// console.log('update');
|
|
201
201
|
// 读取所有属性
|
|
202
202
|
const _class = this._getAttr('_class') || '';
|
|
203
203
|
const usePx = this._getAttr('usePx', 'boolean');
|
|
@@ -216,6 +216,7 @@
|
|
|
216
216
|
const column = this._getAttr('column', 'boolean');
|
|
217
217
|
const center = this._getAttr('center', 'boolean');
|
|
218
218
|
const text = this._getAttr('text');
|
|
219
|
+
const bold = this._getAttr('bold', 'boolean');
|
|
219
220
|
const color = this._getAttr('color');
|
|
220
221
|
const radius = this._getAttr('radius');
|
|
221
222
|
const border = this._getAttr('border');
|
|
@@ -224,6 +225,10 @@
|
|
|
224
225
|
const debug = this._getAttr('debug', 'boolean');
|
|
225
226
|
const viewportWidth = this._getAttr('viewportWidth', 'number');
|
|
226
227
|
const viewportUnit = this._getAttr('viewportUnit');
|
|
228
|
+
const textEllipsis = this._getAttr('textEllipsis');
|
|
229
|
+
let dot9 = (this._getAttr('dot9', 'string') || '').split(" ");
|
|
230
|
+
let dot9Border = (this._getAttr('dot9Border', 'string') || this._getAttr('dot9', 'string') || '').split(" ");
|
|
231
|
+
|
|
227
232
|
// class
|
|
228
233
|
let extraClass = ['tw-img-div'];
|
|
229
234
|
if (_class) extraClass.push(_class);
|
|
@@ -231,6 +236,15 @@
|
|
|
231
236
|
// 分组样式
|
|
232
237
|
const calcOpt = { usePx, viewportWidth, viewportUnit };
|
|
233
238
|
let layoutStyle = '';
|
|
239
|
+
|
|
240
|
+
let useDot9 = false;
|
|
241
|
+
if (dot9.length === 4 && dot9Border.length === 4) {
|
|
242
|
+
useDot9 = true;
|
|
243
|
+
dot9Border.forEach((item, index) => {
|
|
244
|
+
dot9Border[index] = calc(item, calcOpt);
|
|
245
|
+
});
|
|
246
|
+
}
|
|
247
|
+
|
|
234
248
|
// 宽度
|
|
235
249
|
if (hasValue(width)) {
|
|
236
250
|
const widthStyle = `width: ${calc(width, calcOpt)};`;
|
|
@@ -277,21 +291,44 @@
|
|
|
277
291
|
}
|
|
278
292
|
|
|
279
293
|
if (text) layoutStyle += `font-size: ${calc(text, calcOpt)};`;
|
|
294
|
+
if (bold) layoutStyle += `font-weight: bold;`;
|
|
295
|
+
if(textEllipsis !== null){
|
|
296
|
+
const isSingleLine = !/^\d+$/.test(textEllipsis);
|
|
297
|
+
layoutStyle += `overflow: hidden;`;
|
|
298
|
+
layoutStyle += `text-overflow: ellipsis;`;
|
|
299
|
+
if(isSingleLine){
|
|
300
|
+
layoutStyle += `white-space: nowrap;`;
|
|
301
|
+
} else {
|
|
302
|
+
layoutStyle += `white-space: pre-wrap;`;
|
|
303
|
+
layoutStyle += `overflow-wrap: break-word;`;
|
|
304
|
+
layoutStyle += `word-break: break-all;`;
|
|
305
|
+
layoutStyle += `display: -webkit-box;`;
|
|
306
|
+
layoutStyle += `-webkit-line-clamp: ${textEllipsis};`;
|
|
307
|
+
layoutStyle += `-webkit-box-orient: vertical;`;
|
|
308
|
+
layoutStyle += `line-clamp: ${textEllipsis};`;
|
|
309
|
+
layoutStyle += `box-orient: vertical;`;
|
|
310
|
+
}
|
|
311
|
+
}
|
|
280
312
|
if (src) {
|
|
281
313
|
let realSrc = src;
|
|
282
314
|
if (src.indexOf('https://') === -1) {
|
|
283
315
|
realSrc = `https://dynamics-share.tuwan.com/${src}`;
|
|
284
|
-
if(isSupportWebp){
|
|
316
|
+
if (isSupportWebp) {
|
|
285
317
|
realSrc = `https://dynamics-share.tuwan.com/${src}?x-oss-process=image/format,webp/ignore-error,1`;
|
|
286
318
|
}
|
|
287
319
|
}
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
layoutStyle +=
|
|
293
|
-
} else
|
|
294
|
-
layoutStyle +=
|
|
320
|
+
if (useDot9) {
|
|
321
|
+
layoutStyle += `border-image: url(${realSrc}) ${dot9.join(" ")} fill;`;
|
|
322
|
+
layoutStyle += `border-width: ${dot9Border.join(" ")};`;
|
|
323
|
+
layoutStyle += `border-style: solid;`;
|
|
324
|
+
layoutStyle += `box-sizing: border-box;`;
|
|
325
|
+
} else {
|
|
326
|
+
layoutStyle += `background-image: url(${realSrc});`;
|
|
327
|
+
if (srcMode === 'fill') {
|
|
328
|
+
layoutStyle += 'background-size: 100% 100%;';
|
|
329
|
+
} else if (srcMode === 'cover') {
|
|
330
|
+
layoutStyle += 'background-size: cover;';
|
|
331
|
+
}
|
|
295
332
|
}
|
|
296
333
|
}
|
|
297
334
|
if (color) layoutStyle += `color: ${color};`;
|
|
@@ -311,7 +348,7 @@
|
|
|
311
348
|
const onClickAttr = this._getAttr('onClick');
|
|
312
349
|
if (onClickAttr && typeof window[onClickAttr] === 'function') {
|
|
313
350
|
window[onClickAttr](e);
|
|
314
|
-
} else if(onClickAttr && typeof onClickAttr === 'function') {
|
|
351
|
+
} else if (onClickAttr && typeof onClickAttr === 'function') {
|
|
315
352
|
onClickAttr(e);
|
|
316
353
|
}
|
|
317
354
|
}
|