mpvue实现图片添加、删除、拖拽功能

40 阅读1分钟

自定义组件dragSort.Vue

.delete-icon { position: absolute; width: 20px; height: 20px; background: #f43530; right: 0; top: 0; border-radius: 20px; z-index: 5; } .delete-icon::before { content: ""; width: 13px; height: 2px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; } /* .wrapper { min-height: 190rpx; max-height: 100%; border-radius: 10rpx; padding: 0 30rpx 30rpx 30rpx; background: white; } */ .placeholder { color: #999; letter-spacing: 0; line-height: 40rpx; font-size: 32rpx; } .textarea { /* background: red; */ min-height: 150rpx; color: #444; font-size: 32rpx; } .textarea textarea { width: 100%; padding: 30rpx 0; } .movable-area { width: 100%; height:610rpx; } .margin-20rpx { margin-right: 20rpx; } .add { width: 190rpx; height: 190rpx; border: 2rpx solid #ccc; border-radius: 12rpx; /* position: relative; */ } .line1 { position: absolute; width: 2px; height: 62rpx; background: #ccc; top: 68rpx; left: 50%; }