企业官网建设流程全解析

电子商务实验网站建设实训过程,建设网站需要哪些,做爰全过程免费的视频 网站,微信小程序开发需要什么技能遇见情况#xff1a;现在的数据层层叠叠#xff0c;有的要求不仅简单的单个盒子拖拽#xff0c;而且要求#xff1a;父盒子里面的子盒子也要能拖拽。实现要求#xff1a;拖拽父输入框只能与属于父输入框的交换位置#xff1b;拖拽子输入框只能与子输入框交换位置实现图片…遇见情况现在的数据层层叠叠有的要求不仅简单的单个盒子拖拽而且要求父盒子里面的子盒子也要能拖拽。实现要求拖拽父输入框只能与属于父输入框的交换位置拖拽子输入框只能与子输入框交换位置实现图片完整代码实现template div classcustom no-select el-form :modelformtwo refformRef label-widthauto stylemax-width: 475px draggable v-modelformtwo.dimensionalInfoList item-keyid handle.drag-handle animation300 endonEnd template #item{ element: group, index: groupIndex } div classgroup_card !-- 父维度 -- div classfather_box span classiconfont icon-hengxian drag-handle/span el-form-item :propdimensionalInfoList. groupIndex .content :rules{ required: true, message: 父维度不能为空, trigger: blur, } el-input v-modelgroup.content placeholder请输入父分析维度 classdesc__content / /el-form-item SisternodeOutlined classicon_Share_css :style{ marginRight: formtwo.dimensionalInfoList.length 1 ? 24px : 10px, } clickaddNextInput(groupIndex) / el-icon classicon_height_css v-ifformtwo.dimensionalInfoList.length ! 1 CircleClose clickdelInput(groupIndex) / /el-icon /div !-- 子维度 -- draggable v-modelgroup.childInfo item-keyid handle.drag-handle animation300 endonEnd template #item{ element: groupChild, index: groupIndexChild } div classgroupChild_card !-- 前方样式引导用于连接父节点和子节点的连线-- div style width: 30px; height: 50px; float: left; margin-top: -24px; div styledisplay: flex div :style{ height: groupIndexChild ! group.childInfo.length - 1 ? 40px : 35px, paddingLeft: 7px, borderRight: 1px solid #979797, } /div div style width: 20px; height: 6px; margin-top: 34px; border-left: 1px solid #979797; border-bottom: 1px solid #979797; border-radius: 0 0 0 5px; margin-left: -0.5px; /div /div div style width: 0.5px; height: 10px; background-color: #979797; float: left; margin-left: 7px; v-ifgroupIndexChild ! group.childInfo.length - 1 /div /div span classiconfont icon-hengxian drag-handle/span el-form-item :prop dimensionalInfoList. groupIndex .childInfo. groupIndexChild .content :rules{ required: true, message: 子维度不能为空, trigger: blur, } el-input v-modelgroupChild.content placeholder请输入子分析维度 classdesc__content desc__content_son / /el-form-item el-icon classicon_height_css CircleClose clickdelInputSon(child) / /el-icon /div /template /draggable /div /template /draggable /el-form /div /template script setup import { ref } from vue; import { CircleClose } from element-plus/icons-vue; import { SisternodeOutlined } from ant-design/icons-vue; import draggable from vuedraggable; let i 1; //自定义id const formRef ref(); //定义分析维度表单 // 分析维度初始化就显示三个框 const formtwo ref({ dimensionalInfoList: [ { content: , dimId: i, childInfo: [] }, { content: , dimId: i, childInfo: [] }, { content: , dimId: i, childInfo: [] }, ], }); //拖拽结束事件,重新更新数据 const onEnd () { }; // 添加子联动输入框 const addNextInput (index) { // 获取当前维度对象 const currentItem formtwo.value.dimensionalInfoList[index]; if (!currentItem.childInfo) { currentItem.childInfo []; } // 向当前维度对象的 childInfo 数组中添加一个新的子维度对象 currentItem.childInfo.push({ content: , }); }; // 删除维度输入框 const delInput (index) { formtwo.value.dimensionalInfoList.splice(index, 1); }; // 删除子维度输入框 const delInputSon (child) { // 找到当前子维度对应的父维度对象 const parentIndex formtwo.value.dimensionalInfoList.findIndex((item) item.childInfo.includes(child), ); const parentItem formtwo.value.dimensionalInfoList[parentIndex]; // 从父维度对象的 childInfo 数组中删除当前子维度对象 parentItem.childInfo parentItem.childInfo.filter((item) item ! child); }; /script style langscss scoped .father_box { display: flex; justify-content: start; width: 100%; .icon_Share_css { text-align: center; margin-top: 15px; color: rgb(151, 151, 151); cursor: pointer; margin-right: 10px; } .icon_Share_css :hover { color: #1363df; } } .icon_height_css { text-align: center; line-height: 30px; margin-top: 15px; color: rgb(151, 151, 151) !important; cursor: pointer; } .icon_height_css :hover { color: red; } .desc__content { margin-left: 10px; margin-right: 10px; width: 100%; :deep .el-textarea__inner { background-color: rgba(246, 246, 246); min-height: 50px; max-height: 200px; } :deep .el-input__wrapper { background-color: rgba(246, 246, 246); } } .adddome { width: 100%; font-size: 12px; line-height: 12px; float: left; display: flex; justify-content: space-between; padding-bottom: 16px; .icon-gengxin { color: #979797; font-size: 15px; margin-right: 0; } .icon-gengxin:hover { color: #1363df; } } .icon-hengxian { font-size: 15px; color: #979797; text-align: center; line-height: 30px; cursor: move; } :deep .el-form-item__error { margin-left: 25px; } .son :deep .el-form-item__error { margin-left: 50px !important; } .prependInput { margin-bottom: 15px; } :deep .el-input-group--prepend .el-input__wrapper, .el-input-group__append { background-color: rgba(246, 246, 246) !important; } :deep .el-input-group__prepend { background-color: rgba(246, 246, 246) !important; } .no-select { user-select: none; } .group_card { .groupChild_card { display: flex; width: 95%; } } .el-form-item { width: 100%; } /style注意点1、拖拽的id必须要有要不然不能进行拖拽2、handle.drag-handle为draggable组件的拖拽盒子的css所以要在导入的icon图标上添加上该className3、且template下方必须只有一个item的slot——必须只有一个子节点4、子维度在父维度内部5、关于图片上父节点与子节点的连线是html手动调整实现所以你们要写的时候需要根据实际情况进行调整!-- 前方样式引导用于连接父节点和子节点的连线-- div style width: 30px; height: 50px; float: left; margin-top: -24px; div styledisplay: flex div :style{ height: groupIndexChild ! group.childInfo.length - 1 ? 40px : 35px, paddingLeft: 7px, borderRight: 1px solid #979797, } /div div style width: 20px; height: 6px; margin-top: 34px; border-left: 1px solid #979797; border-bottom: 1px solid #979797; border-radius: 0 0 0 5px; margin-left: -0.5px; /div /div div style width: 0.5px; height: 10px; background-color: #979797; float: left; margin-left: 7px; v-ifgroupIndexChild ! group.childInfo.length - 1 /div /div