officialblock 1.0.2 → 1.0.4
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 +74 -74
- package/dist/official-block.es.js +9676 -9502
- package/dist/official-block.umd.js +72 -72
- package/dist/style.css +1 -1
- package/package.json +4 -3
- package/src/components/ArticleList/index.vue +32 -25
- package/src/components/ArticleList/setting.vue +422 -120
- package/src/components/Button/index.vue +2 -2
- package/src/components/Media/index.vue +3 -3
- package/src/router/index.ts +12 -0
- package/src/style.css +2 -3
- package/src/styles/variables.scss +31 -1
- package/src/views/Layout.vue +4 -1
- package/src/views/components/ArticleListDemo.vue +1 -2
- package/src/views/components/DragLimitDemo.vue +573 -0
- package/src/views/components/DragSortDemo.vue +610 -0
|
@@ -32,138 +32,332 @@
|
|
|
32
32
|
|
|
33
33
|
<!-- 子组件属性 -->
|
|
34
34
|
<div class="setting-body">
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
<
|
|
50
|
-
|
|
51
|
-
<
|
|
35
|
+
<draggable
|
|
36
|
+
v-model="data.data"
|
|
37
|
+
:component-data="{
|
|
38
|
+
tag: 'div',
|
|
39
|
+
type: 'transition-group',
|
|
40
|
+
name: !drag ? 'flip-list' : null
|
|
41
|
+
}"
|
|
42
|
+
v-bind="dragOptions"
|
|
43
|
+
@start="drag = true"
|
|
44
|
+
@end="drag = false"
|
|
45
|
+
item-key="id"
|
|
46
|
+
>
|
|
47
|
+
<template #item="{ element: item }">
|
|
48
|
+
<div class="setting-item">
|
|
49
|
+
<p class="item-name">{{ item.type }}</p>
|
|
50
|
+
<div class="drag-handle img-drag-handle">
|
|
51
|
+
<icon-drag-arrow class="drag-icon" />
|
|
52
52
|
</div>
|
|
53
|
-
<a-checkbox :model-value="button.isExternal">是否外部链接</a-checkbox>
|
|
54
|
-
</div>
|
|
55
|
-
<div class="item-add-btn flex items-center" @click="handleAddButton(item.data.buttonList)">
|
|
56
|
-
<icon-plus />
|
|
57
|
-
<span class="btn-text">添加按钮</span>
|
|
58
|
-
</div>
|
|
59
|
-
|
|
60
|
-
<p class="item-title">链接</p>
|
|
61
|
-
<div class="item-button" v-for="link in item.data.linkList" :key="link.id">
|
|
62
|
-
<icon-delete class="btn-delete" @click="handleDeleteLink(item.data.linkList, link.id)" />
|
|
63
|
-
<a-link href="link">{{ link.text }}</a-link>
|
|
64
|
-
<div class="item-action flex items-center">
|
|
65
|
-
<a-input class="action-text" v-model="link.text" placeholder="按钮文本" allow-clear />
|
|
66
|
-
<a-input v-model="link.url" placeholder="按钮链接" allow-clear />
|
|
67
|
-
</div>
|
|
68
|
-
<a-checkbox :model-value="link.isExternal">是否外部链接</a-checkbox>
|
|
69
|
-
</div>
|
|
70
|
-
<div class="item-add-btn flex items-center" @click="handleAddLink(item.data.linkList)">
|
|
71
|
-
<icon-plus />
|
|
72
|
-
<span class="btn-text">添加链接</span>
|
|
73
|
-
</div>
|
|
74
|
-
</template>
|
|
75
|
-
|
|
76
|
-
<template v-if="item.type === 'Contact'">
|
|
77
|
-
<p class="item-title">标题</p>
|
|
78
|
-
<a-input v-model="item.data.title" placeholder="请输入标题" allow-clear />
|
|
79
|
-
|
|
80
|
-
<p class="item-title">内容</p>
|
|
81
|
-
<RichTextEditor v-model="item.data.content"></RichTextEditor>
|
|
82
|
-
|
|
83
|
-
<p class="item-title">分类</p>
|
|
84
|
-
<div class="item-button" v-for="category in item.data.categories" :key="category.id">
|
|
85
|
-
<icon-delete class="btn-delete" @click="handleDeleteCategory(item.data.categories, category.id)" />
|
|
86
|
-
<a-link href="link">{{ category.text }}</a-link>
|
|
87
|
-
<div class="item-action flex items-center">
|
|
88
|
-
<a-input v-model="category.text" placeholder="分类名称" allow-clear />
|
|
89
|
-
</div>
|
|
90
|
-
</div>
|
|
91
|
-
<div class="item-add-btn flex items-center" @click="handleAddCategory(item.data.categories)">
|
|
92
|
-
<icon-plus />
|
|
93
|
-
<span class="btn-text">添加分类</span>
|
|
94
|
-
</div>
|
|
95
|
-
|
|
96
|
-
<p class="item-title">链接</p>
|
|
97
|
-
<div class="item-button" v-for="link in item.data.linkList" :key="link.id">
|
|
98
|
-
<icon-delete class="btn-delete" @click="handleDeleteLink(item.data.linkList, link.id)" />
|
|
99
|
-
<a-link href="link">{{ link.text }}</a-link>
|
|
100
|
-
<div class="item-action flex items-center">
|
|
101
|
-
<a-input class="action-text" v-model="link.text" placeholder="按钮文本" allow-clear />
|
|
102
|
-
<a-input v-model="link.url" placeholder="按钮链接" allow-clear />
|
|
103
|
-
</div>
|
|
104
|
-
<a-checkbox :model-value="link.isExternal">是否外部链接</a-checkbox>
|
|
105
|
-
</div>
|
|
106
|
-
<div class="item-add-btn flex items-center" @click="handleAddLink(item.data.linkList)">
|
|
107
|
-
<icon-plus />
|
|
108
|
-
<span class="btn-text">添加链接</span>
|
|
109
|
-
</div>
|
|
110
|
-
</template>
|
|
111
53
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
54
|
+
<template v-if="item.type === 'Article'">
|
|
55
|
+
<p class="item-title">标题</p>
|
|
56
|
+
<a-input v-model="item.data.title" placeholder="请输入标题" allow-clear />
|
|
57
|
+
|
|
58
|
+
<p class="item-title">内容</p>
|
|
59
|
+
<RichTextEditor v-model="item.data.content"></RichTextEditor>
|
|
60
|
+
|
|
61
|
+
<p class="item-title">按钮</p>
|
|
62
|
+
<draggable
|
|
63
|
+
v-model="item.data.buttonList"
|
|
64
|
+
:component-data="{
|
|
65
|
+
tag: 'div',
|
|
66
|
+
type: 'transition-group',
|
|
67
|
+
name: !drag ? 'flip-list' : null
|
|
68
|
+
}"
|
|
69
|
+
v-bind="buttonDragOptions"
|
|
70
|
+
:disabled="!shouldShowDragHandle(item.data.buttonList)"
|
|
71
|
+
@start="drag = true"
|
|
72
|
+
@end="drag = false"
|
|
73
|
+
item-key="id"
|
|
74
|
+
>
|
|
75
|
+
<template #item="{ element: button }">
|
|
76
|
+
<div
|
|
77
|
+
class="item-button draggable-item"
|
|
78
|
+
:class="{ 'sortable-disabled': !shouldShowDragHandle(item.data.buttonList) }"
|
|
79
|
+
:key="button.id"
|
|
80
|
+
>
|
|
81
|
+
<div
|
|
82
|
+
v-if="shouldShowDragHandle(item.data.buttonList)"
|
|
83
|
+
class="drag-handle"
|
|
84
|
+
>
|
|
85
|
+
<icon-drag-arrow class="drag-icon" />
|
|
86
|
+
</div>
|
|
87
|
+
<icon-delete class="btn-delete" @click="handleDeleteButton(item.data.buttonList, button.id)" />
|
|
88
|
+
<a-button type="primary">{{ button.text }}</a-button>
|
|
89
|
+
<div class="item-action flex items-center">
|
|
90
|
+
<a-input class="action-text" v-model="button.text" placeholder="按钮文本" allow-clear />
|
|
91
|
+
<a-input v-model="button.url" placeholder="按钮链接" allow-clear />
|
|
92
|
+
</div>
|
|
93
|
+
<a-checkbox :model-value="button.isExternal">是否外部链接</a-checkbox>
|
|
94
|
+
</div>
|
|
95
|
+
</template>
|
|
96
|
+
</draggable>
|
|
97
|
+
<div class="item-add-btn flex items-center" @click="handleAddButton(item.data.buttonList)">
|
|
98
|
+
<icon-plus />
|
|
99
|
+
<span class="btn-text">添加按钮</span>
|
|
100
|
+
</div>
|
|
122
101
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
102
|
+
<p class="item-title">链接</p>
|
|
103
|
+
<draggable
|
|
104
|
+
v-model="item.data.linkList"
|
|
105
|
+
:component-data="{
|
|
106
|
+
tag: 'div',
|
|
107
|
+
type: 'transition-group',
|
|
108
|
+
name: !drag ? 'flip-list' : null
|
|
109
|
+
}"
|
|
110
|
+
v-bind="linkDragOptions"
|
|
111
|
+
:disabled="!shouldShowDragHandle(item.data.linkList)"
|
|
112
|
+
@start="drag = true"
|
|
113
|
+
@end="drag = false"
|
|
114
|
+
item-key="id"
|
|
115
|
+
>
|
|
116
|
+
<template #item="{ element: link }">
|
|
117
|
+
<div
|
|
118
|
+
class="item-button draggable-item"
|
|
119
|
+
:class="{ 'sortable-disabled': !shouldShowDragHandle(item.data.linkList) }"
|
|
120
|
+
:key="link.id"
|
|
121
|
+
>
|
|
122
|
+
<div
|
|
123
|
+
v-if="shouldShowDragHandle(item.data.linkList)"
|
|
124
|
+
class="drag-handle"
|
|
125
|
+
>
|
|
126
|
+
<icon-drag-arrow class="drag-icon" />
|
|
127
|
+
</div>
|
|
128
|
+
<icon-delete class="btn-delete" @click="handleDeleteLink(item.data.linkList, link.id)" />
|
|
129
|
+
<a-link href="link">{{ link.text }}</a-link>
|
|
130
|
+
<div class="item-action flex items-center">
|
|
131
|
+
<a-input class="action-text" v-model="link.text" placeholder="按钮文本" allow-clear />
|
|
132
|
+
<a-input v-model="link.url" placeholder="按钮链接" allow-clear />
|
|
133
|
+
</div>
|
|
134
|
+
<a-checkbox :model-value="link.isExternal">是否外部链接</a-checkbox>
|
|
135
|
+
</div>
|
|
136
|
+
</template>
|
|
137
|
+
</draggable>
|
|
138
|
+
<div class="item-add-btn flex items-center" @click="handleAddLink(item.data.linkList)">
|
|
139
|
+
<icon-plus />
|
|
140
|
+
<span class="btn-text">添加链接</span>
|
|
141
|
+
</div>
|
|
142
|
+
</template>
|
|
143
|
+
|
|
144
|
+
<template v-if="item.type === 'Contact'">
|
|
145
|
+
<p class="item-title">标题</p>
|
|
146
|
+
<a-input v-model="item.data.title" placeholder="请输入标题" allow-clear />
|
|
147
|
+
|
|
148
|
+
<p class="item-title">内容</p>
|
|
149
|
+
<RichTextEditor v-model="item.data.content"></RichTextEditor>
|
|
150
|
+
|
|
151
|
+
<p class="item-title">分类</p>
|
|
152
|
+
<draggable
|
|
153
|
+
v-model="item.data.categories"
|
|
154
|
+
:component-data="{
|
|
155
|
+
tag: 'div',
|
|
156
|
+
type: 'transition-group',
|
|
157
|
+
name: !drag ? 'flip-list' : null
|
|
158
|
+
}"
|
|
159
|
+
v-bind="categoryDragOptions"
|
|
160
|
+
:disabled="!shouldShowDragHandle(item.data.categories)"
|
|
161
|
+
@start="drag = true"
|
|
162
|
+
@end="drag = false"
|
|
163
|
+
item-key="id"
|
|
164
|
+
>
|
|
165
|
+
<template #item="{ element: category }">
|
|
166
|
+
<div
|
|
167
|
+
class="item-button draggable-item"
|
|
168
|
+
:class="{ 'sortable-disabled': !shouldShowDragHandle(item.data.categories) }"
|
|
169
|
+
:key="category.id"
|
|
170
|
+
>
|
|
171
|
+
<div
|
|
172
|
+
v-if="shouldShowDragHandle(item.data.categories)"
|
|
173
|
+
class="drag-handle"
|
|
174
|
+
>
|
|
175
|
+
<icon-drag-arrow class="drag-icon" />
|
|
176
|
+
</div>
|
|
177
|
+
<icon-delete class="btn-delete" @click="handleDeleteCategory(item.data.categories, category.id)" />
|
|
178
|
+
<a-link href="link">{{ category.text }}</a-link>
|
|
179
|
+
<div class="item-action flex items-center">
|
|
180
|
+
<a-input v-model="category.text" placeholder="分类名称" allow-clear />
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
</template>
|
|
184
|
+
</draggable>
|
|
185
|
+
<div class="item-add-btn flex items-center" @click="handleAddCategory(item.data.categories)">
|
|
186
|
+
<icon-plus />
|
|
187
|
+
<span class="btn-text">添加分类</span>
|
|
130
188
|
</div>
|
|
131
189
|
|
|
132
|
-
<
|
|
133
|
-
|
|
134
|
-
|
|
190
|
+
<p class="item-title">链接</p>
|
|
191
|
+
<draggable
|
|
192
|
+
v-model="item.data.linkList"
|
|
193
|
+
:component-data="{
|
|
194
|
+
tag: 'div',
|
|
195
|
+
type: 'transition-group',
|
|
196
|
+
name: !drag ? 'flip-list' : null
|
|
197
|
+
}"
|
|
198
|
+
v-bind="linkDragOptions"
|
|
199
|
+
:disabled="!shouldShowDragHandle(item.data.linkList)"
|
|
200
|
+
@start="drag = true"
|
|
201
|
+
@end="drag = false"
|
|
202
|
+
item-key="id"
|
|
203
|
+
>
|
|
204
|
+
<template #item="{ element: link }">
|
|
205
|
+
<div
|
|
206
|
+
class="item-button draggable-item"
|
|
207
|
+
:class="{ 'sortable-disabled': !shouldShowDragHandle(item.data.linkList) }"
|
|
208
|
+
:key="link.id"
|
|
209
|
+
>
|
|
210
|
+
<div
|
|
211
|
+
v-if="shouldShowDragHandle(item.data.linkList)"
|
|
212
|
+
class="drag-handle"
|
|
213
|
+
>
|
|
214
|
+
<icon-drag-arrow class="drag-icon" />
|
|
215
|
+
</div>
|
|
216
|
+
<icon-delete class="btn-delete" @click="handleDeleteLink(item.data.linkList, link.id)" />
|
|
217
|
+
<a-link href="link">{{ link.text }}</a-link>
|
|
218
|
+
<div class="item-action flex items-center">
|
|
219
|
+
<a-input class="action-text" v-model="link.text" placeholder="按钮文本" allow-clear />
|
|
220
|
+
<a-input v-model="link.url" placeholder="按钮链接" allow-clear />
|
|
221
|
+
</div>
|
|
222
|
+
<a-checkbox :model-value="link.isExternal">是否外部链接</a-checkbox>
|
|
223
|
+
</div>
|
|
224
|
+
</template>
|
|
225
|
+
</draggable>
|
|
226
|
+
<div class="item-add-btn flex items-center" @click="handleAddLink(item.data.linkList)">
|
|
227
|
+
<icon-plus />
|
|
228
|
+
<span class="btn-text">添加链接</span>
|
|
135
229
|
</div>
|
|
136
|
-
</
|
|
137
|
-
</div>
|
|
138
|
-
<div class="item-add-btn flex items-center" @click="handleAddImage(item.data.imageList)">
|
|
139
|
-
<icon-plus />
|
|
140
|
-
<span class="btn-text">添加图片</span>
|
|
141
|
-
</div>
|
|
142
|
-
</template>
|
|
230
|
+
</template>
|
|
143
231
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
232
|
+
<template v-if="item.type === 'Image'">
|
|
233
|
+
<img class="item-img" :src="item.data.imgSrc" />
|
|
234
|
+
<div class="item-uplaod flex items-center">
|
|
235
|
+
<a-input v-model="item.data.imgSrc" placeholder="请输入标题" allow-clear />
|
|
236
|
+
<a-upload class="fit-content" :show-file-list="false" action="/" />
|
|
237
|
+
</div>
|
|
238
|
+
<a-input class="mt-10" v-model="item.data.caption" placeholder="图片描述" allow-clear />
|
|
239
|
+
<a-input class="mt-10" v-model="item.data.alt" placeholder="图片alt" allow-clear />
|
|
240
|
+
<a-checkbox class="pt-10" :model-value="item.data.isRound">圆角</a-checkbox>
|
|
241
|
+
</template>
|
|
242
|
+
|
|
243
|
+
<template v-if="item.type === 'ImageList'">
|
|
244
|
+
<p class="item-title">图片组</p>
|
|
245
|
+
<div class="item-img-list">
|
|
246
|
+
<draggable
|
|
247
|
+
v-model="item.data.imageList"
|
|
248
|
+
:component-data="{
|
|
249
|
+
tag: 'div',
|
|
250
|
+
type: 'transition-group',
|
|
251
|
+
name: !drag ? 'flip-list' : null
|
|
252
|
+
}"
|
|
253
|
+
v-bind="imageDragOptions"
|
|
254
|
+
:disabled="!shouldShowDragHandle(item.data.imageList)"
|
|
255
|
+
@start="drag = true"
|
|
256
|
+
@end="drag = false"
|
|
257
|
+
item-key="id"
|
|
258
|
+
>
|
|
259
|
+
<template #item="{ element: img }">
|
|
260
|
+
<div
|
|
261
|
+
class="img-list-item flex draggable-item"
|
|
262
|
+
:class="{ 'sortable-disabled': !shouldShowDragHandle(item.data.imageList) }"
|
|
263
|
+
:key="img.id"
|
|
264
|
+
>
|
|
265
|
+
<div
|
|
266
|
+
v-if="shouldShowDragHandle(item.data.imageList)"
|
|
267
|
+
class="drag-handle img-drag-handle"
|
|
268
|
+
>
|
|
269
|
+
<icon-drag-arrow class="drag-icon" />
|
|
270
|
+
</div>
|
|
271
|
+
<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)" />
|
|
273
|
+
<img class="item-img small-img" :src="img.src" />
|
|
274
|
+
</div>
|
|
275
|
+
|
|
276
|
+
<div class="item-right flex-1">
|
|
277
|
+
<a-input style="margin-bottom: 12px" v-model="img.src" placeholder="请输入图片路径" allow-clear />
|
|
278
|
+
<a-upload :show-file-list="false" action="/" />
|
|
279
|
+
</div>
|
|
280
|
+
</div>
|
|
281
|
+
</template>
|
|
282
|
+
</draggable>
|
|
283
|
+
</div>
|
|
284
|
+
<div class="item-add-btn flex items-center" @click="handleAddImage(item.data.imageList)">
|
|
285
|
+
<icon-plus />
|
|
286
|
+
<span class="btn-text">添加图片</span>
|
|
287
|
+
</div>
|
|
288
|
+
</template>
|
|
289
|
+
|
|
290
|
+
<template v-if="item.type === 'Video'">
|
|
291
|
+
<p class="item-title">视频</p>
|
|
292
|
+
<video class="item-img" :src="item.data.videoSrc" controls></video>
|
|
293
|
+
<div class="item-uplaod flex items-center">
|
|
294
|
+
<a-input v-model="item.data.videoSrc" placeholder="请输入视频链接" allow-clear />
|
|
295
|
+
<a-upload class="fit-content" :show-file-list="false" action="/" />
|
|
296
|
+
</div>
|
|
297
|
+
<img class="item-img" :src="item.data.imgSrc" />
|
|
298
|
+
<div class="item-uplaod flex items-center">
|
|
299
|
+
<a-input v-model="item.data.imgSrc" placeholder="视频封面" allow-clear />
|
|
300
|
+
<a-upload class="fit-content" :show-file-list="false" action="/" />
|
|
301
|
+
</div>
|
|
302
|
+
</template>
|
|
155
303
|
</div>
|
|
156
304
|
</template>
|
|
157
|
-
</
|
|
305
|
+
</draggable>
|
|
158
306
|
</div>
|
|
159
307
|
</div>
|
|
160
308
|
</a-drawer>
|
|
161
309
|
</template>
|
|
162
310
|
|
|
163
311
|
<script lang="ts" setup>
|
|
312
|
+
import { ref, computed } from 'vue'
|
|
313
|
+
import draggable from 'vuedraggable'
|
|
164
314
|
import RichTextEditor from '@/components/RichTextEditor'
|
|
165
315
|
import { randomString } from '@/utils/common'
|
|
166
316
|
|
|
317
|
+
// 拖拽相关状态
|
|
318
|
+
const drag = ref(false)
|
|
319
|
+
|
|
320
|
+
// 不同类型的拖拽配置选项
|
|
321
|
+
const dragOptions = computed(() => ({
|
|
322
|
+
animation: 200,
|
|
323
|
+
group: 'item', // 按钮专用分组
|
|
324
|
+
disabled: false,
|
|
325
|
+
ghostClass: 'ghost'
|
|
326
|
+
}))
|
|
327
|
+
|
|
328
|
+
const buttonDragOptions = computed(() => ({
|
|
329
|
+
animation: 200,
|
|
330
|
+
group: 'buttons', // 按钮专用分组
|
|
331
|
+
disabled: false,
|
|
332
|
+
ghostClass: 'ghost'
|
|
333
|
+
}))
|
|
334
|
+
|
|
335
|
+
const linkDragOptions = computed(() => ({
|
|
336
|
+
animation: 200,
|
|
337
|
+
group: 'links', // 链接专用分组
|
|
338
|
+
disabled: false,
|
|
339
|
+
ghostClass: 'ghost'
|
|
340
|
+
}))
|
|
341
|
+
|
|
342
|
+
const categoryDragOptions = computed(() => ({
|
|
343
|
+
animation: 200,
|
|
344
|
+
group: 'categories', // 分类专用分组
|
|
345
|
+
disabled: false,
|
|
346
|
+
ghostClass: 'ghost'
|
|
347
|
+
}))
|
|
348
|
+
|
|
349
|
+
const imageDragOptions = computed(() => ({
|
|
350
|
+
animation: 200,
|
|
351
|
+
group: 'images', // 图片专用分组
|
|
352
|
+
disabled: false,
|
|
353
|
+
ghostClass: 'ghost'
|
|
354
|
+
}))
|
|
355
|
+
|
|
356
|
+
// 检查是否应该显示拖拽图标
|
|
357
|
+
const shouldShowDragHandle = (list: any[]) => {
|
|
358
|
+
return list && list.length > 1
|
|
359
|
+
}
|
|
360
|
+
|
|
167
361
|
const props = defineProps({
|
|
168
362
|
show: {
|
|
169
363
|
type: Boolean,
|
|
@@ -301,6 +495,7 @@ const handleDeleteImage = (list: any[], img: string) => {
|
|
|
301
495
|
margin-top: 12px;
|
|
302
496
|
|
|
303
497
|
.setting-item {
|
|
498
|
+
position: relative;
|
|
304
499
|
padding: 16px 12px;
|
|
305
500
|
background: #f0f2f5;
|
|
306
501
|
border-radius: 8px;
|
|
@@ -328,7 +523,27 @@ const handleDeleteImage = (list: any[], img: string) => {
|
|
|
328
523
|
padding: 12px 8px 4px;
|
|
329
524
|
background: #fff;
|
|
330
525
|
border-radius: 4px;
|
|
331
|
-
margin
|
|
526
|
+
margin: 4px 0;
|
|
527
|
+
transition: all 0.3s ease;
|
|
528
|
+
|
|
529
|
+
&.draggable-item {
|
|
530
|
+
cursor: move;
|
|
531
|
+
|
|
532
|
+
&:hover {
|
|
533
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
534
|
+
transform: translateY(-1px);
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
// 当禁用拖拽时，不显示拖拽效果
|
|
538
|
+
&.sortable-disabled {
|
|
539
|
+
cursor: default;
|
|
540
|
+
|
|
541
|
+
&:hover {
|
|
542
|
+
box-shadow: none;
|
|
543
|
+
transform: none;
|
|
544
|
+
}
|
|
545
|
+
}
|
|
546
|
+
}
|
|
332
547
|
|
|
333
548
|
.arco-input-wrapper {
|
|
334
549
|
background: #f2f3f5;
|
|
@@ -336,14 +551,40 @@ const handleDeleteImage = (list: any[], img: string) => {
|
|
|
336
551
|
|
|
337
552
|
.btn-delete {
|
|
338
553
|
position: absolute;
|
|
339
|
-
padding:
|
|
340
|
-
top:
|
|
341
|
-
right:
|
|
342
|
-
font-size:
|
|
554
|
+
padding: 4px;
|
|
555
|
+
top: 8px;
|
|
556
|
+
right: 34px;
|
|
557
|
+
font-size: 24px;
|
|
343
558
|
cursor: pointer;
|
|
344
559
|
}
|
|
345
560
|
}
|
|
346
561
|
|
|
562
|
+
// 拖拽相关样式
|
|
563
|
+
.flip-list-move {
|
|
564
|
+
transition: transform 0.5s;
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
.no-move {
|
|
568
|
+
transition: transform 0s;
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
.ghost {
|
|
572
|
+
opacity: 0.5;
|
|
573
|
+
background: #c8ebfb;
|
|
574
|
+
}
|
|
575
|
+
|
|
576
|
+
.list-group {
|
|
577
|
+
min-height: 20px;
|
|
578
|
+
}
|
|
579
|
+
|
|
580
|
+
.list-group-item {
|
|
581
|
+
cursor: move;
|
|
582
|
+
}
|
|
583
|
+
|
|
584
|
+
.list-group-item i {
|
|
585
|
+
cursor: pointer;
|
|
586
|
+
}
|
|
587
|
+
|
|
347
588
|
.item-action {
|
|
348
589
|
padding: 10px 0;
|
|
349
590
|
|
|
@@ -376,8 +617,42 @@ const handleDeleteImage = (list: any[], img: string) => {
|
|
|
376
617
|
|
|
377
618
|
.item-img-list {
|
|
378
619
|
.img-list-item {
|
|
379
|
-
margin
|
|
620
|
+
margin: 4px 0;
|
|
621
|
+
position: relative;
|
|
622
|
+
padding: 8px;
|
|
623
|
+
border-radius: 4px;
|
|
624
|
+
transition: all 0.3s ease;
|
|
625
|
+
background: #fff;
|
|
626
|
+
border-radius: 4px;
|
|
627
|
+
|
|
628
|
+
&.draggable-item {
|
|
629
|
+
cursor: move;
|
|
630
|
+
|
|
631
|
+
&:hover {
|
|
632
|
+
background-color: #f8f9fa;
|
|
633
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
// 当禁用拖拽时，不显示拖拽效果
|
|
637
|
+
&.sortable-disabled {
|
|
638
|
+
cursor: default;
|
|
639
|
+
|
|
640
|
+
&:hover {
|
|
641
|
+
background-color: transparent;
|
|
642
|
+
box-shadow: none;
|
|
643
|
+
}
|
|
644
|
+
}
|
|
645
|
+
}
|
|
646
|
+
|
|
647
|
+
.arco-input-wrapper {
|
|
648
|
+
background: #f2f3f5;
|
|
649
|
+
}
|
|
650
|
+
|
|
651
|
+
.img-drag-handle {
|
|
652
|
+
top: 0 !important;
|
|
653
|
+
}
|
|
380
654
|
}
|
|
655
|
+
|
|
381
656
|
.item-img-box {
|
|
382
657
|
margin-right: 12px;
|
|
383
658
|
position: relative;
|
|
@@ -400,8 +675,35 @@ const handleDeleteImage = (list: any[], img: string) => {
|
|
|
400
675
|
height: 100px;
|
|
401
676
|
object-fit: cover;
|
|
402
677
|
}
|
|
678
|
+
|
|
679
|
+
.item-right {
|
|
680
|
+
padding-top: 24px;
|
|
681
|
+
}
|
|
403
682
|
}
|
|
404
683
|
}
|
|
405
684
|
}
|
|
685
|
+
|
|
686
|
+
.drag-handle {
|
|
687
|
+
position: absolute;
|
|
688
|
+
padding: 4px;
|
|
689
|
+
top: 6px;
|
|
690
|
+
right: 6px;
|
|
691
|
+
cursor: grab;
|
|
692
|
+
padding: 4px;
|
|
693
|
+
border-radius: 4px;
|
|
694
|
+
|
|
695
|
+
&:hover {
|
|
696
|
+
background-color: #f0f2f5;
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
&:active {
|
|
700
|
+
cursor: grabbing;
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
.drag-icon {
|
|
704
|
+
font-size: 16px;
|
|
705
|
+
color: #86909c;
|
|
706
|
+
}
|
|
707
|
+
}
|
|
406
708
|
}
|
|
407
709
|
</style>
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div v-if="type === 'button'" class="button-primary flex-inline flex-center
|
|
2
|
+
<div v-if="type === 'button'" class="button-primary flex-inline flex-center" @click="handleButtonClick">
|
|
3
3
|
<span class="button-text">{{ data.text }}</span>
|
|
4
4
|
<span class="button-icon"></span>
|
|
5
5
|
</div>
|
|
6
|
-
<div v-else class="link-button flex-inline flex-center
|
|
6
|
+
<div v-else class="link-button flex-inline flex-center" @click="handleButtonClick">
|
|
7
7
|
<span class="link-text">{{ data.text }}</span>
|
|
8
8
|
<span class="button-icon link-icon"></span>
|
|
9
9
|
</div>
|
|
@@ -4,14 +4,14 @@
|
|
|
4
4
|
<p class="image-desc" v-if="data.caption">{{ data.caption }}</p>
|
|
5
5
|
</div>
|
|
6
6
|
|
|
7
|
-
<div class="video-container flex-inline flex-center
|
|
7
|
+
<div class="video-container flex-inline flex-center" v-if="type === 'Video'">
|
|
8
8
|
<!-- 获取播放状态 -->
|
|
9
9
|
<video class="video" ref="videoElement" :src="data.videoSrc" controls></video>
|
|
10
10
|
<template v-if="!isPlaying">
|
|
11
|
-
<div class="video-thumbnail flex flex-center
|
|
11
|
+
<div class="video-thumbnail flex flex-center">
|
|
12
12
|
<img :src="data.imgSrc">
|
|
13
13
|
</div>
|
|
14
|
-
<div class="play-button flex flex-center
|
|
14
|
+
<div class="play-button flex flex-center" @click="playVideo">
|
|
15
15
|
<icon-caret-right style="color: #fff" />
|
|
16
16
|
</div>
|
|
17
17
|
</template>
|
package/src/router/index.ts
CHANGED
|
@@ -59,6 +59,18 @@ const routes: RouteRecordRaw[] = [
|
|
|
59
59
|
name: 'ThemeDemo',
|
|
60
60
|
component: () => import('../views/components/ThemeDemo.vue'),
|
|
61
61
|
meta: { title: 'Theme 主题系统' }
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
path: 'drag-sort',
|
|
65
|
+
name: 'DragSortDemo',
|
|
66
|
+
component: () => import('../views/components/DragSortDemo.vue'),
|
|
67
|
+
meta: { title: '拖拽排序演示' }
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
path: 'drag-limit',
|
|
71
|
+
name: 'DragLimitDemo',
|
|
72
|
+
component: () => import('../views/components/DragLimitDemo.vue'),
|
|
73
|
+
meta: { title: '拖拽限制演示' }
|
|
62
74
|
}
|
|
63
75
|
]
|
|
64
76
|
},
|