Skip to content

Commit b2ba74e

Browse files
Reuse5653Reuse5653
committed
feat(Upload): support drag sorting
1 parent c812447 commit b2ba74e

File tree

9 files changed

+512
-2
lines changed

9 files changed

+512
-2
lines changed

‎src/upload/__test__/__snapshots__/demo.test.jsx.snap‎

Lines changed: 313 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1105,6 +1105,319 @@ exports[`Upload > Upload mobileVue demo works fine 1`] = `
11051105
11061106
</div>
11071107
</div>
1108+
<div
1109+
class="tdesign-mobile-demo-block"
1110+
>
1111+
<div
1112+
class="tdesign-mobile-demo-block__header"
1113+
>
1114+
<h2
1115+
class="tdesign-mobile-demo-block__title"
1116+
>
1117+
04 可拖拽排序
1118+
</h2>
1119+
<p
1120+
class="tdesign-mobile-demo-block__summary"
1121+
>
1122+
开启拖拽排序
1123+
</p>
1124+
</div>
1125+
<div
1126+
class="tdesign-mobile-demo-block__slot"
1127+
>
1128+
1129+
<div
1130+
class="upload-demo"
1131+
data-v-10ccb48e=""
1132+
>
1133+
<div
1134+
class="upload-title"
1135+
data-v-10ccb48e=""
1136+
>
1137+
可拖拽排序
1138+
</div>
1139+
<div
1140+
class="t-upload"
1141+
data-v-10ccb48e=""
1142+
>
1143+
1144+
<div
1145+
class="t-upload__item"
1146+
draggable="true"
1147+
>
1148+
<div
1149+
class="t-image t-image--round t-upload__image"
1150+
>
1151+
<div
1152+
class="t-image__mask"
1153+
>
1154+
<div
1155+
class="t-loading"
1156+
style="font-size: 20px;"
1157+
>
1158+
<div
1159+
class="t-loading__dots"
1160+
style="animation-duration: 800ms; width: 20px; height: 20px;"
1161+
>
1162+
1163+
<div
1164+
class="t-loading__dot"
1165+
style="animation-duration: 0.8s; animation-delay: 0s;"
1166+
/>
1167+
<div
1168+
class="t-loading__dot"
1169+
style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
1170+
/>
1171+
<div
1172+
class="t-loading__dot"
1173+
style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
1174+
/>
1175+
1176+
</div>
1177+
<!---->
1178+
<!---->
1179+
</div>
1180+
</div>
1181+
<picture>
1182+
<!---->
1183+
<img
1184+
alt=""
1185+
class="t-image__img"
1186+
src="https://tdesign.gtimg.com/mobile/demos/upload4.png"
1187+
style="object-fit: fill; object-position: center;"
1188+
/>
1189+
</picture>
1190+
</div>
1191+
<!---->
1192+
<svg
1193+
class="t-icon t-icon-close t-upload__delete-btn"
1194+
fill="none"
1195+
height="1em"
1196+
viewBox="0 0 24 24"
1197+
width="1em"
1198+
>
1199+
<path
1200+
d="M7.04996 5.63599L11.9997 10.5857L16.9494 5.63599L18.3637 7.0502L13.4139 11.9999L18.3637 16.9497L16.9494 18.3639L11.9997 13.4142L7.04996 18.3639L5.63574 16.9497L10.5855 11.9999L5.63574 7.0502L7.04996 5.63599Z"
1201+
fill="currentColor"
1202+
/>
1203+
</svg>
1204+
</div>
1205+
<div
1206+
class="t-upload__item"
1207+
draggable="true"
1208+
>
1209+
<div
1210+
class="t-image t-image--round t-upload__image"
1211+
>
1212+
<div
1213+
class="t-image__mask"
1214+
>
1215+
<div
1216+
class="t-loading"
1217+
style="font-size: 20px;"
1218+
>
1219+
<div
1220+
class="t-loading__dots"
1221+
style="animation-duration: 800ms; width: 20px; height: 20px;"
1222+
>
1223+
1224+
<div
1225+
class="t-loading__dot"
1226+
style="animation-duration: 0.8s; animation-delay: 0s;"
1227+
/>
1228+
<div
1229+
class="t-loading__dot"
1230+
style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
1231+
/>
1232+
<div
1233+
class="t-loading__dot"
1234+
style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
1235+
/>
1236+
1237+
</div>
1238+
<!---->
1239+
<!---->
1240+
</div>
1241+
</div>
1242+
<picture>
1243+
<!---->
1244+
<img
1245+
alt=""
1246+
class="t-image__img"
1247+
src="https://tdesign.gtimg.com/mobile/demos/upload6.png"
1248+
style="object-fit: fill; object-position: center;"
1249+
/>
1250+
</picture>
1251+
</div>
1252+
<!---->
1253+
<svg
1254+
class="t-icon t-icon-close t-upload__delete-btn"
1255+
fill="none"
1256+
height="1em"
1257+
viewBox="0 0 24 24"
1258+
width="1em"
1259+
>
1260+
<path
1261+
d="M7.04996 5.63599L11.9997 10.5857L16.9494 5.63599L18.3637 7.0502L13.4139 11.9999L18.3637 16.9497L16.9494 18.3639L11.9997 13.4142L7.04996 18.3639L5.63574 16.9497L10.5855 11.9999L5.63574 7.0502L7.04996 5.63599Z"
1262+
fill="currentColor"
1263+
/>
1264+
</svg>
1265+
</div>
1266+
<div
1267+
class="t-upload__item"
1268+
draggable="true"
1269+
>
1270+
<div
1271+
class="t-image t-image--round t-upload__image"
1272+
>
1273+
<div
1274+
class="t-image__mask"
1275+
>
1276+
<div
1277+
class="t-loading"
1278+
style="font-size: 20px;"
1279+
>
1280+
<div
1281+
class="t-loading__dots"
1282+
style="animation-duration: 800ms; width: 20px; height: 20px;"
1283+
>
1284+
1285+
<div
1286+
class="t-loading__dot"
1287+
style="animation-duration: 0.8s; animation-delay: 0s;"
1288+
/>
1289+
<div
1290+
class="t-loading__dot"
1291+
style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
1292+
/>
1293+
<div
1294+
class="t-loading__dot"
1295+
style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
1296+
/>
1297+
1298+
</div>
1299+
<!---->
1300+
<!---->
1301+
</div>
1302+
</div>
1303+
<picture>
1304+
<!---->
1305+
<img
1306+
alt=""
1307+
class="t-image__img"
1308+
src="https://tdesign.gtimg.com/mobile/demos/upload5.png"
1309+
style="object-fit: fill; object-position: center;"
1310+
/>
1311+
</picture>
1312+
</div>
1313+
<!---->
1314+
<svg
1315+
class="t-icon t-icon-close t-upload__delete-btn"
1316+
fill="none"
1317+
height="1em"
1318+
viewBox="0 0 24 24"
1319+
width="1em"
1320+
>
1321+
<path
1322+
d="M7.04996 5.63599L11.9997 10.5857L16.9494 5.63599L18.3637 7.0502L13.4139 11.9999L18.3637 16.9497L16.9494 18.3639L11.9997 13.4142L7.04996 18.3639L5.63574 16.9497L10.5855 11.9999L5.63574 7.0502L7.04996 5.63599Z"
1323+
fill="currentColor"
1324+
/>
1325+
</svg>
1326+
</div>
1327+
<div
1328+
class="t-upload__item"
1329+
draggable="true"
1330+
>
1331+
<div
1332+
class="t-image t-image--round t-upload__image"
1333+
>
1334+
<div
1335+
class="t-image__mask"
1336+
>
1337+
<div
1338+
class="t-loading"
1339+
style="font-size: 20px;"
1340+
>
1341+
<div
1342+
class="t-loading__dots"
1343+
style="animation-duration: 800ms; width: 20px; height: 20px;"
1344+
>
1345+
1346+
<div
1347+
class="t-loading__dot"
1348+
style="animation-duration: 0.8s; animation-delay: 0s;"
1349+
/>
1350+
<div
1351+
class="t-loading__dot"
1352+
style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
1353+
/>
1354+
<div
1355+
class="t-loading__dot"
1356+
style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
1357+
/>
1358+
1359+
</div>
1360+
<!---->
1361+
<!---->
1362+
</div>
1363+
</div>
1364+
<picture>
1365+
<!---->
1366+
<img
1367+
alt=""
1368+
class="t-image__img"
1369+
src="https://tdesign.gtimg.com/mobile/demos/upload6.png"
1370+
style="object-fit: fill; object-position: center;"
1371+
/>
1372+
</picture>
1373+
</div>
1374+
<!---->
1375+
<svg
1376+
class="t-icon t-icon-close t-upload__delete-btn"
1377+
fill="none"
1378+
height="1em"
1379+
viewBox="0 0 24 24"
1380+
width="1em"
1381+
>
1382+
<path
1383+
d="M7.04996 5.63599L11.9997 10.5857L16.9494 5.63599L18.3637 7.0502L13.4139 11.9999L18.3637 16.9497L16.9494 18.3639L11.9997 13.4142L7.04996 18.3639L5.63574 16.9497L10.5855 11.9999L5.63574 7.0502L7.04996 5.63599Z"
1384+
fill="currentColor"
1385+
/>
1386+
</svg>
1387+
</div>
1388+
1389+
<div
1390+
class="t-upload__item t-upload__item--add"
1391+
>
1392+
<div
1393+
class="t-upload__add-icon"
1394+
>
1395+
<svg
1396+
class="t-icon t-icon-add"
1397+
fill="none"
1398+
height="1em"
1399+
viewBox="0 0 24 24"
1400+
width="1em"
1401+
>
1402+
<path
1403+
d="M13 4V11L20 11V13L13 13V20H11L11 13H4L4 11L11 11L11 4L13 4Z"
1404+
fill="currentColor"
1405+
/>
1406+
</svg>
1407+
</div>
1408+
</div>
1409+
<input
1410+
accept="image/png"
1411+
hidden=""
1412+
multiple=""
1413+
type="file"
1414+
/>
1415+
<!---->
1416+
</div>
1417+
</div>
1418+
1419+
</div>
1420+
</div>
11081421
</div>
11091422
`;
11101423

‎src/upload/demos/drag.vue‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<div class="upload-demo">
3+
<div class="upload-title">可拖拽排序</div>
4+
<t-upload
5+
v-model="files"
6+
multiple
7+
:draggable="true"
8+
accept="image/png"
9+
action="//service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
10+
/>
11+
</div>
12+
</template>
13+
14+
<script setup lang="ts">
15+
import { ref } from 'vue';
16+
17+
const files = ref([
18+
{
19+
url: 'https://tdesign.gtimg.com/mobile/demos/upload4.png',
20+
name: 'image1.png',
21+
type: 'image',
22+
},
23+
{
24+
url: 'https://tdesign.gtimg.com/mobile/demos/upload6.png',
25+
name: 'image2.png',
26+
type: 'image',
27+
},
28+
{
29+
url: 'https://tdesign.gtimg.com/mobile/demos/upload5.png',
30+
name: 'image3.png',
31+
type: 'image',
32+
},
33+
{
34+
url: 'https://tdesign.gtimg.com/mobile/demos/upload6.png',
35+
name: 'image4.png',
36+
type: 'image',
37+
},
38+
]);
39+
</script>
40+
41+
<style scoped lang="less">
42+
.upload-demo {
43+
background: var(--bg-color-demo, #fff);
44+
.upload-title {
45+
font-size: 16px;
46+
color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
47+
padding: 12px 16px;
48+
}
49+
}
50+
</style>

‎src/upload/demos/mobile.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,15 @@
1414
<tdesign-demo-block title="03 样式自定义" summary="单选上传">
1515
<CustomDemo />
1616
</tdesign-demo-block>
17+
<tdesign-demo-block title="04 可拖拽排序" summary="开启拖拽排序">
18+
<DragDemo />
19+
</tdesign-demo-block>
1720
</div>
1821
</template>
1922
<script setup lang="ts">
2023
import BaseDemo from './base.vue';
2124
import CustomDemo from './custom.vue';
2225
import MultipleDemo from './multiple.vue';
2326
import StatusDemo from './status.vue';
27+
import DragDemo from './drag.vue';
2428
</script>

0 commit comments

Comments
 (0)