@ajaxjs/util 1.1.0 → 1.1.2
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/README.md +56 -7
- package/dist/index.esm.js +525 -0
- package/dist/index.umd.js +536 -0
- package/dist/{util → src/core}/cookies.d.ts +18 -18
- package/dist/{util → src/core}/dom.d.ts +17 -17
- package/dist/{util → src/core}/utils.d.ts +51 -51
- package/dist/{util → src/core}/xhr-config.d.ts +22 -22
- package/dist/{util → src/core}/xhr.d.ts +71 -71
- package/dist/src/index.d.ts +5 -0
- package/package.json +39 -43
- package/{dist/util/cookies.js → src/core/cookies.ts} +15 -18
- package/{dist/util/dom.js → src/core/dom.ts} +17 -14
- package/{dist/util/utils.js → src/core/utils.ts} +82 -77
- package/src/core/xhr-config.ts +25 -0
- package/{dist/util/xhr.js → src/core/xhr.ts} +128 -94
- package/src/index.ts +6 -0
- package/LICENSE +0 -201
- package/dist/index.d.ts +0 -38
- package/dist/index.js +0 -71
- package/dist/index.js.map +0 -1
- package/dist/main.d.ts +0 -1
- package/dist/main.js +0 -16
- package/dist/main.js.map +0 -1
- package/dist/router/index.d.ts +0 -3
- package/dist/router/index.js +0 -44
- package/dist/router/index.js.map +0 -1
- package/dist/shims-vue.d.ts +0 -4
- package/dist/util/cookies.js.map +0 -1
- package/dist/util/dom.js.map +0 -1
- package/dist/util/utils.js.map +0 -1
- package/dist/util/xhr-config.js +0 -3
- package/dist/util/xhr-config.js.map +0 -1
- package/dist/util/xhr.js.map +0 -1
- package/dist/widget/AccordionMenu.vue +0 -140
- package/dist/widget/AdjustFontSize.vue +0 -65
- package/dist/widget/Article.vue +0 -59
- package/dist/widget/EmptyContent.d.ts +0 -5
- package/dist/widget/EmptyContent.js +0 -7
- package/dist/widget/EmptyContent.js.map +0 -1
- package/dist/widget/Expander.vue +0 -65
- package/dist/widget/FileUploader/FileUploader.d.ts +0 -70
- package/dist/widget/FileUploader/FileUploader.js +0 -139
- package/dist/widget/FileUploader/FileUploader.js.map +0 -1
- package/dist/widget/FileUploader/FileUploader.less +0 -68
- package/dist/widget/FileUploader/FileUploader.ts +0 -156
- package/dist/widget/FileUploader/FileUploader.vue +0 -43
- package/dist/widget/HtmlEditor/HtmlEditor.d.ts +0 -70
- package/dist/widget/HtmlEditor/HtmlEditor.js +0 -287
- package/dist/widget/HtmlEditor/HtmlEditor.js.map +0 -1
- package/dist/widget/HtmlEditor/HtmlEditor.less +0 -345
- package/dist/widget/HtmlEditor/HtmlEditor.ts +0 -339
- package/dist/widget/HtmlEditor/HtmlEditor.vue +0 -70
- package/dist/widget/HtmlEditor/html-editor-HtmlSanitizer.js +0 -103
- package/dist/widget/ImageEnlarger.vue +0 -105
- package/dist/widget/OpacityBanner.vue +0 -125
- package/dist/widget/ProcessLine.vue +0 -133
- package/dist/widget/Resize.d.ts +0 -51
- package/dist/widget/Resize.js +0 -133
- package/dist/widget/Resize.js.map +0 -1
- package/dist/widget/Resize.ts +0 -152
- package/dist/widget/Resize.vue +0 -104
- package/dist/widget/TreeSelector.vue +0 -4
- package/dist/widget/calendar/BetweenDate.vue +0 -63
- package/dist/widget/calendar/Calendar.d.ts +0 -55
- package/dist/widget/calendar/Calendar.js +0 -145
- package/dist/widget/calendar/Calendar.js.map +0 -1
- package/dist/widget/calendar/Calendar.less +0 -210
- package/dist/widget/calendar/Calendar.ts +0 -167
- package/dist/widget/calendar/Calendar.vue +0 -52
- package/dist/widget/calendar/CalendarInput.vue +0 -71
- package/dist/widget/form/validator.d.ts +0 -70
- package/dist/widget/form/validator.js +0 -220
- package/dist/widget/form/validator.js.map +0 -1
- package/dist/widget/form/validator.ts +0 -289
- package/dist/widget/play-ground/sku.vue +0 -93
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="aj-form-html-editor">
|
|
3
|
-
<ul class="toolbar">
|
|
4
|
-
<li class="dorpdown">
|
|
5
|
-
<i title="字体" class="text-icon">A</i>
|
|
6
|
-
<div class="fontfamilyChoser" @click="onFontfamilyChoserClk">
|
|
7
|
-
<a style="font-family: '宋体'">宋体</a>
|
|
8
|
-
<a style="font-family: '黑体'">黑体</a>
|
|
9
|
-
<a style="font-family: '楷体'">楷体</a>
|
|
10
|
-
<a style="font-family: '隶书'">隶书</a>
|
|
11
|
-
<a style="font-family: '幼圆'">幼圆</a>
|
|
12
|
-
<a style="font-family: 'Microsoft YaHei'">Microsoft YaHei</a>
|
|
13
|
-
<a style="font-family: Arial">Arial</a>
|
|
14
|
-
<a style="font-family: 'Arial Narrow'">Arial Narrow</a>
|
|
15
|
-
<a style="font-family: 'Arial Black'">Arial Black</a>
|
|
16
|
-
<a style="font-family: 'Comic Sans MS'">Comic Sans MS</a>
|
|
17
|
-
<a style="font-family: Courier">Courier</a>
|
|
18
|
-
<a style="font-family: System">System</a>
|
|
19
|
-
<a style="font-family: 'Times New Roman'">Times New Roman</a>
|
|
20
|
-
<a style="font-family: Verdana">Verdana</a>
|
|
21
|
-
</div>
|
|
22
|
-
</li>
|
|
23
|
-
<li class="dorpdown">
|
|
24
|
-
<i title="字号" class="text-icon">H</i>
|
|
25
|
-
<div class="fontsizeChoser" @click="onFontsizeChoserClk">
|
|
26
|
-
<a style="font-size: xx-small; ">极小</a>
|
|
27
|
-
<a style="font-size: x-small; ">特小</a>
|
|
28
|
-
<a style="font-size: small; ">小</a>
|
|
29
|
-
<a style="font-size: medium; ">中</a>
|
|
30
|
-
<a style="font-size: large; ">大</a>
|
|
31
|
-
<a style="font-size: x-large; ">特大</a>
|
|
32
|
-
<a style="font-size: xx-large; line-height: 140%">极大</a>
|
|
33
|
-
</div>
|
|
34
|
-
</li>
|
|
35
|
-
<li @click="onCmdClk"><i title="加粗" class="bold text-icon">B</i></li>
|
|
36
|
-
<li @click="onCmdClk"><i title="斜体" class="italic text-icon" style="font-style:italic">I</i></li>
|
|
37
|
-
<li @click="onCmdClk"><i title="下划线" class="underline text-icon" style="text-decoration: underline;">U</i></li>
|
|
38
|
-
<li @click="onCmdClk"><i title="左对齐" :class="'justifyleft '+ (isIonicons ? 'ivu-icon ivu-icon-bingo-menu-fold' : 'fontAwesome fa-align-left')"></i></li>
|
|
39
|
-
<li @click="onCmdClk"><i title="中间对齐" :class="'justifycenter '+ (isIonicons ? 'ivu-icon ivu-icon-md-menu' : 'fontAwesome fa-align-center')"></i></li>
|
|
40
|
-
<li @click="onCmdClk"><i title="右对齐" :class="'justifyright '+ (isIonicons ? 'ivu-icon ivu-icon-bingo-menu-unfold' : 'fontAwesome fa-align-right')"></i></li>
|
|
41
|
-
<li @click="onCmdClk"><i title="数字编号" :class="'insertorderedlist '+ (isIonicons ? 'ivu-icon ivu-icon-md-list' : 'fontAwesome fa-list-ol')"></i></li>
|
|
42
|
-
<li @click="onCmdClk"><i title="项目编号" :class="'insertunorderedlist '+ (isIonicons ? 'ivu-icon ivu-icon-ios-list' : 'fontAwesome fa-list-ul')"></i></li>
|
|
43
|
-
<li @click="onCmdClk"><i title="增加缩进" :class="'outdent '+ (isIonicons ? 'ivu-icon ivu-icon-ios-return-left' : 'fontAwesome fa-outdent')"></i></li>
|
|
44
|
-
<li @click="onCmdClk"><i title="减少缩进" :class="'indent '+ (isIonicons ? 'ivu-icon ivu-icon-ios-return-right' : 'fontAwesome fa-indent')"></i></li>
|
|
45
|
-
<li class="dorpdown">
|
|
46
|
-
<i title="字体颜色" :class="isIonicons ? 'ivu-icon ivu-icon-md-brush' : 'fontAwesome fa-paint-brush'"></i>
|
|
47
|
-
<div class="colorPicker" v-html="createColorPickerHTML()" @click="format('foreColor', $event.target.title)"></div>
|
|
48
|
-
</li>
|
|
49
|
-
<li class="dorpdown">
|
|
50
|
-
<i title="背景颜色" :class="isIonicons ? 'ivu-icon ivu-icon-ios-brush-outline' : 'fontAwesome fa-pencil'"></i>
|
|
51
|
-
<div class="colorPicker" v-html="createColorPickerHTML()" @click="format('backColor', $event.target.title)"></div>
|
|
52
|
-
</li>
|
|
53
|
-
<li @click="createLink"><i title="增加链接" :class="isIonicons ? 'ivu-icon ivu-icon-ios-link' : 'fontAwesome fa-link'"></i></li>
|
|
54
|
-
<li @click="insertImage"><i title="增加图片" :class="isIonicons ? 'ivu-icon ivu-icon-md-images' : 'fontAwesome fa-regular fa-image'"></i></li>
|
|
55
|
-
<li @click="saveRemoteImage2Local"><i title="一键存图" :class="isIonicons ? 'ivu-icon ivu-icon-md-photos' : 'fontAwesome fa-camera'"></i></li>
|
|
56
|
-
<li @click="cleanHTML"><i title="清理 HTML" :class="isIonicons ? 'ivu-icon ivu-icon-md-done-all' : 'fontAwesome fa-eraser'"></i></li>
|
|
57
|
-
<li @click="isShowCode = !isShowCode"><i title="切换到代码" :class="(isIonicons ? 'ivu-icon ivu-icon-md-code' : 'fontAwesome fa-code')+ ' switchMode'"></i></li>
|
|
58
|
-
</ul>
|
|
59
|
-
|
|
60
|
-
<div class="editorBody">
|
|
61
|
-
<iframe srcdoc="<html><body></body></html>"></iframe>
|
|
62
|
-
<textarea></textarea>
|
|
63
|
-
</div>
|
|
64
|
-
<!-- <aj-form-popup-upload ref="uploadLayer" :upload-url="uploadImageActionUrl"></aj-form-popup-upload> -->
|
|
65
|
-
</div>
|
|
66
|
-
</template>
|
|
67
|
-
|
|
68
|
-
<script lang="ts" src="./HtmlEditor.ts"></script>
|
|
69
|
-
|
|
70
|
-
<style lang="less" src="./HtmlEditor.less"></style>
|
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
// https://github.com/jitbit/HtmlSanitizer/blob/master/HtmlSanitizer.js
|
|
2
|
-
// @ts-ignore
|
|
3
|
-
HtmlSanitizer = new (function foo() {
|
|
4
|
-
var tagWhitelist_ = {
|
|
5
|
-
'A': true, 'ABBR': true, 'B': true, 'BLOCKQUOTE': true, 'BODY': true, 'BR': true, 'CENTER': true, 'CODE': true, 'DIV': true, 'EM': true, 'FONT': true,
|
|
6
|
-
'H1': true, 'H2': true, 'H3': true, 'H4': true, 'H5': true, 'H6': true, 'HR': true, 'I': true, 'IMG': true, 'LABEL': true, 'LI': true, 'OL': true, 'P': true, 'PRE': true,
|
|
7
|
-
'SMALL': true, 'SOURCE': true, 'SPAN': true, 'STRONG': true, 'TABLE': true, 'TBODY': true, 'TR': true, 'TD': true, 'TH': true, 'THEAD': true, 'UL': true, 'U': true, 'VIDEO': true
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
var contentTagWhiteList_ = { 'FORM': true }; //tags that will be converted to DIVs
|
|
11
|
-
var attributeWhitelist_ = { 'align': true, 'color': true, 'controls': true, 'height': true, 'href': true, 'src': true, 'style': false, 'target': true, 'title': true, 'type': true, 'width': true };
|
|
12
|
-
var cssWhitelist_ = { 'color': true, 'background-color': true, 'font-size': true, 'text-align': true, 'text-decoration': true, 'font-weight': true };
|
|
13
|
-
var schemaWhiteList_ = ['http:', 'https:', 'data:', 'm-files:', 'file:', 'ftp:']; //which "protocols" are allowed in "href", "src" etc
|
|
14
|
-
var uriAttributes_ = { 'href': true, 'action': true };
|
|
15
|
-
// @ts-ignore
|
|
16
|
-
this.SanitizeHtml = function (input) {
|
|
17
|
-
input = input.trim();
|
|
18
|
-
if (input == "") return ""; //to save performance and not create iframe
|
|
19
|
-
|
|
20
|
-
//firefox "bogus node" workaround
|
|
21
|
-
if (input == "<br>") return "";
|
|
22
|
-
|
|
23
|
-
var iframe = document.createElement('iframe');
|
|
24
|
-
if (iframe['sandbox'] === undefined) {
|
|
25
|
-
alert('Your browser does not support sandboxed iframes. Please upgrade to a modern browser.');
|
|
26
|
-
return '';
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
iframe['sandbox'] = 'allow-same-origin';
|
|
30
|
-
iframe.style.display = 'none';
|
|
31
|
-
document.body.appendChild(iframe); // necessary so the iframe contains a document
|
|
32
|
-
|
|
33
|
-
var iframedoc = iframe.contentDocument || iframe.contentWindow.document;
|
|
34
|
-
if (iframedoc.body == null) iframedoc.write("<body></body>"); // null in IE
|
|
35
|
-
iframedoc.body.innerHTML = input;
|
|
36
|
-
|
|
37
|
-
function makeSanitizedCopy(node) {
|
|
38
|
-
if (node.nodeType == Node.TEXT_NODE) {
|
|
39
|
-
var newNode = node.cloneNode(true);
|
|
40
|
-
} else if (node.nodeType == Node.ELEMENT_NODE && (tagWhitelist_[node.tagName] || contentTagWhiteList_[node.tagName])) {
|
|
41
|
-
|
|
42
|
-
//remove useless empty spans (lots of those when pasting from MS Outlook)
|
|
43
|
-
if ((node.tagName == "SPAN" || node.tagName == "B" || node.tagName == "I" || node.tagName == "U")
|
|
44
|
-
&& node.innerHTML.trim() == "") {
|
|
45
|
-
return document.createDocumentFragment();
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
if (contentTagWhiteList_[node.tagName])
|
|
49
|
-
newNode = iframedoc.createElement('DIV'); //convert to DIV
|
|
50
|
-
else
|
|
51
|
-
newNode = iframedoc.createElement(node.tagName);
|
|
52
|
-
|
|
53
|
-
for (var i = 0; i < node.attributes.length; i++) {
|
|
54
|
-
var attr = node.attributes[i];
|
|
55
|
-
if (attributeWhitelist_[attr.name]) {
|
|
56
|
-
if (attr.name == "style") {
|
|
57
|
-
for (s = 0; s < node.style.length; s++) {
|
|
58
|
-
var styleName = node.style[s];
|
|
59
|
-
if (cssWhitelist_[styleName])
|
|
60
|
-
newNode.style.setProperty(styleName, node.style.getPropertyValue(styleName));
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
else {
|
|
64
|
-
if (uriAttributes_[attr.name]) { //if this is a "uri" attribute, that can have "javascript:" or something
|
|
65
|
-
if (attr.value.indexOf(":") > -1 && !startsWithAny(attr.value, schemaWhiteList_))
|
|
66
|
-
continue;
|
|
67
|
-
}
|
|
68
|
-
newNode.setAttribute(attr.name, attr.value);
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
for (i = 0; i < node.childNodes.length; i++) {
|
|
73
|
-
var subCopy = makeSanitizedCopy(node.childNodes[i]);
|
|
74
|
-
newNode.appendChild(subCopy, false);
|
|
75
|
-
}
|
|
76
|
-
} else {
|
|
77
|
-
newNode = document.createDocumentFragment();
|
|
78
|
-
}
|
|
79
|
-
return newNode;
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
var resultElement = makeSanitizedCopy(iframedoc.body);
|
|
83
|
-
document.body.removeChild(iframe);
|
|
84
|
-
return resultElement.innerHTML
|
|
85
|
-
.replace(/<br[^>]*>(\S)/g, "<br>\n$1")
|
|
86
|
-
.replace(/div><div/g, "div>\n<div"); //replace is just for cleaner code
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
function startsWithAny(str, substrings) {
|
|
90
|
-
for (var i = 0; i < substrings.length; i++) {
|
|
91
|
-
if (str.indexOf(substrings[i]) == 0) {
|
|
92
|
-
return true;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
return false;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
this.AllowedTags = tagWhitelist_;
|
|
100
|
-
this.AllowedAttributes = attributeWhitelist_;
|
|
101
|
-
this.AllowedCssStyles = cssWhitelist_;
|
|
102
|
-
this.AllowedSchemas = schemaWhiteList_;
|
|
103
|
-
});
|
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<a class="aj-img-thumb" :href="imgUrl" v-if="imgUrl" target="_blank">
|
|
3
|
-
<img :src="imgUrl" @mouseenter="current = imgUrl" @mouseleave="current = null" />
|
|
4
|
-
</a>
|
|
5
|
-
</template>
|
|
6
|
-
|
|
7
|
-
<script>
|
|
8
|
-
/**
|
|
9
|
-
* 悬浮显示大图
|
|
10
|
-
*/
|
|
11
|
-
export default {
|
|
12
|
-
props: {
|
|
13
|
-
imgUrl: { type: String, required: true },// 图片地址
|
|
14
|
-
},
|
|
15
|
-
|
|
16
|
-
data() {
|
|
17
|
-
return { current: '' }
|
|
18
|
-
},
|
|
19
|
-
watch: {
|
|
20
|
-
current(v) {
|
|
21
|
-
let el = document.querySelector("body > div.aj-image-large-view");
|
|
22
|
-
|
|
23
|
-
if (v) {
|
|
24
|
-
el.querySelector('img').src = v;
|
|
25
|
-
setTimeout(() => el.style.display = 'block', 700);
|
|
26
|
-
} else
|
|
27
|
-
el.style.display = 'none';
|
|
28
|
-
}
|
|
29
|
-
},
|
|
30
|
-
mounted() {
|
|
31
|
-
// 初始化
|
|
32
|
-
let div = document.querySelector("body > div.aj-image-large-view");
|
|
33
|
-
|
|
34
|
-
if (!div) {
|
|
35
|
-
div = document.createElement("div");
|
|
36
|
-
div.className = "aj-image-large-view";
|
|
37
|
-
div.innerHTML = "<img />";
|
|
38
|
-
|
|
39
|
-
document.body.appendChild(div);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
this.$el.addEventListener("mousemove", throttle(e => {
|
|
43
|
-
if (this.imgUrl) {
|
|
44
|
-
let w = 0, imgWidth = div.querySelector("img").clientWidth;
|
|
45
|
-
|
|
46
|
-
if (imgWidth > e.pageX)
|
|
47
|
-
w = imgWidth;
|
|
48
|
-
|
|
49
|
-
div.style.top = e.pageY + 20 + "px";
|
|
50
|
-
div.style.left = e.pageX - div.clientWidth + w + "px";
|
|
51
|
-
}
|
|
52
|
-
}, 50, 5000), false);
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
/**
|
|
57
|
-
* 函数节流
|
|
58
|
-
*
|
|
59
|
-
* @author https://www.cnblogs.com/moqiutao/p/6875955.html
|
|
60
|
-
* @param fn
|
|
61
|
-
* @param delay
|
|
62
|
-
* @param mustRunDelay
|
|
63
|
-
*/
|
|
64
|
-
function throttle(fn, delay, mustRunDelay) {
|
|
65
|
-
var timer, t_start;
|
|
66
|
-
return function () {
|
|
67
|
-
var _this = this;
|
|
68
|
-
var t_curr = +new Date();
|
|
69
|
-
window.clearTimeout(timer);
|
|
70
|
-
|
|
71
|
-
if (!t_start)
|
|
72
|
-
t_start = t_curr;
|
|
73
|
-
|
|
74
|
-
if (t_curr - t_start >= mustRunDelay) {
|
|
75
|
-
// @ts-ignore
|
|
76
|
-
fn.apply(this, arguments);
|
|
77
|
-
t_start = t_curr;
|
|
78
|
-
} else {
|
|
79
|
-
var args = arguments;
|
|
80
|
-
// @ts-ignore
|
|
81
|
-
timer = window.setTimeout(function () {
|
|
82
|
-
return fn.apply(_this, args);
|
|
83
|
-
}, delay);
|
|
84
|
-
}
|
|
85
|
-
};
|
|
86
|
-
}
|
|
87
|
-
</script>
|
|
88
|
-
|
|
89
|
-
<style lang="less">
|
|
90
|
-
.aj-img-thumb img {
|
|
91
|
-
max-width: 50px;
|
|
92
|
-
max-height: 60px;
|
|
93
|
-
vertical-align: middle;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.aj-image-large-view {
|
|
97
|
-
position: fixed;
|
|
98
|
-
max-width: 400px;
|
|
99
|
-
transition: top ease-in 200ms, left ease-in 200ms;
|
|
100
|
-
|
|
101
|
-
img {
|
|
102
|
-
width: 100%;
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
</style>
|
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<ul class="aj-opacity-banner">
|
|
3
|
-
<slot></slot>
|
|
4
|
-
</ul>
|
|
5
|
-
</template>
|
|
6
|
-
|
|
7
|
-
<script lang="ts">
|
|
8
|
-
/**
|
|
9
|
-
* 渐显 banner
|
|
10
|
-
* 注意:定时器保存在 DOM 元素的属性上,是否会内存泄漏呢?
|
|
11
|
-
*/
|
|
12
|
-
export default {
|
|
13
|
-
props: {
|
|
14
|
-
delay: { default: 3000 }, // 延时
|
|
15
|
-
fps: { default: 25 }, // 帧速
|
|
16
|
-
},
|
|
17
|
-
data(): any {
|
|
18
|
-
return {
|
|
19
|
-
active: 0, // 当前索引
|
|
20
|
-
};
|
|
21
|
-
},
|
|
22
|
-
mounted(): void {
|
|
23
|
-
this.list = this.$el.querySelectorAll("li"); // 各帧
|
|
24
|
-
this.list[0].style.opacity = "1";
|
|
25
|
-
this.run();
|
|
26
|
-
},
|
|
27
|
-
methods: {
|
|
28
|
-
/**
|
|
29
|
-
* 播放动画
|
|
30
|
-
*
|
|
31
|
-
* @param this
|
|
32
|
-
*/
|
|
33
|
-
run(): void {
|
|
34
|
-
this.timer = window.setInterval(() => {
|
|
35
|
-
let active: number = this.active;
|
|
36
|
-
this.clear();
|
|
37
|
-
active += 1;
|
|
38
|
-
this.active = active % this.list.length;
|
|
39
|
-
this.animate(100);
|
|
40
|
-
}, this.delay);
|
|
41
|
-
},
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* 下一帧
|
|
45
|
-
*
|
|
46
|
-
* @param this
|
|
47
|
-
*/
|
|
48
|
-
per(): void {
|
|
49
|
-
let active: number = this.active;
|
|
50
|
-
this.clear();
|
|
51
|
-
active -= 1;
|
|
52
|
-
active = active % this.list.length;
|
|
53
|
-
|
|
54
|
-
if (active < 0) active = this.list.length - 1;
|
|
55
|
-
|
|
56
|
-
this.active = active;
|
|
57
|
-
this.animate(100);
|
|
58
|
-
},
|
|
59
|
-
|
|
60
|
-
/**
|
|
61
|
-
* 内容淡出
|
|
62
|
-
*/
|
|
63
|
-
clear(): void {
|
|
64
|
-
this.animate(0);
|
|
65
|
-
},
|
|
66
|
-
|
|
67
|
-
/**
|
|
68
|
-
*
|
|
69
|
-
* @param params
|
|
70
|
-
*/
|
|
71
|
-
animate(params: number): void {
|
|
72
|
-
var el: HTMLLIElement = this.list[this.active],
|
|
73
|
-
fps: number = 1000 / this.fps;
|
|
74
|
-
// @ts-ignore
|
|
75
|
-
window.clearTimeout(el.timer);
|
|
76
|
-
|
|
77
|
-
window.setTimeout(function loop() {
|
|
78
|
-
var i: number = getOpacity(el);
|
|
79
|
-
let speed: number = (params - i) / 8;
|
|
80
|
-
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
|
|
81
|
-
// console.log("i=" + i + "; speed="+ speed+"; s="+s+"; k="+k);
|
|
82
|
-
i += speed;
|
|
83
|
-
el.style.opacity = String(i / 100);
|
|
84
|
-
// @ts-ignore
|
|
85
|
-
window.clearTimeout(el.timer);
|
|
86
|
-
// params.complete && params.complete.call(elem);
|
|
87
|
-
// @ts-ignore
|
|
88
|
-
el.timer = window.setTimeout(loop, fps);
|
|
89
|
-
}, fps);
|
|
90
|
-
},
|
|
91
|
-
},
|
|
92
|
-
};
|
|
93
|
-
|
|
94
|
-
/**
|
|
95
|
-
* 获取元素的透明度
|
|
96
|
-
*
|
|
97
|
-
* @param el
|
|
98
|
-
*/
|
|
99
|
-
function getOpacity(el: Element): number {
|
|
100
|
-
let v = Number(getComputedStyle(el)["opacity"]);
|
|
101
|
-
v *= 100;
|
|
102
|
-
|
|
103
|
-
return parseFloat(v + "") || 0;
|
|
104
|
-
}
|
|
105
|
-
</script>
|
|
106
|
-
|
|
107
|
-
<style lang="less" scoped>
|
|
108
|
-
.aj-opacity-banner {
|
|
109
|
-
position: relative;
|
|
110
|
-
min-height: 90px;
|
|
111
|
-
|
|
112
|
-
li {
|
|
113
|
-
position: absolute;
|
|
114
|
-
top: 0;
|
|
115
|
-
left: 0;
|
|
116
|
-
opacity: 0;
|
|
117
|
-
width: 100%;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
img {
|
|
121
|
-
// border-top:solid 20px #00416d;
|
|
122
|
-
width: 100%;
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
</style>
|
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="aj-process-line">
|
|
3
|
-
<div class="process-line">
|
|
4
|
-
<div v-for="(item, index) in items" :key="index" :class="{current: index == current, done: index < current}">
|
|
5
|
-
<span>{{index + 1}}</span>
|
|
6
|
-
<p>{{item}}</p>
|
|
7
|
-
</div>
|
|
8
|
-
</div>
|
|
9
|
-
</div>
|
|
10
|
-
</template>
|
|
11
|
-
|
|
12
|
-
<script lang="ts">
|
|
13
|
-
/**
|
|
14
|
-
* 进度条
|
|
15
|
-
*/
|
|
16
|
-
export default {
|
|
17
|
-
props: {
|
|
18
|
-
items: {
|
|
19
|
-
type: Array,
|
|
20
|
-
default(): string[] {
|
|
21
|
-
return ["Step 1", "Step 2", "Step 3"];
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
|
-
},
|
|
25
|
-
data():any {
|
|
26
|
-
return {
|
|
27
|
-
current: 0,
|
|
28
|
-
};
|
|
29
|
-
},
|
|
30
|
-
methods: {
|
|
31
|
-
/**
|
|
32
|
-
*
|
|
33
|
-
* @param i
|
|
34
|
-
*/
|
|
35
|
-
go(i: number): void {
|
|
36
|
-
this.current = i;
|
|
37
|
-
},
|
|
38
|
-
|
|
39
|
-
/**
|
|
40
|
-
*
|
|
41
|
-
*/
|
|
42
|
-
perv(): void {
|
|
43
|
-
let perv: number = this.current - 1;
|
|
44
|
-
if (perv < 0) perv = this.items.length - 1;
|
|
45
|
-
|
|
46
|
-
this.go(perv);
|
|
47
|
-
},
|
|
48
|
-
|
|
49
|
-
/**
|
|
50
|
-
*
|
|
51
|
-
*/
|
|
52
|
-
next(): void {
|
|
53
|
-
let next: number = this.current + 1;
|
|
54
|
-
if (this.items.length == next) next = 0; // 循环
|
|
55
|
-
|
|
56
|
-
this.go(next);
|
|
57
|
-
},
|
|
58
|
-
},
|
|
59
|
-
};
|
|
60
|
-
</script>
|
|
61
|
-
|
|
62
|
-
<style lang="less" scoped>
|
|
63
|
-
.aj-process-line {
|
|
64
|
-
display: flex;
|
|
65
|
-
padding: 5%;
|
|
66
|
-
justify-content: center;
|
|
67
|
-
|
|
68
|
-
.process-line {
|
|
69
|
-
font-size: 18px;
|
|
70
|
-
color: lightgray;
|
|
71
|
-
font-weight: bold;
|
|
72
|
-
|
|
73
|
-
& > div {
|
|
74
|
-
float: left;
|
|
75
|
-
width: 156px;
|
|
76
|
-
text-align: center;
|
|
77
|
-
position: relative;
|
|
78
|
-
|
|
79
|
-
&.current {
|
|
80
|
-
color: black;
|
|
81
|
-
|
|
82
|
-
span {
|
|
83
|
-
background-color: gray;
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
&.done {
|
|
88
|
-
// color: lighten(@mainColor, 80%);
|
|
89
|
-
span {
|
|
90
|
-
// background-color: lighten(@mainColor, 50%);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
&::after {
|
|
94
|
-
// background-color: lighten(@mainColor, 50%);
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
p {
|
|
99
|
-
font-size: 1rem;
|
|
100
|
-
letter-spacing: 3px;
|
|
101
|
-
padding-top: 5%;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
span {
|
|
105
|
-
display: inline-block;
|
|
106
|
-
width: 32px;
|
|
107
|
-
height: 32px;
|
|
108
|
-
border-radius: 50%;
|
|
109
|
-
color: #fff;
|
|
110
|
-
line-height: 32px;
|
|
111
|
-
font-size: 16px;
|
|
112
|
-
background-color: lightgray;
|
|
113
|
-
position: relative;
|
|
114
|
-
z-index: 1;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
&:last-child::after {
|
|
118
|
-
display: none;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
&::after {
|
|
122
|
-
content: "";
|
|
123
|
-
position: absolute;
|
|
124
|
-
top: 14px;
|
|
125
|
-
left: 94px;
|
|
126
|
-
width: 124px;
|
|
127
|
-
height: 4px;
|
|
128
|
-
background-color: lightgray;
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
</style>
|
package/dist/widget/Resize.d.ts
DELETED
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
declare const _default: {
|
|
2
|
-
data(): {
|
|
3
|
-
styleWidth: number;
|
|
4
|
-
styleHeight: number;
|
|
5
|
-
styleLeft: number;
|
|
6
|
-
styleTop: number;
|
|
7
|
-
sideLeft: number;
|
|
8
|
-
sideRight: number;
|
|
9
|
-
sideUp: number;
|
|
10
|
-
sideDown: number;
|
|
11
|
-
fixLeft: number;
|
|
12
|
-
fixTop: number;
|
|
13
|
-
fn: any;
|
|
14
|
-
LockX: boolean;
|
|
15
|
-
LockY: boolean;
|
|
16
|
-
Lock: boolean;
|
|
17
|
-
scale: {
|
|
18
|
-
enable: boolean;
|
|
19
|
-
ratio: number;
|
|
20
|
-
left: number;
|
|
21
|
-
top: number;
|
|
22
|
-
};
|
|
23
|
-
min: {
|
|
24
|
-
enable: boolean;
|
|
25
|
-
height: number;
|
|
26
|
-
width: number;
|
|
27
|
-
};
|
|
28
|
-
max: {
|
|
29
|
-
enable: boolean;
|
|
30
|
-
height: number;
|
|
31
|
-
width: number;
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
|
-
methods: {
|
|
35
|
-
/**
|
|
36
|
-
* 准备拖动
|
|
37
|
-
*/
|
|
38
|
-
start(e: MouseEvent, fn: Function): void;
|
|
39
|
-
resize(e: MouseEvent): void;
|
|
40
|
-
stop(): void;
|
|
41
|
-
up(e: MouseEvent): void;
|
|
42
|
-
down(e: MouseEvent): void;
|
|
43
|
-
right(e: MouseEvent): void;
|
|
44
|
-
left(e: MouseEvent): void;
|
|
45
|
-
rightDown(e: MouseEvent): void;
|
|
46
|
-
rightUp(e: MouseEvent): void;
|
|
47
|
-
leftDown(e: MouseEvent): void;
|
|
48
|
-
leftUp(e: MouseEvent): void;
|
|
49
|
-
};
|
|
50
|
-
};
|
|
51
|
-
export default _default;
|