officialblock 1.0.5 → 1.0.6
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/official-block.cjs.js +62 -62
- package/dist/official-block.es.js +8294 -8265
- package/dist/official-block.umd.js +70 -70
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/ArticleList/article.vue +15 -15
- package/src/components/ArticleList/index.vue +49 -56
- package/src/components/ArticleList/setting.vue +72 -48
- package/src/components/Button/index.vue +18 -2
- package/src/main.ts +0 -1
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
<div class="article-item">
|
|
3
3
|
<h4 class="article-item-title">{{ article.title }}</h4>
|
|
4
4
|
<div class="editor-content" v-html="article.content"></div>
|
|
5
|
-
<div class="article-item-button">
|
|
5
|
+
<div class="article-item-button" v-if="article.buttonList?.length">
|
|
6
6
|
<Button v-for="item in article.buttonList" :key="item.id" :data="item"></Button>
|
|
7
7
|
</div>
|
|
8
|
-
<div class="article-item-link">
|
|
8
|
+
<div class="article-item-link" v-if="article.linkList?.length">
|
|
9
9
|
<Button v-for="item in article.linkList" :key="item.id" :data="item" type="link"></Button>
|
|
10
10
|
</div>
|
|
11
11
|
</div>
|
|
@@ -28,22 +28,22 @@ defineProps({
|
|
|
28
28
|
--max-width: 952px;
|
|
29
29
|
margin: 0 auto;
|
|
30
30
|
max-width: calc(var(--max-width));
|
|
31
|
+
}
|
|
31
32
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
.article-item-title {
|
|
34
|
+
font-size: 26px;
|
|
35
|
+
color: $text-important;
|
|
36
|
+
}
|
|
36
37
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
38
|
+
.article-item-button {
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-wrap: wrap;
|
|
41
|
+
margin-top: 16px;
|
|
42
|
+
}
|
|
42
43
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
44
|
+
.article-item-link {
|
|
45
|
+
display: flex;
|
|
46
|
+
margin-top: 16px;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
@media(max-width: 767.98px) {
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
<icon-plus />
|
|
24
24
|
<span class="btn-text">添加组件</span>
|
|
25
25
|
</div> -->
|
|
26
|
-
<Operate v-model:show="isHover" @handle-edit="showSetting = true" @handle-delete="handleDelete" @handle-copy="handleCopy"></Operate>
|
|
26
|
+
<Operate v-if="!modelValue?.readOnly" v-model:show="isHover" @handle-edit="showSetting = true" @handle-delete="handleDelete" @handle-copy="handleCopy"></Operate>
|
|
27
27
|
</a-row>
|
|
28
28
|
</div>
|
|
29
29
|
|
|
@@ -66,11 +66,11 @@ const hasMedia = computed(() => {
|
|
|
66
66
|
})
|
|
67
67
|
|
|
68
68
|
const handleInit = () => {
|
|
69
|
-
if (props.modelValue && props.modelValue.
|
|
69
|
+
if (props.modelValue && props.modelValue.datad) return // 有数据不用初始化
|
|
70
70
|
const data = {
|
|
71
71
|
id: randomString(),
|
|
72
72
|
type: 'ArticleList',
|
|
73
|
-
|
|
73
|
+
readOnly: props.modelValue?.readOnly || false,
|
|
74
74
|
width: '',
|
|
75
75
|
background: '',
|
|
76
76
|
data: [
|
|
@@ -78,20 +78,13 @@ const handleInit = () => {
|
|
|
78
78
|
id: randomString(),
|
|
79
79
|
type: 'Article',
|
|
80
80
|
data: {
|
|
81
|
-
title: '
|
|
81
|
+
title: '耀华国际教育学校浙江桐乡',
|
|
82
82
|
content: '耀华国际教育学校浙江桐乡校区成立于 2017 年，先进的校园设施确保学 生在安全友好的环境中学习。学校坐落于高桥镇，提供从幼儿阶段至高中 阶段 (K2 至13 年级) 的教育服务，招收2 岁至18 岁本地和外籍学生。',
|
|
83
|
-
buttonList: [
|
|
84
|
-
{
|
|
85
|
-
id: randomString(),
|
|
86
|
-
text: '查看更多',
|
|
87
|
-
url: 'https://www.baidu.com',
|
|
88
|
-
isExternal: false
|
|
89
|
-
}
|
|
90
|
-
],
|
|
83
|
+
buttonList: [],
|
|
91
84
|
linkList: [
|
|
92
85
|
{
|
|
93
86
|
id: randomString(),
|
|
94
|
-
text: '
|
|
87
|
+
text: '了解更多',
|
|
95
88
|
url: 'https://www.baidu.com',
|
|
96
89
|
isExternal: false
|
|
97
90
|
}
|
|
@@ -108,48 +101,48 @@ const handleInit = () => {
|
|
|
108
101
|
isRound: false
|
|
109
102
|
}
|
|
110
103
|
},
|
|
111
|
-
{
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
},
|
|
133
|
-
{
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
},
|
|
145
|
-
{
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
},
|
|
104
|
+
// {
|
|
105
|
+
// id: randomString(),
|
|
106
|
+
// type: 'Contact',
|
|
107
|
+
// data: {
|
|
108
|
+
// title: '这里是标题',
|
|
109
|
+
// content: '耀华国际教育学校浙江桐乡校区成立于 2017 年，先进的校园设施确保学 生在安全友好的环境中学习。学校坐落于高桥镇，提供从幼儿阶段至高中 阶段 (K2 至13 年级) 的教育服务，招收2 岁至18 岁本地和外籍学生。',
|
|
110
|
+
// categories: [
|
|
111
|
+
// {
|
|
112
|
+
// id: randomString(),
|
|
113
|
+
// text: '分类1'
|
|
114
|
+
// }
|
|
115
|
+
// ],
|
|
116
|
+
// linkList: [
|
|
117
|
+
// {
|
|
118
|
+
// id: randomString(),
|
|
119
|
+
// text: '查看更多',
|
|
120
|
+
// url: 'https://www.baidu.com',
|
|
121
|
+
// isExternal: false
|
|
122
|
+
// }
|
|
123
|
+
// ]
|
|
124
|
+
// }
|
|
125
|
+
// },
|
|
126
|
+
// {
|
|
127
|
+
// id: randomString(),
|
|
128
|
+
// type: 'ImageList',
|
|
129
|
+
// data: {
|
|
130
|
+
// imageList: [
|
|
131
|
+
// {
|
|
132
|
+
// id: randomString(),
|
|
133
|
+
// src: 'https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg'
|
|
134
|
+
// }
|
|
135
|
+
// ],
|
|
136
|
+
// }
|
|
137
|
+
// },
|
|
138
|
+
// {
|
|
139
|
+
// id: randomString(),
|
|
140
|
+
// type: 'Video',
|
|
141
|
+
// data: {
|
|
142
|
+
// videoSrc: 'http://mpv.videocc.net/4b964bbdf4/3/4b964bbdf481505df84cfd703c4b3043_2.mp4',
|
|
143
|
+
// imgSrc: 'https://object.ycyw.com/media-library/ycyw-edu/news/20250628%20HKDSE%20Forum/Cover.jpg',
|
|
144
|
+
// }
|
|
145
|
+
// },
|
|
153
146
|
]
|
|
154
147
|
}
|
|
155
148
|
emit('update:modelValue', data)
|
|
@@ -232,7 +225,7 @@ handleInit()
|
|
|
232
225
|
.article-list-right {
|
|
233
226
|
justify-content: flex-start;
|
|
234
227
|
margin-left: 0;
|
|
235
|
-
max-width:
|
|
228
|
+
max-width: 100%;
|
|
236
229
|
}
|
|
237
230
|
}
|
|
238
231
|
|
|
@@ -47,8 +47,11 @@
|
|
|
47
47
|
<template #item="{ element: item }">
|
|
48
48
|
<div class="setting-item">
|
|
49
49
|
<p class="item-name">{{ item.type }}</p>
|
|
50
|
-
<div class="
|
|
51
|
-
<
|
|
50
|
+
<div class="btn-group">
|
|
51
|
+
<div class="drag-handle">
|
|
52
|
+
<icon-drag-arrow class="drag-icon" />
|
|
53
|
+
</div>
|
|
54
|
+
<icon-delete class="btn-delete" @click="handleDelete(item.id)" />
|
|
52
55
|
</div>
|
|
53
56
|
|
|
54
57
|
<template v-if="item.type === 'Article'">
|
|
@@ -78,13 +81,15 @@
|
|
|
78
81
|
:class="{ 'sortable-disabled': !shouldShowDragHandle(item.data.buttonList) }"
|
|
79
82
|
:key="button.id"
|
|
80
83
|
>
|
|
81
|
-
<div
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
84
|
+
<div class="btn-group">
|
|
85
|
+
<div
|
|
86
|
+
v-if="shouldShowDragHandle(item.data.buttonList)"
|
|
87
|
+
class="drag-handle"
|
|
88
|
+
>
|
|
89
|
+
<icon-drag-arrow class="drag-icon" />
|
|
90
|
+
</div>
|
|
91
|
+
<icon-delete class="btn-delete" @click="handleDeleteButton(item.data.buttonList, button.id)" />
|
|
86
92
|
</div>
|
|
87
|
-
<icon-delete class="btn-delete" @click="handleDeleteButton(item.data.buttonList, button.id)" />
|
|
88
93
|
<a-button type="primary">{{ button.text }}</a-button>
|
|
89
94
|
<div class="item-action flex items-center">
|
|
90
95
|
<a-input class="action-text" v-model="button.text" placeholder="按钮文本" allow-clear />
|
|
@@ -119,13 +124,16 @@
|
|
|
119
124
|
:class="{ 'sortable-disabled': !shouldShowDragHandle(item.data.linkList) }"
|
|
120
125
|
:key="link.id"
|
|
121
126
|
>
|
|
122
|
-
<div
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
+
<div class="btn-group">
|
|
128
|
+
<div
|
|
129
|
+
v-if="shouldShowDragHandle(item.data.linkList)"
|
|
130
|
+
class="drag-handle"
|
|
131
|
+
>
|
|
132
|
+
<icon-drag-arrow class="drag-icon" />
|
|
133
|
+
</div>
|
|
134
|
+
<icon-delete class="btn-delete" @click="handleDeleteLink(item.data.linkList, link.id)" />
|
|
127
135
|
</div>
|
|
128
|
-
|
|
136
|
+
|
|
129
137
|
<a-link href="link">{{ link.text }}</a-link>
|
|
130
138
|
<div class="item-action flex items-center">
|
|
131
139
|
<a-input class="action-text" v-model="link.text" placeholder="按钮文本" allow-clear />
|
|
@@ -168,11 +176,14 @@
|
|
|
168
176
|
:class="{ 'sortable-disabled': !shouldShowDragHandle(item.data.categories) }"
|
|
169
177
|
:key="category.id"
|
|
170
178
|
>
|
|
171
|
-
<div
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
179
|
+
<div class="btn-group">
|
|
180
|
+
<div
|
|
181
|
+
v-if="shouldShowDragHandle(item.data.categories)"
|
|
182
|
+
class="drag-handle"
|
|
183
|
+
>
|
|
184
|
+
<icon-drag-arrow class="drag-icon" />
|
|
185
|
+
</div>
|
|
186
|
+
<icon-delete class="btn-delete" @click="handleDeleteCategory(item.data.categories, category.id)" />
|
|
176
187
|
</div>
|
|
177
188
|
<icon-delete class="btn-delete" @click="handleDeleteCategory(item.data.categories, category.id)" />
|
|
178
189
|
<a-link href="link">{{ category.text }}</a-link>
|
|
@@ -207,13 +218,15 @@
|
|
|
207
218
|
:class="{ 'sortable-disabled': !shouldShowDragHandle(item.data.linkList) }"
|
|
208
219
|
:key="link.id"
|
|
209
220
|
>
|
|
210
|
-
<div
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
221
|
+
<div class="btn-group">
|
|
222
|
+
<div
|
|
223
|
+
v-if="shouldShowDragHandle(item.data.linkList)"
|
|
224
|
+
class="drag-handle"
|
|
225
|
+
>
|
|
226
|
+
<icon-drag-arrow class="drag-icon" />
|
|
227
|
+
</div>
|
|
228
|
+
<icon-delete class="btn-delete" @click="handleDeleteLink(item.data.linkList, link.id)" />
|
|
215
229
|
</div>
|
|
216
|
-
<icon-delete class="btn-delete" @click="handleDeleteLink(item.data.linkList, link.id)" />
|
|
217
230
|
<a-link href="link">{{ link.text }}</a-link>
|
|
218
231
|
<div class="item-action flex items-center">
|
|
219
232
|
<a-input class="action-text" v-model="link.text" placeholder="按钮文本" allow-clear />
|
|
@@ -261,15 +274,19 @@
|
|
|
261
274
|
class="img-list-item flex draggable-item"
|
|
262
275
|
:class="{ 'sortable-disabled': !shouldShowDragHandle(item.data.imageList) }"
|
|
263
276
|
:key="img.id"
|
|
264
|
-
>
|
|
265
|
-
<div
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
277
|
+
>
|
|
278
|
+
<div class="btn-group">
|
|
279
|
+
<div
|
|
280
|
+
v-if="shouldShowDragHandle(item.data.imageList)"
|
|
281
|
+
class="drag-handle"
|
|
282
|
+
>
|
|
283
|
+
<icon-drag-arrow class="drag-icon" />
|
|
284
|
+
</div>
|
|
285
|
+
<icon-delete class="btn-delete" @click="handleDeleteImage(item.data.imageList, img.id)" />
|
|
270
286
|
</div>
|
|
287
|
+
|
|
271
288
|
<div class="item-img-box" v-if="img.src">
|
|
272
|
-
<icon-close-circle-fill class="item-img-dlete" @click="handleDeleteImage(item.data.imageList, img.id)" />
|
|
289
|
+
<!-- <icon-close-circle-fill class="item-img-dlete" @click="handleDeleteImage(item.data.imageList, img.id)" /> -->
|
|
273
290
|
<img class="item-img small-img" :src="img.src" />
|
|
274
291
|
</div>
|
|
275
292
|
|
|
@@ -431,11 +448,15 @@ const handleAdd = (type: string) => {
|
|
|
431
448
|
}
|
|
432
449
|
}
|
|
433
450
|
|
|
451
|
+
const handleDelete = (id: string) => {
|
|
452
|
+
props.data.data = props.data.data.filter((item: any) => item.id !== id)
|
|
453
|
+
}
|
|
454
|
+
|
|
434
455
|
const handleAddButton = (list: any[]) => {
|
|
435
456
|
list.push({
|
|
436
457
|
id: randomString(),
|
|
437
458
|
text: '查看更多',
|
|
438
|
-
url:
|
|
459
|
+
url: undefined,
|
|
439
460
|
isExternal: false
|
|
440
461
|
})
|
|
441
462
|
}
|
|
@@ -448,7 +469,7 @@ const handleAddLink = (list: any[]) => {
|
|
|
448
469
|
list.push({
|
|
449
470
|
id: randomString(),
|
|
450
471
|
text: '查看更多',
|
|
451
|
-
url:
|
|
472
|
+
url: undefined,
|
|
452
473
|
isExternal: false
|
|
453
474
|
})
|
|
454
475
|
}
|
|
@@ -501,6 +522,21 @@ const handleDeleteImage = (list: any[], img: string) => {
|
|
|
501
522
|
border-radius: 8px;
|
|
502
523
|
margin-bottom: 20px;
|
|
503
524
|
|
|
525
|
+
.btn-group {
|
|
526
|
+
position: absolute;
|
|
527
|
+
right: 0;
|
|
528
|
+
top: 0;
|
|
529
|
+
display: flex;
|
|
530
|
+
align-items: center;
|
|
531
|
+
padding: 4px;
|
|
532
|
+
|
|
533
|
+
.btn-delete {
|
|
534
|
+
padding: 4px;
|
|
535
|
+
font-size: 24px;
|
|
536
|
+
cursor: pointer;
|
|
537
|
+
}
|
|
538
|
+
}
|
|
539
|
+
|
|
504
540
|
.item-name {
|
|
505
541
|
font-size: 16px;
|
|
506
542
|
font-weight: 600;
|
|
@@ -548,15 +584,6 @@ const handleDeleteImage = (list: any[], img: string) => {
|
|
|
548
584
|
.arco-input-wrapper {
|
|
549
585
|
background: #f2f3f5;
|
|
550
586
|
}
|
|
551
|
-
|
|
552
|
-
.btn-delete {
|
|
553
|
-
position: absolute;
|
|
554
|
-
padding: 4px;
|
|
555
|
-
top: 8px;
|
|
556
|
-
right: 34px;
|
|
557
|
-
font-size: 24px;
|
|
558
|
-
cursor: pointer;
|
|
559
|
-
}
|
|
560
587
|
}
|
|
561
588
|
|
|
562
589
|
// 拖拽相关样式
|
|
@@ -629,8 +656,8 @@ const handleDeleteImage = (list: any[], img: string) => {
|
|
|
629
656
|
cursor: move;
|
|
630
657
|
|
|
631
658
|
&:hover {
|
|
632
|
-
background-color: #f8f9fa;
|
|
633
659
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
660
|
+
transform: translateY(-1px);
|
|
634
661
|
}
|
|
635
662
|
|
|
636
663
|
// 当禁用拖拽时，不显示拖拽效果
|
|
@@ -638,8 +665,8 @@ const handleDeleteImage = (list: any[], img: string) => {
|
|
|
638
665
|
cursor: default;
|
|
639
666
|
|
|
640
667
|
&:hover {
|
|
641
|
-
background-color: transparent;
|
|
642
668
|
box-shadow: none;
|
|
669
|
+
transform: none;
|
|
643
670
|
}
|
|
644
671
|
}
|
|
645
672
|
}
|
|
@@ -684,10 +711,7 @@ const handleDeleteImage = (list: any[], img: string) => {
|
|
|
684
711
|
}
|
|
685
712
|
|
|
686
713
|
.drag-handle {
|
|
687
|
-
position: absolute;
|
|
688
714
|
padding: 4px;
|
|
689
|
-
top: 6px;
|
|
690
|
-
right: 6px;
|
|
691
715
|
cursor: grab;
|
|
692
716
|
padding: 4px;
|
|
693
717
|
border-radius: 4px;
|
|
@@ -26,8 +26,6 @@ const props = defineProps({
|
|
|
26
26
|
const handleButtonClick = () => {
|
|
27
27
|
window.open(props.data.url, '_blank')
|
|
28
28
|
}
|
|
29
|
-
|
|
30
|
-
console.log('data=====', props.data)
|
|
31
29
|
</script>
|
|
32
30
|
|
|
33
31
|
<style scoped lang="scss">
|
|
@@ -180,4 +178,22 @@ console.log('data=====', props.data)
|
|
|
180
178
|
min-width: 80px
|
|
181
179
|
}
|
|
182
180
|
}
|
|
181
|
+
|
|
182
|
+
@media(max-width: 767.98px) {
|
|
183
|
+
.button-icon {
|
|
184
|
+
width:12px;
|
|
185
|
+
height: 12px;
|
|
186
|
+
margin-left: 4px
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.button-icon:after, .button-icon:before {
|
|
190
|
+
width:4.7px;
|
|
191
|
+
height: 6px;
|
|
192
|
+
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgNCA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSAxTDMuMDU3MTQgMy4wNTcxNEwxIDUuMTE0MjkiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
|
|
193
|
+
background-position: 50%;
|
|
194
|
+
background-size: cover;
|
|
195
|
+
background-repeat: no-repeat;
|
|
196
|
+
background-color: hsla(0,0%,100%,0)
|
|
197
|
+
}
|
|
198
|
+
}
|
|
183
199
|
</style>
|