@ajaxjs/ui 1.1.0 → 1.1.1
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/dist/components/form/FileUploader/FileUploader.js +104 -0
- package/dist/components/form/FileUploader/FileUploader.js.map +1 -0
- package/dist/components/form/FileUploader/FileUploader.less +55 -0
- package/dist/components/form/FileUploader/FileUploader.ts +121 -0
- package/dist/components/form/FileUploader/FileUploader.vue +26 -0
- package/dist/components/form/HtmlEditor/HtmlEditor.js +8 -4
- package/dist/components/form/HtmlEditor/HtmlEditor.js.map +1 -1
- package/dist/components/form/HtmlEditor/HtmlEditor.less +185 -5
- package/dist/components/form/HtmlEditor/HtmlEditor.ts +8 -4
- package/dist/components/form/HtmlEditor/HtmlEditor.vue +19 -19
- package/dist/components/widgets/ImageEnlarger.vue +77 -20
- package/package.json +4 -11
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
props: {
|
|
3
|
+
action: { type: String, required: true },
|
|
4
|
+
limitSize: { type: Number, default: 20000 },
|
|
5
|
+
limitFileType: String,
|
|
6
|
+
accpectFileType: String,
|
|
7
|
+
buttonBottom: Boolean,
|
|
8
|
+
radomId: {
|
|
9
|
+
type: Number, default() {
|
|
10
|
+
return Math.round(Math.random() * 1000);
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
},
|
|
14
|
+
data() {
|
|
15
|
+
return {
|
|
16
|
+
model: { children: [] },
|
|
17
|
+
open: false,
|
|
18
|
+
allowAddNode: false,
|
|
19
|
+
// isFolder : false
|
|
20
|
+
fileName: '',
|
|
21
|
+
fileSize: 0,
|
|
22
|
+
progress: 0,
|
|
23
|
+
errMsg: '',
|
|
24
|
+
newlyId: '' // 成功上传之后的文件 id
|
|
25
|
+
};
|
|
26
|
+
},
|
|
27
|
+
methods: {
|
|
28
|
+
/**
|
|
29
|
+
* 选择文件后触发的事件
|
|
30
|
+
*
|
|
31
|
+
* @param ev
|
|
32
|
+
*/
|
|
33
|
+
onUploadInputChange(ev) {
|
|
34
|
+
let fileInput = ev.target;
|
|
35
|
+
if (!fileInput.files || !fileInput.files[0])
|
|
36
|
+
return;
|
|
37
|
+
// this.errStatus = [false, false, false];
|
|
38
|
+
this.onFileGet(fileInput.files);
|
|
39
|
+
},
|
|
40
|
+
onDrop(ev) {
|
|
41
|
+
ev.preventDefault(); // 阻止进行拖拽时浏览器的默认行为，即自动打开图片
|
|
42
|
+
if (ev.dataTransfer?.files)
|
|
43
|
+
this.onFileGet(ev.dataTransfer.files);
|
|
44
|
+
},
|
|
45
|
+
onFileGet(files) {
|
|
46
|
+
let file = files[0], fileType = file.type;
|
|
47
|
+
this.$fileObj = file;
|
|
48
|
+
this.fileName = file.name;
|
|
49
|
+
this.fileSize = file.size;
|
|
50
|
+
},
|
|
51
|
+
/**
|
|
52
|
+
* 执行上传
|
|
53
|
+
*
|
|
54
|
+
* @param this
|
|
55
|
+
*/
|
|
56
|
+
doUpload() {
|
|
57
|
+
// this.$uploadOk_callback({ isOk: true, msg: "ok!", imgUrl: "fdfdf" });
|
|
58
|
+
// return;
|
|
59
|
+
let fd = new FormData();
|
|
60
|
+
if (this.$blob)
|
|
61
|
+
fd.append("file", this.$blob, this.fileName);
|
|
62
|
+
else if (this.$fileObj)
|
|
63
|
+
fd.append("file", this.$fileObj);
|
|
64
|
+
let xhr = new XMLHttpRequest();
|
|
65
|
+
//@ts-ignore
|
|
66
|
+
xhr.onreadystatechange = aj.xhr.requestHandler.delegate(null, this.$uploadOk_callback, "json");
|
|
67
|
+
xhr.open("POST", this.action, true);
|
|
68
|
+
xhr.onprogress = (ev) => {
|
|
69
|
+
let progress = 0, p = ~~((ev.loaded * 1000) / ev.total);
|
|
70
|
+
p = p / 10;
|
|
71
|
+
if (progress !== p)
|
|
72
|
+
progress = p;
|
|
73
|
+
this.progress = progress;
|
|
74
|
+
};
|
|
75
|
+
xhr.send(fd);
|
|
76
|
+
},
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
/**
|
|
80
|
+
* 字节 Byte 转化成 KB，MB，GB
|
|
81
|
+
*
|
|
82
|
+
* @param limit
|
|
83
|
+
*/
|
|
84
|
+
function changeByte(limit) {
|
|
85
|
+
let size = "";
|
|
86
|
+
if (limit < 0.1 * 1024)
|
|
87
|
+
// 小于 0.1KB，则转化成 B
|
|
88
|
+
size = limit.toFixed(2) + "B";
|
|
89
|
+
else if (limit < 0.1 * 1024 * 1024)
|
|
90
|
+
// 小于 0.1MB，则转化成 KB
|
|
91
|
+
size = (limit / 1024).toFixed(2) + "KB";
|
|
92
|
+
else if (limit < 0.1 * 1024 * 1024 * 1024)
|
|
93
|
+
// 小于 0.1GB，则转化成 MB
|
|
94
|
+
size = (limit / (1024 * 1024)).toFixed(2) + "MB";
|
|
95
|
+
// 其他转化成 GB
|
|
96
|
+
else
|
|
97
|
+
size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB";
|
|
98
|
+
let index = size.indexOf("."); // 获取小数点处的索引
|
|
99
|
+
if (size.substr(index + 1, 2) == "00")
|
|
100
|
+
// 获取小数点后两位的值，判断后两位是否为 00，如果是则删除 00
|
|
101
|
+
return size.substring(0, index) + size.substr(index + 3, 2);
|
|
102
|
+
return size;
|
|
103
|
+
}
|
|
104
|
+
//# sourceMappingURL=FileUploader.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileUploader.js","sourceRoot":"","sources":["../../../../src/components/form/FileUploader/FileUploader.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
.aj-file-uploader {
|
|
2
|
+
width: 300px;
|
|
3
|
+
|
|
4
|
+
&>* {
|
|
5
|
+
display: inline-block;
|
|
6
|
+
vertical-align: middle;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
label {
|
|
10
|
+
margin-right: 2%;
|
|
11
|
+
|
|
12
|
+
&>div {
|
|
13
|
+
border: 1px solid lightgray;
|
|
14
|
+
border-radius: 5px;
|
|
15
|
+
text-align: center;
|
|
16
|
+
color: gray;
|
|
17
|
+
cursor: pointer;
|
|
18
|
+
font-size: 0.8rem;
|
|
19
|
+
padding: 10px;
|
|
20
|
+
padding-bottom: 25px;
|
|
21
|
+
width: 100px;
|
|
22
|
+
height: 70px;
|
|
23
|
+
transition: border-color linear 300ms, color linear 300ms;
|
|
24
|
+
|
|
25
|
+
&:hover {
|
|
26
|
+
border-color: gray;
|
|
27
|
+
color: black;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&>div {
|
|
31
|
+
font-size: 2rem;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
button {
|
|
37
|
+
min-width: 110px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
input[type="file"] {
|
|
41
|
+
display: none;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.msg {
|
|
45
|
+
font-size: 0.8rem;
|
|
46
|
+
color: gray;
|
|
47
|
+
max-width: 50%;
|
|
48
|
+
word-break: break-word;
|
|
49
|
+
text-overflow: ellipsis;
|
|
50
|
+
|
|
51
|
+
&>div {
|
|
52
|
+
font-size: 0.75rem;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
props: {
|
|
3
|
+
action: { type: String, required: true }, // 上传路径
|
|
4
|
+
limitSize: { type: Number, default: 20000 }, // 文件大小限制
|
|
5
|
+
limitFileType: String,
|
|
6
|
+
accpectFileType: String, // 可以上传类型
|
|
7
|
+
buttonBottom: Boolean, // 上传按钮是否位于下方
|
|
8
|
+
radomId: {
|
|
9
|
+
type: Number, default() { // 不重复的 id，用关于关联 label 与 input[type=file]
|
|
10
|
+
return Math.round(Math.random() * 1000);
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
},
|
|
14
|
+
|
|
15
|
+
data() {
|
|
16
|
+
return {
|
|
17
|
+
model: { children: [] },
|
|
18
|
+
open: false,
|
|
19
|
+
allowAddNode: false,
|
|
20
|
+
// isFolder : false
|
|
21
|
+
fileName: '', // 获取文件名称，只能是名称，不能获取完整的文件目录
|
|
22
|
+
fileSize: 0, // 文件大小
|
|
23
|
+
progress: 0, // 上传进度百分比
|
|
24
|
+
errMsg: '', // 错误信息。约定：只有为空字符串，才表示允许上传。
|
|
25
|
+
newlyId: '' // 成功上传之后的文件 id
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
|
|
29
|
+
methods: {
|
|
30
|
+
/**
|
|
31
|
+
* 选择文件后触发的事件
|
|
32
|
+
*
|
|
33
|
+
* @param ev
|
|
34
|
+
*/
|
|
35
|
+
onUploadInputChange(ev: Event): void {
|
|
36
|
+
let fileInput: HTMLInputElement = <HTMLInputElement>ev.target;
|
|
37
|
+
if (!fileInput.files || !fileInput.files[0]) return;
|
|
38
|
+
|
|
39
|
+
// this.errStatus = [false, false, false];
|
|
40
|
+
this.onFileGet(fileInput.files);
|
|
41
|
+
},
|
|
42
|
+
|
|
43
|
+
onDrop(ev: DragEvent): void {
|
|
44
|
+
ev.preventDefault(); // 阻止进行拖拽时浏览器的默认行为，即自动打开图片
|
|
45
|
+
|
|
46
|
+
if (ev.dataTransfer?.files) this.onFileGet(ev.dataTransfer.files);
|
|
47
|
+
},
|
|
48
|
+
|
|
49
|
+
onFileGet(files: FileList): void {
|
|
50
|
+
let file: File = files[0],
|
|
51
|
+
fileType: string = file.type;
|
|
52
|
+
|
|
53
|
+
this.$fileObj = file;
|
|
54
|
+
this.fileName = file.name;
|
|
55
|
+
this.fileSize = file.size;
|
|
56
|
+
},
|
|
57
|
+
/**
|
|
58
|
+
* 执行上传
|
|
59
|
+
*
|
|
60
|
+
* @param this
|
|
61
|
+
*/
|
|
62
|
+
doUpload(): void {
|
|
63
|
+
// this.$uploadOk_callback({ isOk: true, msg: "ok!", imgUrl: "fdfdf" });
|
|
64
|
+
// return;
|
|
65
|
+
|
|
66
|
+
let fd: FormData = new FormData();
|
|
67
|
+
|
|
68
|
+
if (this.$blob) fd.append("file", this.$blob, this.fileName);
|
|
69
|
+
else if (this.$fileObj) fd.append("file", this.$fileObj);
|
|
70
|
+
|
|
71
|
+
let xhr: XMLHttpRequest = new XMLHttpRequest();
|
|
72
|
+
//@ts-ignore
|
|
73
|
+
xhr.onreadystatechange = aj.xhr.requestHandler.delegate(
|
|
74
|
+
null,
|
|
75
|
+
this.$uploadOk_callback,
|
|
76
|
+
"json"
|
|
77
|
+
);
|
|
78
|
+
xhr.open("POST", this.action, true);
|
|
79
|
+
xhr.onprogress = (ev: ProgressEvent) => {
|
|
80
|
+
let progress: number = 0,
|
|
81
|
+
p: number = ~~((ev.loaded * 1000) / ev.total);
|
|
82
|
+
p = p / 10;
|
|
83
|
+
|
|
84
|
+
if (progress !== p) progress = p;
|
|
85
|
+
|
|
86
|
+
this.progress = progress;
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
xhr.send(fd);
|
|
90
|
+
},
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/**
|
|
95
|
+
* 字节 Byte 转化成 KB，MB，GB
|
|
96
|
+
*
|
|
97
|
+
* @param limit
|
|
98
|
+
*/
|
|
99
|
+
function changeByte(limit: number): string {
|
|
100
|
+
let size: string = "";
|
|
101
|
+
|
|
102
|
+
if (limit < 0.1 * 1024)
|
|
103
|
+
// 小于 0.1KB，则转化成 B
|
|
104
|
+
size = limit.toFixed(2) + "B";
|
|
105
|
+
else if (limit < 0.1 * 1024 * 1024)
|
|
106
|
+
// 小于 0.1MB，则转化成 KB
|
|
107
|
+
size = (limit / 1024).toFixed(2) + "KB";
|
|
108
|
+
else if (limit < 0.1 * 1024 * 1024 * 1024)
|
|
109
|
+
// 小于 0.1GB，则转化成 MB
|
|
110
|
+
size = (limit / (1024 * 1024)).toFixed(2) + "MB";
|
|
111
|
+
// 其他转化成 GB
|
|
112
|
+
else size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB";
|
|
113
|
+
|
|
114
|
+
let index = size.indexOf("."); // 获取小数点处的索引
|
|
115
|
+
|
|
116
|
+
if (size.substr(index + 1, 2) == "00")
|
|
117
|
+
// 获取小数点后两位的值，判断后两位是否为 00，如果是则删除 00
|
|
118
|
+
return size.substring(0, index) + size.substr(index + 3, 2);
|
|
119
|
+
|
|
120
|
+
return size;
|
|
121
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="aj-file-uploader">
|
|
3
|
+
<input type="file" :id="'uploadInput_' + radomId" @change="onUploadInputChange" :accept="accpectFileType" />
|
|
4
|
+
|
|
5
|
+
<label class="pseudoFilePicker" :for="'uploadInput_' + radomId">
|
|
6
|
+
<div @drop="onDrop" ondragover="event.preventDefault();">
|
|
7
|
+
<div>+</div>点击选择文件<br />或拖放到此
|
|
8
|
+
</div>
|
|
9
|
+
</label>
|
|
10
|
+
|
|
11
|
+
<div class="msg" v-if="errMsg != ''">
|
|
12
|
+
允许类型：{{limitFileType || '无限制'}}
|
|
13
|
+
<br />
|
|
14
|
+
允许大小：{{limitSize ? changeByte(limitSize * 1024) : '无限制'}}
|
|
15
|
+
<span class="slot"></span>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="msg" v-if="errMsg == ''">
|
|
18
|
+
{{fileName}}<div v-if="fileSize">{{changeByte(fileSize)}}</div>
|
|
19
|
+
<button @click.prevent="doUpload">{{progress && progress !== 100 ? '上传中 ' + progress + '%': '上传'}}</button>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
</template>
|
|
23
|
+
|
|
24
|
+
<script lang="ts" src="./FileUploader.ts"></script>
|
|
25
|
+
|
|
26
|
+
<style lang="less" src="./FileUploader.less"></style>
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
props: {
|
|
3
3
|
vModel: String,
|
|
4
|
-
uploadImageActionUrl: String
|
|
4
|
+
uploadImageActionUrl: String,
|
|
5
|
+
isIonicons: Boolean //是否使用 ionicons 图标
|
|
5
6
|
},
|
|
6
7
|
data() {
|
|
7
8
|
return {
|
|
@@ -41,7 +42,8 @@ export default {
|
|
|
41
42
|
* @param html
|
|
42
43
|
*/
|
|
43
44
|
setIframeBody(html) {
|
|
44
|
-
this.iframeDoc.body
|
|
45
|
+
if (this.iframeDoc && this.iframeDoc.body)
|
|
46
|
+
this.iframeDoc.body.innerHTML = html;
|
|
45
47
|
},
|
|
46
48
|
/**
|
|
47
49
|
* 获取内容的 HTML
|
|
@@ -160,8 +162,10 @@ export default {
|
|
|
160
162
|
}
|
|
161
163
|
},
|
|
162
164
|
watch: {
|
|
163
|
-
vModel(
|
|
164
|
-
|
|
165
|
+
vModel(html) {
|
|
166
|
+
if (!html)
|
|
167
|
+
html = '';
|
|
168
|
+
this.setIframeBody(html);
|
|
165
169
|
},
|
|
166
170
|
/**
|
|
167
171
|
* 切換 HTML 編輯 or 可視化編輯
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HtmlEditor.js","sourceRoot":"","sources":["../../../../src/components/form/HtmlEditor/HtmlEditor.ts"],"names":[],"mappings":"AAAA,eAAe;IACX,KAAK,EAAE;QACH,MAAM,EAAE,MAAM;QACd,oBAAoB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"HtmlEditor.js","sourceRoot":"","sources":["../../../../src/components/form/HtmlEditor/HtmlEditor.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
@import 'https://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css';
|
|
2
|
-
|
|
3
1
|
.aj-form-html-editor {
|
|
4
2
|
ul.toolbar {
|
|
5
3
|
border : 1px solid #C5C5C5;
|
|
@@ -7,7 +5,7 @@
|
|
|
7
5
|
border-bottom : 0;
|
|
8
6
|
background-color: #E8E7E4;
|
|
9
7
|
width : 100%;
|
|
10
|
-
height
|
|
8
|
+
min-height : 30px;
|
|
11
9
|
margin : 0;
|
|
12
10
|
box-sizing : border-box;
|
|
13
11
|
padding : 3px 4px;
|
|
@@ -24,8 +22,15 @@
|
|
|
24
22
|
line-height: 20px;
|
|
25
23
|
text-align : center;
|
|
26
24
|
display : block;
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
|
|
26
|
+
&.text-icon{
|
|
27
|
+
font-family:Times New Roman;font-weight: bold;font-style: normal;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&.fontAwesome{
|
|
31
|
+
padding-top: 2px;
|
|
32
|
+
font : normal normal normal 18px/1 FontAwesome;
|
|
33
|
+
}
|
|
29
34
|
|
|
30
35
|
&:hover {
|
|
31
36
|
border-right-color : #aaa;
|
|
@@ -73,6 +78,181 @@
|
|
|
73
78
|
width : 100%;
|
|
74
79
|
}
|
|
75
80
|
|
|
81
|
+
iframe.hide{
|
|
82
|
+
display: none;
|
|
83
|
+
}
|
|
84
|
+
textarea {
|
|
85
|
+
resize: none;
|
|
86
|
+
display: none;
|
|
87
|
+
&.show{
|
|
88
|
+
display: block;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.colorPicker {
|
|
94
|
+
width : 210px;
|
|
95
|
+
border : 1px solid #D3D3D3;
|
|
96
|
+
position: absolute;
|
|
97
|
+
|
|
98
|
+
table {
|
|
99
|
+
border-collapse: collapse;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.colorhead {
|
|
103
|
+
height : 23px;
|
|
104
|
+
line-height: 23px;
|
|
105
|
+
font-weight: bold;
|
|
106
|
+
width : 100%;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.colortitle {
|
|
110
|
+
margin-left: 6px;
|
|
111
|
+
font-size : 12px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.colorpanel td {
|
|
115
|
+
border : 1px solid #000;
|
|
116
|
+
height : 10px;
|
|
117
|
+
width : 10px;
|
|
118
|
+
overflow : hidden;
|
|
119
|
+
font-size: 1px;
|
|
120
|
+
cursor : pointer;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
// 字体演示
|
|
125
|
+
.fontfamilyChoser,
|
|
126
|
+
.fontsizeChoser {
|
|
127
|
+
a {
|
|
128
|
+
padding-right : 2px;
|
|
129
|
+
display : block;
|
|
130
|
+
padding-left : 2px;
|
|
131
|
+
padding-bottom : 2px;
|
|
132
|
+
color : #000;
|
|
133
|
+
line-height : 120%;
|
|
134
|
+
padding-top : 2px;
|
|
135
|
+
text-decoration: none;
|
|
136
|
+
|
|
137
|
+
&:hover {
|
|
138
|
+
background: #e5e5e5
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
// 登录面板 和忘记密码
|
|
144
|
+
.dorpdown {
|
|
145
|
+
position: relative;
|
|
146
|
+
|
|
147
|
+
&:hover .fontfamilyChoser,
|
|
148
|
+
.fontfamilyChoser:hover,
|
|
149
|
+
&:hover .fontsizeChoser,
|
|
150
|
+
.fontsizeChoser:hover,
|
|
151
|
+
&:hover .colorPicker,
|
|
152
|
+
.colorPicker:hover {
|
|
153
|
+
display: block;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
&>div {
|
|
157
|
+
display : none;
|
|
158
|
+
position : absolute;
|
|
159
|
+
top : 22px;
|
|
160
|
+
left : 0;
|
|
161
|
+
background-color: #f5f5f5;
|
|
162
|
+
border : 1px solid lightgray;
|
|
163
|
+
border-top : 0;
|
|
164
|
+
padding : 5px;
|
|
165
|
+
width : 230px;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.fontsizeChoser {
|
|
169
|
+
top : inherit;
|
|
170
|
+
right: 0;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}.aj-form-html-editor {
|
|
174
|
+
ul.toolbar {
|
|
175
|
+
border : 1px solid #C5C5C5;
|
|
176
|
+
border-radius : 4px 4px 0 0;
|
|
177
|
+
border-bottom : 0;
|
|
178
|
+
background-color: #E8E7E4;
|
|
179
|
+
width : 100%;
|
|
180
|
+
min-height : 30px;
|
|
181
|
+
margin : 0;
|
|
182
|
+
box-sizing : border-box;
|
|
183
|
+
padding : 3px 4px;
|
|
184
|
+
|
|
185
|
+
&>li {
|
|
186
|
+
list-style: none;
|
|
187
|
+
float : left;
|
|
188
|
+
cursor : pointer;
|
|
189
|
+
|
|
190
|
+
&>i {
|
|
191
|
+
border : 1px solid transparent;
|
|
192
|
+
min-width : 25px;
|
|
193
|
+
height : 20px;
|
|
194
|
+
line-height: 20px;
|
|
195
|
+
text-align : center;
|
|
196
|
+
display : block;
|
|
197
|
+
|
|
198
|
+
&.text-icon{
|
|
199
|
+
font-family:Times New Roman;font-weight: bold;font-style: normal;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
&.fontAwesome{
|
|
203
|
+
padding-top: 2px;
|
|
204
|
+
font : normal normal normal 18px/1 FontAwesome;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
&:hover {
|
|
208
|
+
border-right-color : #aaa;
|
|
209
|
+
border-bottom-color: #aaa;
|
|
210
|
+
border-top-color : #fff;
|
|
211
|
+
border-left-color : #fff;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
&:active {
|
|
215
|
+
border-right-color : #f3f8fc;
|
|
216
|
+
border-bottom-color: #f3f8fc;
|
|
217
|
+
border-top-color : #ccc;
|
|
218
|
+
border-left-color : #ccc;
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
ul li {
|
|
223
|
+
padding: 3px;
|
|
224
|
+
cursor : pointer;
|
|
225
|
+
|
|
226
|
+
&:hover {
|
|
227
|
+
background-color: lightgray;
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.cleanHTML {
|
|
232
|
+
background-size: 16px 16px;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.noBg {
|
|
236
|
+
background-image: none;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.editorBody {
|
|
242
|
+
iframe,
|
|
243
|
+
textarea {
|
|
244
|
+
border : 1px solid #C5C5C5;
|
|
245
|
+
border-radius : 0 0 4px 4px;
|
|
246
|
+
border-top-width: 0;
|
|
247
|
+
box-sizing : border-box;
|
|
248
|
+
background-color: white;
|
|
249
|
+
min-height : 300px;
|
|
250
|
+
width : 100%;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
iframe.hide{
|
|
254
|
+
display: none;
|
|
255
|
+
}
|
|
76
256
|
textarea {
|
|
77
257
|
resize: none;
|
|
78
258
|
display: none;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
props: {
|
|
3
3
|
vModel: String,
|
|
4
|
-
uploadImageActionUrl: String
|
|
4
|
+
uploadImageActionUrl: String, // 图片上传路径
|
|
5
|
+
isIonicons: Boolean //是否使用 ionicons 图标
|
|
5
6
|
},
|
|
6
7
|
data(): any {
|
|
7
8
|
return {
|
|
@@ -47,7 +48,8 @@ export default {
|
|
|
47
48
|
* @param html
|
|
48
49
|
*/
|
|
49
50
|
setIframeBody(html: string): void {
|
|
50
|
-
this.iframeDoc.body
|
|
51
|
+
if (this.iframeDoc && this.iframeDoc.body)
|
|
52
|
+
this.iframeDoc.body.innerHTML = html;
|
|
51
53
|
},
|
|
52
54
|
|
|
53
55
|
/**
|
|
@@ -196,8 +198,10 @@ export default {
|
|
|
196
198
|
}
|
|
197
199
|
},
|
|
198
200
|
watch: {
|
|
199
|
-
vModel(
|
|
200
|
-
|
|
201
|
+
vModel(html: string): void {
|
|
202
|
+
if (!html)
|
|
203
|
+
html = '';
|
|
204
|
+
this.setIframeBody(html);
|
|
201
205
|
},
|
|
202
206
|
|
|
203
207
|
/**
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<div class="aj-form-html-editor">
|
|
3
3
|
<ul class="toolbar">
|
|
4
4
|
<li class="dorpdown">
|
|
5
|
-
<i title="字体" class="
|
|
5
|
+
<i title="字体" class="text-icon">A</i>
|
|
6
6
|
<div class="fontfamilyChoser" @click="onFontfamilyChoserClk">
|
|
7
7
|
<a style="font-family: '宋体'">宋体</a>
|
|
8
8
|
<a style="font-family: '黑体'">黑体</a>
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
</div>
|
|
22
22
|
</li>
|
|
23
23
|
<li class="dorpdown">
|
|
24
|
-
<i title="字号" class="
|
|
24
|
+
<i title="字号" class="text-icon">H</i>
|
|
25
25
|
<div class="fontsizeChoser" @click="onFontsizeChoserClk">
|
|
26
26
|
<a style="font-size: xx-small; ">极小</a>
|
|
27
27
|
<a style="font-size: x-small; ">特小</a>
|
|
@@ -32,29 +32,29 @@
|
|
|
32
32
|
<a style="font-size: xx-large; line-height: 140%">极大</a>
|
|
33
33
|
</div>
|
|
34
34
|
</li>
|
|
35
|
-
<li @click="onCmdClk"><i title="加粗" class="bold
|
|
36
|
-
<li @click="onCmdClk"><i title="斜体" class="italic
|
|
37
|
-
<li @click="onCmdClk"><i title="下划线" class="underline
|
|
38
|
-
<li @click="onCmdClk"><i title="左对齐"
|
|
39
|
-
<li @click="onCmdClk"><i title="中间对齐" class="justifycenter fa-align-center"></i></li>
|
|
40
|
-
<li @click="onCmdClk"><i title="右对齐"
|
|
41
|
-
<li @click="onCmdClk"><i title="数字编号" class="insertorderedlist fa-list-ol"></i></li>
|
|
42
|
-
<li @click="onCmdClk"><i title="项目编号" class="insertunorderedlist fa-list-ul"></i></li>
|
|
43
|
-
<li @click="onCmdClk"><i title="增加缩进" class="outdent fa-outdent"></i></li>
|
|
44
|
-
<li @click="onCmdClk"><i title="减少缩进" class="indent fa-indent"></i></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
45
|
<li class="dorpdown">
|
|
46
|
-
<i title="字体颜色" class="fa-paint-brush"></i>
|
|
46
|
+
<i title="字体颜色" :class="isIonicons ? 'ivu-icon ivu-icon-md-brush' : 'fontAwesome fa-paint-brush'"></i>
|
|
47
47
|
<div class="colorPicker" v-html="createColorPickerHTML()" @click="format('foreColor', $event.target.title)"></div>
|
|
48
48
|
</li>
|
|
49
49
|
<li class="dorpdown">
|
|
50
|
-
<i title="背景颜色" class="fa-pencil"></i>
|
|
50
|
+
<i title="背景颜色" :class="isIonicons ? 'ivu-icon ivu-icon-ios-brush-outline' : 'fontAwesome fa-pencil'"></i>
|
|
51
51
|
<div class="colorPicker" v-html="createColorPickerHTML()" @click="format('backColor', $event.target.title)"></div>
|
|
52
52
|
</li>
|
|
53
|
-
<li @click="createLink"><i title="增加链接" class="fa-link"></i></li>
|
|
54
|
-
<li @click="insertImage"><i title="增加图片" class="fa-file-image-o"></i></li>
|
|
55
|
-
<li @click="saveRemoteImage2Local"><i title="一键存图" class="
|
|
56
|
-
<li @click="cleanHTML"><i title="清理 HTML" class="fa-eraser"></i></li>
|
|
57
|
-
<li @click="isShowCode = !isShowCode"><i title="切换到代码" class="
|
|
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-file-image-o'"></i></li>
|
|
55
|
+
<li @click="saveRemoteImage2Local"><i title="一键存图" :class="isIonicons ? 'ivu-icon ivu-icon-md-photos' : 'fontAwesome fa-hdd-o'"></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
58
|
</ul>
|
|
59
59
|
|
|
60
60
|
<div class="editorBody">
|
|
@@ -1,42 +1,99 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<a class="aj-img-thumb" :href="
|
|
3
|
-
<img :src="
|
|
2
|
+
<a class="aj-img-thumb" :href="imgUrl" v-if="imgUrl" target="_blank">
|
|
3
|
+
<img :src="imgUrl" @mouseenter="current = imgUrl" @mouseleave="current = null" />
|
|
4
4
|
</a>
|
|
5
5
|
</template>
|
|
6
6
|
|
|
7
|
-
<script
|
|
7
|
+
<script>
|
|
8
8
|
/**
|
|
9
9
|
* 悬浮显示大图
|
|
10
10
|
*/
|
|
11
11
|
export default {
|
|
12
12
|
props: {
|
|
13
|
-
imgUrl: {
|
|
14
|
-
// 图片地址
|
|
15
|
-
type: String,
|
|
16
|
-
required: true,
|
|
17
|
-
},
|
|
13
|
+
imgUrl: { type: String, required: true },// 图片地址
|
|
18
14
|
},
|
|
19
|
-
computed: {
|
|
20
|
-
getImgUrl(): string {
|
|
21
|
-
if (!this.imgUrl) return "";
|
|
22
15
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
16
|
+
data() {
|
|
17
|
+
return { current: '' }
|
|
18
|
+
},
|
|
19
|
+
watch: {
|
|
20
|
+
current(v) {
|
|
21
|
+
let el = document.querySelector("body > div.aj-image-large-view");
|
|
29
22
|
|
|
30
|
-
|
|
31
|
-
|
|
23
|
+
if (v) {
|
|
24
|
+
el.querySelector('img').src = v;
|
|
25
|
+
setTimeout(() => el.style.display = 'block', 700);
|
|
26
|
+
} else
|
|
27
|
+
el.style.display = 'none';
|
|
28
|
+
}
|
|
32
29
|
},
|
|
30
|
+
mounted() {
|
|
31
|
+
// 初始化
|
|
32
|
+
if (!document.querySelector("body > div.aj-image-large-view")) {
|
|
33
|
+
let div = document.createElement("div");
|
|
34
|
+
div.className = "aj-image-large-view";
|
|
35
|
+
div.innerHTML = "<img />";
|
|
36
|
+
document.body.appendChild(div);
|
|
37
|
+
|
|
38
|
+
document.addEventListener("mousemove", throttle(e => {
|
|
39
|
+
if (this.imgUrl) {
|
|
40
|
+
let w = 0, imgWidth = div.querySelector("img").clientWidth;
|
|
41
|
+
|
|
42
|
+
if (imgWidth > e.pageX)
|
|
43
|
+
w = imgWidth;
|
|
44
|
+
|
|
45
|
+
div.style.top = e.pageY + 20 + "px";
|
|
46
|
+
div.style.left = e.pageX - div.clientWidth + w + "px";
|
|
47
|
+
}
|
|
48
|
+
}, 50, 5000), false);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
33
51
|
};
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* 函数节流
|
|
55
|
+
*
|
|
56
|
+
* @author https://www.cnblogs.com/moqiutao/p/6875955.html
|
|
57
|
+
* @param fn
|
|
58
|
+
* @param delay
|
|
59
|
+
* @param mustRunDelay
|
|
60
|
+
*/
|
|
61
|
+
function throttle(fn, delay, mustRunDelay) {
|
|
62
|
+
var timer, t_start;
|
|
63
|
+
return function () {
|
|
64
|
+
var _this = this;
|
|
65
|
+
var t_curr = +new Date();
|
|
66
|
+
window.clearTimeout(timer);
|
|
67
|
+
if (!t_start) t_start = t_curr;
|
|
68
|
+
if (t_curr - t_start >= mustRunDelay) {
|
|
69
|
+
// @ts-ignore
|
|
70
|
+
fn.apply(this, arguments);
|
|
71
|
+
t_start = t_curr;
|
|
72
|
+
} else {
|
|
73
|
+
var args = arguments;
|
|
74
|
+
// @ts-ignore
|
|
75
|
+
timer = window.setTimeout(function () {
|
|
76
|
+
return fn.apply(_this, args);
|
|
77
|
+
}, delay);
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
}
|
|
34
81
|
</script>
|
|
35
82
|
|
|
36
|
-
<style lang="less"
|
|
83
|
+
<style lang="less">
|
|
37
84
|
.aj-img-thumb img {
|
|
38
85
|
max-width: 50px;
|
|
39
86
|
max-height: 60px;
|
|
40
87
|
vertical-align: middle;
|
|
41
88
|
}
|
|
89
|
+
|
|
90
|
+
.aj-image-large-view {
|
|
91
|
+
position: fixed;
|
|
92
|
+
max-width: 400px;
|
|
93
|
+
transition: top ease-in 200ms, left ease-in 200ms;
|
|
94
|
+
|
|
95
|
+
img {
|
|
96
|
+
width: 100%;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
42
99
|
</style>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ajaxjs/ui",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"private": false,
|
|
@@ -14,22 +14,15 @@
|
|
|
14
14
|
"dist/"
|
|
15
15
|
],
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"
|
|
18
|
-
"vue": "^2.6.11",
|
|
19
|
-
"vue-router": "^3.2.0"
|
|
17
|
+
"vue": "^2.6.11"
|
|
20
18
|
},
|
|
21
|
-
|
|
22
19
|
"devDependencies": {
|
|
23
|
-
"
|
|
24
|
-
"
|
|
20
|
+
"core-js": "^3.6.5",
|
|
21
|
+
"vue-router": "^3.2.0",
|
|
25
22
|
"@vue/cli-plugin-babel": "~4.5.0",
|
|
26
|
-
"@vue/cli-plugin-eslint": "~4.5.0",
|
|
27
23
|
"@vue/cli-plugin-router": "~4.5.0",
|
|
28
24
|
"@vue/cli-plugin-typescript": "~4.5.0",
|
|
29
25
|
"@vue/cli-service": "~4.5.0",
|
|
30
|
-
"@vue/eslint-config-typescript": "^7.0.0",
|
|
31
|
-
"eslint": "^6.7.2",
|
|
32
|
-
"eslint-plugin-vue": "^6.2.2",
|
|
33
26
|
"less": "^3.0.4",
|
|
34
27
|
"less-loader": "^5.0.0",
|
|
35
28
|
"style-resources-loader": "^1.4.1",
|