江门地区网站建设公司,网站开发的项目经验,网站头部seo范例,网页报价分享-2023年资深前端进阶#xff1a;前端登顶之巅-最全面的前端知识点梳理总结#xff0c;前端之巅
*分享一个使用比较久的#x1fa9c; 技术框架公司的选型(老项目)#xff1a;vue2 iview-ui 方案的实现思路是共性的#xff0c;展现UI样式需要你们自定义进行更改#…分享-2023年资深前端进阶前端登顶之巅-最全面的前端知识点梳理总结前端之巅
*分享一个使用比较久的 技术框架公司的选型(老项目)vue2 iview-ui 方案的实现思路是共性的展现UI样式需要你们自定义进行更改因为iview是全局注入基本使用原先的类名进行二次创建公共组件修改基础js实现逻辑 需求分析实现远程滚动加载数据的穿梭框 1、创建自定义穿梭框分左侧和右侧数据 2、依赖后端接口左侧是左侧数据右侧是右侧数据 3、定义好出入参数支持回显内容及选中内容的去重处理 4、绑定对应的v-model数据响应 5、滚动加载数据区分左右区域添加自定义指令进行监听 6、滚动加载数据不丢失已选中的数据或去重已选中数据 7、支持左右侧的远程搜索功能左右互不影响检索数据放组件外部进行 1、代码信息 创建ivu-transfer.vue文件依赖iviewUI请依据自己的样式进行拷贝 1.1 自定义滚动监听指令
/** 远程滚动加载 */
import Vue from vueVue.directive(loadTransfer, {bind(el, binding) {const select_dom el.querySelectorAll(.ivu-transfer-list .ivu-transfer-list-content);select_dom.forEach((item, index) {item.addEventListener(scroll, function () {const height this.scrollHeight - this.scrollTop - 1 this.clientHeight;if (height) {binding.value(index)}})})}
})1.2 自定义穿梭框代码
templatediv classivu-transferdivclassivu-transfer-list:style{width: listStyle.width,height: listStyle.height}div classivu-transfer-list-headerCheckbox:valuecheckLeftAllon-changehandleAllLeftCheck/Checkboxspan classivu-transfer-list-header-title源列表/spanspan classivu-transfer-list-header-count{{ leftDataSource.length }}/span/divdiv classivu-transfer-list-bodydiv classivu-transfer-list-contentCheckboxGroup v-modelcheckLeftAllGroupCheckbox:keyindex:labelitem.valueclassivu-transfer-list-content-itemv-for(item, index) in leftDataSource{{item.label ${item.description ? - ${item.description} : }}}/Checkbox/CheckboxGroupdivv-if!leftDataSource.lengthclassivu-transfer-list-content-not-found列表为空/div/div/div/divdiv classivu-transfer-operationButtonsizesmalltypeprimaryiconios-arrow-backclickhandleClickArrowBack:disabled!checkRightAllGroup.length/ButtonButtonsizesmalltypeprimaryiconios-arrow-forwardclickhandleClickArrowForward:disabled!checkLeftAllGroup.length/Button/divdivclassivu-transfer-list:style{width: listStyle.width,height: listStyle.height}div classivu-transfer-list-headerCheckbox:valuecheckRightAllon-changehandleAllRightCheck/Checkboxspan classivu-transfer-list-header-title目的列表/spanspan classivu-transfer-list-header-count{{ rightDataSource.length }}/span/divdiv classivu-transfer-list-bodydiv classivu-transfer-list-contentCheckboxGroup v-modelcheckRightAllGroupCheckbox:keyindex:labelitem.valueclassivu-transfer-list-content-itemv-for(item, index) in rightDataSource{{item.label ${item.description ? - ${item.description} : }}}/Checkbox/CheckboxGroupdivv-if!rightDataSource.lengthclassivu-transfer-list-content-not-found列表为空/div/div/div/div/div
/templatescript
const methods {// 点击左侧全选handleAllLeftCheck() {this.checkLeftAll !this.checkLeftAll;if (this.checkLeftAll) {this.checkLeftAllGroup this.leftDataSource.map(item item.value);} else {this.checkLeftAllGroup [];}},// 点击右侧全选handleAllRightCheck() {this.checkRightAll !this.checkRightAll;if (this.checkRightAll) {this.checkRightAllGroup this.rightDataSource.map(item item.value);} else {this.checkRightAllGroup [];}},// 点击向右数据handleClickArrowBack() {this.moveCheckedData(left);},// 点击向左数据handleClickArrowForward() {this.moveCheckedData(right);},moveCheckedData(direction) {const newLeftDataSource [];const newRightDataSource [];const dataSource direction left ? this.rightDataSource : this.leftDataSource;dataSource.forEach(item {const index direction left? this.checkRightAllGroup.indexOf(item.value): this.checkLeftAllGroup.indexOf(item.value);if (index ! -1) {direction left? newLeftDataSource.push(item): newRightDataSource.push(item);} else {direction left? newRightDataSource.push(item): newLeftDataSource.push(item);}});this.leftDataSource direction left? [...this.leftDataSource, ...newLeftDataSource]: newLeftDataSource;this.rightDataSource direction left? newRightDataSource: [...this.rightDataSource, ...newRightDataSource];this.checkLeftAll false;this.checkRightAll false;this.checkLeftAllGroup [];this.checkRightAllGroup [];this.$emit(on-change, this.leftDataSource, this.rightDataSource, direction);},filterDataMethods() {const rightValues new Set(this.rightDataSource.map(opt opt.value));this.leftDataSource this.leftDataSource.filter(item !rightValues.has(item.value));this.$nextTick(() {const leftValues new Set(this.leftDataSource.map(opt opt.value));this.rightDataSource this.rightDataSource.filter(opt !leftValues.has(opt.value));});}
};export default {props: {listStyle: {type: Object,default: () ({width: 250px,height: 380px})},leftData: {type: Array,require: true,default: () []},rightData: {type: Array,require: true,default: () []}},data() {return {checkLeftAll: false,checkRightAll: false,checkRightAllGroup: [],checkLeftAllGroup: [],leftDataSource: [],rightDataSource: []};},watch: {leftData(newVal) {this.leftDataSource newVal;this.filterDataMethods();},rightData(newVal) {this.rightDataSource newVal || [];this.filterDataMethods();}},mounted() {this.$nextTick(() {this.$emit(on-change, this.leftDataSource, this.rightDataSource);})},methods
};
/scriptstyle langless scoped
.ivu-transfer-list-content-item {width: 100%;margin-left: -0.3em;
}.ivu-transfer-list-content-not-found {display: block;
}
/style2、内容使用api介绍 1、树形结构入参dataSource[{label: 测试,value: 1, description: 拼接内容 }] 2、标签引用IvuTransfer :leftDatadataSource :rightDatatargetKeys on-changehandleChange v-loadTransferhandleLoadMore / 3、相关api说明文档在文章底部 templatediv classcustomSearchInputsearchclearablev-modelformLeftInputplaceholder请输入搜索内容on-clearhandleOnLeftInputon-searchhandleOnLeftInput/div stylewidth: 50px/divInputsearchclearablev-modelformRightInputplaceholder请输入搜索内容on-clearhandleOnRightInputon-searchhandleOnRightInput//divIvuTransfer:leftDatadataSource:rightDatatargetKeyson-changehandleChangev-loadTransferhandleLoadMore//template
// 远程滚动加载handleLoadMore(index) {if (index 0 this.dataLeftHasMore !this.isShowLoading) {this.curLeftPage;this.getLeftMockData();}if (index 1 this.dataRightHasMore !this.rightLoading) {this.curRightPage;this.getRightTargetKeys();}},// 触发选中移动handleChange(newLeftTargetData, newRightTargetKeys, direction) {this.dataSource [...newLeftTargetData];this.targetKeys [...newRightTargetKeys];if (direction right) {return this.remoteCheckPage();}if (direction left) {return this.remoteRightCheckPage();}},getLeftData() {},
getRightData() {}参数说明类型默认值必填项leftData[{}]-label,value结构Array[][]是rightData[{}]-label,value结构Array[][]是on-change数据变更触发newLeftnewRight, direction无否
