遵义网站,常州网站建设基本流程,关于网站建设的建议征集,科技小制作小发明用到的技术栈#xff1a;
vue2element Uivue-dragging
如何使用#xff1a;
第一步: 安装
npm install awe-dnd --save第二步: 引入
main.js 文件
// 引入组件
import VueDND from awe-dnd
// 添加至全局
Vue.use(VueDND)具体项目代码
el-form-item label封面…用到的技术栈
vue2element Uivue-dragging
如何使用
第一步: 安装
npm install awe-dnd --save第二步: 引入
main.js 文件
// 引入组件
import VueDND from awe-dnd
// 添加至全局
Vue.use(VueDND)具体项目代码
el-form-item label封面图 propregiondiv stylewidth: 100%;display: flex;div classimgs!-- 上传后的图片显示在这里 --!-- : v-dragging{ item: item, list: coverFileList, group: cover }这种形式进行指令绑定其中 item 就是单个对象而 list 则是数据列表group 则是用来声明一个组来保证可以在一个页面中进行多个数据源的操作。 --div :style{ backgroundImage: url( item.url ) } v-for(item, index) in coverFileListv-dragging{ item: item, list: coverFileList, group: cover } :keyindexi classel-icon-circle-close clickcoverDelete(index)/i/div!-- 调用element ui上传组件 --!-- show-file-list 是否显示已上传文件列表 --!-- 这里不用组件的显示用我们自己写的便于实现拖住 --el-upload drag :actionaction multiple :namefile_name :show-file-listfalselist-typepicture-card :on-successhandleAvatarSuccess :before-uploadbeforeAvatarUploadaccept.jpg,.png,.jpeg :on-errorcoverErrorspan上传图片/span/el-upload/div/divdiv stylefont-size: 14px;color: #909399;注最多可上传9张图片单张大小需限制在10M以内拖动可进行排序/div
/el-form-item
scriptexport default{name: addResource,data(){retutn{coverFileList: [], //封面图图片集}},methods:{//上传成功handleAvatarSuccess(res, file){if (res.status 0) {this.$message.error(上传失败);return}let item Object.assign({ name: file.name, url: res.data.url })this.coverFileList.push(item);},//上传文件之前 根据自己业务补充beforeAvatarUpload (file){//判断上传有没有超过次数限制//验证图片格式和大小等逻辑},//上传失败函数coverError (err, file, fileList){this.$message.error(上传失败);}//删除上传的图片coverDelete (index) {this.coverFileList.splice(index, 1);}}}
/script
style langscss scoped.imgs {display: flex;flex-wrap: wrap;div {width: 148px;height: 148px;border-radius: 6px;margin-right: 10px;background-size: cover;background-repeat: no-repeat;// border: 1px solid #c0ccda;position: relative;margin-bottom: 20px;i {font-size: 20px;position: absolute;right: -5px;top: -5px;:hover {cursor: pointer;color: #409EFF;}}}}
/style效果展示 Video_23-11-13_10-17-30 end~~~
如有错误或观点不一致的请评论留言共同讨论本人前端小白一枚根据自己实际项目遇到的问题进行总结分享谢谢大家的阅读
