vue-editify 0.0.51 → 0.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/examples/App.vue +25 -5594
- package/lib/editify.es.js +6859 -7821
- package/lib/editify.umd.js +1 -1
- package/lib/style.css +1 -1
- package/package.json +2 -2
- package/src/Editify.vue +273 -1255
- package/src/components/{bussiness/Menu.vue → Menu.vue} +235 -142
- package/src/components/{bussiness/Toolbar.vue → Toolbar.vue} +227 -141
- package/src/components/base/Button.vue +6 -6
- package/src/components/base/Checkbox.vue +4 -4
- package/src/components/base/Layer.vue +12 -12
- package/src/components/{bussiness → common}/InsertImage.vue +7 -7
- package/src/components/{bussiness → common}/InsertVideo.vue +7 -7
- package/src/core/function.js +1044 -0
- package/src/core/rule.js +239 -0
- package/src/core/{index.js → tool.js} +62 -291
- package/src/index.js +1 -1
- /package/src/components/{bussiness → common}/Colors.vue +0 -0
- /package/src/components/{bussiness → common}/InsertLink.vue +0 -0
- /package/src/components/{bussiness → common}/InsertTable.vue +0 -0
@@ -31,7 +31,7 @@
|
|
31
31
|
import Tooltip from './Tooltip'
|
32
32
|
import Layer from './Layer'
|
33
33
|
import Icon from './Icon'
|
34
|
-
import
|
34
|
+
import { common as DapCommon, color as DapColor } from 'dap-util'
|
35
35
|
export default {
|
36
36
|
name: 'Button',
|
37
37
|
emits: ['operate', 'layerShow', 'layerShown', 'layerHidden'],
|
@@ -131,10 +131,10 @@ export default {
|
|
131
131
|
let options = []
|
132
132
|
let width = ''
|
133
133
|
let maxHeight = ''
|
134
|
-
if (
|
134
|
+
if (DapCommon.isObject(this.selectConfig)) {
|
135
135
|
if (Array.isArray(this.selectConfig.options)) {
|
136
136
|
options = this.selectConfig.options.map(item => {
|
137
|
-
if (
|
137
|
+
if (DapCommon.isObject(item)) {
|
138
138
|
return {
|
139
139
|
label: item.label,
|
140
140
|
value: item.value,
|
@@ -167,13 +167,13 @@ export default {
|
|
167
167
|
let width = ''
|
168
168
|
let maxHeight = ''
|
169
169
|
let value = ''
|
170
|
-
if (
|
170
|
+
if (DapCommon.isObject(this.displayConfig)) {
|
171
171
|
if (typeof this.displayConfig.value == 'string' || typeof this.displayConfig.value == 'number') {
|
172
172
|
value = this.displayConfig.value
|
173
173
|
}
|
174
174
|
if (Array.isArray(this.displayConfig.options)) {
|
175
175
|
options = this.displayConfig.options.map(item => {
|
176
|
-
if (
|
176
|
+
if (DapCommon.isObject(item)) {
|
177
177
|
return {
|
178
178
|
label: item.label,
|
179
179
|
value: item.value,
|
@@ -209,7 +209,7 @@ export default {
|
|
209
209
|
},
|
210
210
|
//十六进制颜色转换的rgb颜色数组
|
211
211
|
parseColor() {
|
212
|
-
return
|
212
|
+
return DapColor.hex2rgb(this.color)
|
213
213
|
},
|
214
214
|
//按钮样式
|
215
215
|
btnStyle() {
|
@@ -10,7 +10,7 @@
|
|
10
10
|
</template>
|
11
11
|
|
12
12
|
<script>
|
13
|
-
import
|
13
|
+
import { common as DapCommon } from 'dap-util'
|
14
14
|
import Icon from './Icon'
|
15
15
|
export default {
|
16
16
|
name: 'Checkbox',
|
@@ -54,7 +54,7 @@ export default {
|
|
54
54
|
type: String,
|
55
55
|
default: '',
|
56
56
|
validator(value) {
|
57
|
-
return
|
57
|
+
return DapCommon.matchingText(value, 'hex')
|
58
58
|
}
|
59
59
|
}
|
60
60
|
},
|
@@ -66,7 +66,7 @@ export default {
|
|
66
66
|
if (Array.isArray(this.modelValue)) {
|
67
67
|
//数组中是否已包含此复选框的值
|
68
68
|
return this.modelValue.some(item => {
|
69
|
-
return
|
69
|
+
return DapCommon.equal(item, this.value)
|
70
70
|
})
|
71
71
|
}
|
72
72
|
return false
|
@@ -94,7 +94,7 @@ export default {
|
|
94
94
|
//取消且包含
|
95
95
|
else if (this.check) {
|
96
96
|
arr = arr.filter(item => {
|
97
|
-
return !
|
97
|
+
return !DapCommon.equal(item, this.value)
|
98
98
|
})
|
99
99
|
}
|
100
100
|
this.$emit('update:modelValue', arr)
|
@@ -10,7 +10,7 @@
|
|
10
10
|
</template>
|
11
11
|
<script>
|
12
12
|
import { getCurrentInstance } from 'vue'
|
13
|
-
import
|
13
|
+
import { element as DapElement, event as DapEvent } from 'dap-util'
|
14
14
|
import Triangle from './Triangle'
|
15
15
|
export default {
|
16
16
|
name: 'Layer',
|
@@ -123,8 +123,8 @@ export default {
|
|
123
123
|
if (this.modelValue) {
|
124
124
|
this.setPosition()
|
125
125
|
}
|
126
|
-
|
127
|
-
|
126
|
+
DapEvent.on(window, `click.editify_layer_${this.uid}`, this.handleClick)
|
127
|
+
DapEvent.on(window, `resize.editify_layer_${this.uid}`, this.handleResize)
|
128
128
|
},
|
129
129
|
methods: {
|
130
130
|
//显示时
|
@@ -148,10 +148,10 @@ export default {
|
|
148
148
|
},
|
149
149
|
//点击定位父元素外的元素关闭浮层
|
150
150
|
handleClick(e) {
|
151
|
-
if (!
|
151
|
+
if (!DapElement.isElement(this.$el)) {
|
152
152
|
return
|
153
153
|
}
|
154
|
-
if (
|
154
|
+
if (DapElement.isContains(this.$el.offsetParent, e.target)) {
|
155
155
|
return
|
156
156
|
}
|
157
157
|
if (this.modelValue) {
|
@@ -211,7 +211,7 @@ export default {
|
|
211
211
|
//根据node设置三角形位置
|
212
212
|
setTrianglePositionByNode() {
|
213
213
|
const node = this.getNode()
|
214
|
-
if (!
|
214
|
+
if (!DapElement.isElement(node)) {
|
215
215
|
return
|
216
216
|
}
|
217
217
|
if (this.realPlacement == 'top') {
|
@@ -265,7 +265,7 @@ export default {
|
|
265
265
|
//range的最后一个位置
|
266
266
|
const lastRect = rects[rects.length - 1]
|
267
267
|
//定位父元素的位置
|
268
|
-
const parentRect =
|
268
|
+
const parentRect = DapElement.getElementBounding(this.$el.offsetParent)
|
269
269
|
//可视窗口高度
|
270
270
|
const documentHeight = document.documentElement.clientHeight || window.innerHeight
|
271
271
|
//可视窗口宽度
|
@@ -482,15 +482,15 @@ export default {
|
|
482
482
|
//根据node设置位置
|
483
483
|
setPositionByNode() {
|
484
484
|
const node = this.getNode()
|
485
|
-
if (!
|
485
|
+
if (!DapElement.isElement(node)) {
|
486
486
|
return
|
487
487
|
}
|
488
488
|
//重置
|
489
489
|
this.realPlacement = null
|
490
490
|
//关联元素位置
|
491
|
-
const nodeRect =
|
491
|
+
const nodeRect = DapElement.getElementBounding(node)
|
492
492
|
//定位父元素位置
|
493
|
-
const parentRect =
|
493
|
+
const parentRect = DapElement.getElementBounding(this.$el.offsetParent)
|
494
494
|
//设置真实的位置
|
495
495
|
if (this.placement == 'top' || this.placement == 'top-start' || this.placement == 'top-end') {
|
496
496
|
if (nodeRect.top >= 0 && nodeRect.top >= parentRect.top && nodeRect.top >= this.$el.offsetHeight) {
|
@@ -648,14 +648,14 @@ export default {
|
|
648
648
|
if (!this.node) {
|
649
649
|
return null
|
650
650
|
}
|
651
|
-
if (
|
651
|
+
if (DapElement.isElement(this.node)) {
|
652
652
|
return this.node
|
653
653
|
}
|
654
654
|
return document.body.querySelector(this.node)
|
655
655
|
}
|
656
656
|
},
|
657
657
|
beforeUnmount() {
|
658
|
-
|
658
|
+
DapEvent.off(window, `click.editify_layer_${this.uid} resize.editify_layer_${this.uid}`)
|
659
659
|
}
|
660
660
|
}
|
661
661
|
</script>
|
@@ -20,7 +20,7 @@
|
|
20
20
|
</div>
|
21
21
|
</template>
|
22
22
|
<script>
|
23
|
-
import
|
23
|
+
import { file as DapFile } from 'dap-util'
|
24
24
|
import Icon from '../base/Icon'
|
25
25
|
export default {
|
26
26
|
name: 'InsertImage',
|
@@ -133,21 +133,21 @@ export default {
|
|
133
133
|
}
|
134
134
|
//有文件可上传
|
135
135
|
if (filterFiles.length) {
|
136
|
+
let images = []
|
136
137
|
//自定义上传方法
|
137
138
|
if (typeof this.customUpload == 'function') {
|
138
|
-
this.customUpload.apply(this, [filterFiles])
|
139
|
+
images = (await this.customUpload.apply(this, [filterFiles])) || []
|
139
140
|
}
|
140
141
|
//默认上传方法
|
141
142
|
else {
|
142
|
-
let images = []
|
143
143
|
for (let i = 0; i < filterFiles.length; i++) {
|
144
|
-
const url = await
|
144
|
+
const url = await DapFile.dataFileToBase64(filterFiles[i])
|
145
145
|
images.push(url)
|
146
146
|
}
|
147
|
-
images.forEach(url => {
|
148
|
-
this.$emit('insert', url)
|
149
|
-
})
|
150
147
|
}
|
148
|
+
images.forEach(url => {
|
149
|
+
this.$emit('insert', url)
|
150
|
+
})
|
151
151
|
}
|
152
152
|
//清空文件选择框
|
153
153
|
inputEle.value = ''
|
@@ -20,7 +20,7 @@
|
|
20
20
|
</div>
|
21
21
|
</template>
|
22
22
|
<script>
|
23
|
-
import
|
23
|
+
import { file as DapFile } from 'dap-util'
|
24
24
|
import Icon from '../base/Icon'
|
25
25
|
export default {
|
26
26
|
name: 'InsertVideo',
|
@@ -133,21 +133,21 @@ export default {
|
|
133
133
|
}
|
134
134
|
//有文件可上传
|
135
135
|
if (filterFiles.length) {
|
136
|
+
let videos = []
|
136
137
|
//自定义上传方法
|
137
138
|
if (typeof this.customUpload == 'function') {
|
138
|
-
this.customUpload.apply(this, [filterFiles])
|
139
|
+
videos = (await this.customUpload.apply(this, [filterFiles])) || []
|
139
140
|
}
|
140
141
|
//默认上传方法
|
141
142
|
else {
|
142
|
-
let videos = []
|
143
143
|
for (let i = 0; i < filterFiles.length; i++) {
|
144
|
-
const url = await
|
144
|
+
const url = await DapFile.dataFileToBase64(filterFiles[i])
|
145
145
|
videos.push(url)
|
146
146
|
}
|
147
|
-
videos.forEach(url => {
|
148
|
-
this.$emit('insert', url)
|
149
|
-
})
|
150
147
|
}
|
148
|
+
videos.forEach(url => {
|
149
|
+
this.$emit('insert', url)
|
150
|
+
})
|
151
151
|
}
|
152
152
|
//清空文件选择框
|
153
153
|
inputEle.value = ''
|