可以做拟合的在线网站,网站小视频怎么做代理,北辰天津网站建设,网店美工需要掌握哪些软件分享-2023年资深前端进阶#xff1a;前端登顶之巅-最全面的前端知识点梳理总结
*分享一个使用比较久的#x1fa9c; 需求分析#xff1a; 1、实现一个区域下拉选项与现有ui组件库不同#xff0c;支持多选、单选需求 2、支持选中区域后-全选中当前区域下的所有城市信息 3、…分享-2023年资深前端进阶前端登顶之巅-最全面的前端知识点梳理总结
*分享一个使用比较久的 需求分析 1、实现一个区域下拉选项与现有ui组件库不同支持多选、单选需求 2、支持选中区域后-全选中当前区域下的所有城市信息 3、只能选中当前一个区域的内的城市其余城市禁用 扩展思路 1、封装公共组件或者封装在组件库内 2、出入参相关api透明好理解 3、支持单选或者多选支持只选择当前区域下的城市或者全面区域下的城市 4、在原有的element plus下进行扩展延伸满足需求 5、缺陷未做maxLength-标签最大展示的api这个按需自己修改一下就行 1、第一种模式显示区域信息 2、第二种模式只展示城市内容
1、相关开发代码篇 创建文件custom-select.vue文件复制copy当下代码 使用方式 1、外部入参例如城市dataSource[{ label: 华北value: 华东, children: [{ label: 山东,value: shandong}]]树形结构 2、标签引用custom-select :disabledtrue :multileveltrue height32 v-modelcheckGroup :dataSourcecityList/custom-select 3、相关api说明文档在文章底部 templatedivtabindex1refcustomSelectRefclickhandleClickDivmouseenterhandelMouseEntermouseleavehandleMouseLeave:style{ width: modelLabel modelValue?.length ? 166px : 100px, height: (height px) || 25px }:class[custom-select_contaniner-i, isShowDropdown custom-select_background]divspan v-ifmodelLabel classcustom-tagspan{{ modelLabel }}/spaniclasscustom_tag_deletemouseenterhandelIconMouseEntermouseleavehandleIconMouseLeaveclick.stophandleDeleteIconsvgv-if!ishShowIconDeleteTextt1678090923023classiconviewBox0 0 1024 1024version1.1xmlnshttp://www.w3.org/2000/svgp-id6709width11height11pathdM263.802377 224.219482a7.964444 7.964444 0 0 1 11.263425 0l236.934198 236.934198 236.934198-236.934198a7.964444 7.964444 0 0 1 11.263425 0l39.582895 39.582895a7.964444 7.964444 0 0 1 0 11.263425l-236.934198 236.934198 236.934198 236.934198a7.964444 7.964444 0 0 1 0 11.263425l-39.582895 39.582895a7.964444 7.964444 0 0 1-11.263425 0l-236.934198-236.934198-236.934198 236.934198a7.964444 7.964444 0 0 1-11.263425 0l-39.582895-39.582895a7.964444 7.964444 0 0 1 0-11.263425l236.934198-236.934198-236.934198-236.934198a7.964444 7.964444 0 0 1 0-11.263425l39.582895-39.582895zfill#8a8a8ap-id6710//svgsvgv-elset1678091410677classiconviewBox0 0 1024 1024version1.1xmlnshttp://www.w3.org/2000/svgp-id6936width22height22pathdM479.072 512l-98.72-98.72c-9.152-9.152-9.088-23.84 0-32.928 9.152-9.152 23.84-9.088 32.928 0l98.72 98.72 98.72-98.72c9.152-9.152 23.84-9.088 32.928 0 9.152 9.152 9.088 23.84 0 32.928l-98.72 98.72 98.72 98.72c9.152 9.152 9.088 23.84 0 32.928-9.152 9.152-23.84 9.088-32.928 0l-98.72-98.72-98.72 98.72c-9.152 9.152-23.84 9.088-32.928 0-9.152-9.152-9.088-23.84 0-32.928l98.72-98.72zM512 837.824c179.936 0 325.824-145.888 325.824-325.824s-145.888-325.824-325.824-325.824c-179.936 0-325.824 145.888-325.824 325.824s145.888 325.824 325.824 325.824zfill#B7B8B9p-id6937//svg/i/spanspan v-ifmodelLabel modelValue?.length 1 classcustom-tag {{ modelValue.length - 1 }}/spanspan v-if!modelLabel classcus_placeholder{{ placeholder }}/span/divi classarrow-top-icon v-if!isShowIconRemove || !modelLabel :class[!isShowDropdown arrow-top-icon-active]svg viewBox0 0 1024 1024 xmlnshttp://www.w3.org/2000/svgpathfillcurrentColordM831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z//svg/ii classremove-icon v-ifisShowIconRemove modelLabel click.stophandleRemovesvgt1678084213981classiconviewBox0 0 1024 1024version1.1xmlnshttp://www.w3.org/2000/svgp-id4480width11height11pathdM512 32c265.097 0 480 214.903 480 480S777.097 992 512 992 32 777.097 32 512 246.903 32 512 32z m0 64C282.25 96 96 282.25 96 512s186.25 416 416 416 416-186.25 416-416S741.75 96 512 96z m169.706 246.294c12.496 12.497 12.496 32.758 0 45.255L557.256 512l124.45 124.452c12.496 12.497 12.496 32.758 0 45.255-12.497 12.496-32.758 12.496-45.255 0L512 557.254 387.549 681.706c-12.497 12.496-32.758 12.496-45.255 0-12.496-12.497-12.496-32.758 0-45.255l124.452-124.452-124.452-124.45c-12.496-12.497-12.496-32.758 0-45.255 12.497-12.496 32.758-12.496 45.255 0l124.452 124.45 124.45-124.45c12.497-12.496 32.758-12.496 45.255 0zfill#8a8a8ap-id4481//svg/i/divtransitiondivv-ifisShowDropdownrefcusSelectDropdownclasscus_select_background:style{ minWidth: popperOffestWidth px, zIndex: 99999 }div v-ifmultilevel stylepadding: 5px 20px;div :keykey v-for(opt, key) in cusDataListChecked classmultilevel_boxel-checkboxstylewidth: 60px;v-modelopt.checkAllchangehandleCheckAllChange($event, opt):indeterminateopt.isIndeterminate:disableddisabled checkList.length ? !opt.checkList.length : false{{ opt.label }}/el-checkboxel-checkbox-group v-modelopt.checkListv-ifopt.childrenchangehandleCheckedCitiesChange($event, opt)styledisplay: inline-block; padding-left: 20px el-checkbox :labelitem.value stylewidth: 60px:keyindex Math.random() v-for(item, index) in opt.children :disableddisabled checkList.length ? !opt.checkList.length : false{{ item.label }}/el-checkbox/el-checkbox-group/div/divdiv classcus_select_contaniner v-elsediv classcus_select_left中国/divdiv classcus_select_rightel-checkbox-group v-modelcheckList changehandelCheckGroupstyledisplay: inline-block; padding-left: 20px el-checkbox :keyindex :labelitem.value stylewidth: 60pxv-for(item, index) in dataSource {{ item.label }}/el-checkbox/el-checkbox-group/div/divspan classel-popper__arrow data-popper-arrow styleposition: absolute; left: 140px;/span/div/transition
/template
script setup langts
import { createPopper } from popperjs/core
import { ref, onMounted, nextTick, watch, onUnmounted, toRaw, onBeforeMount, computed } from vueconst props withDefaults(defineProps{height?: string | numberdataSource: anymodelValue?: anyplaceholder?: stringmultilevel?: booleandisabled?: boolean}(),{height: 25,disabled: false,multilevel: false,dataSource: [],modelValue: [],placeholder: 请选择}
)const emit defineEmits([update:modelValue])const customSelectRef ref()const cusSelectDropdown ref()const cusDataListChecked refany[]([])const checkList refstring[]([])const popperOffestWidth refnumber(0)const isShowDropdown refboolean(false)const modelLabel refstring()const isShowIconRemove refboolean(false)const ishShowIconDeleteText refboolean(false)const handleClickDiv () {isShowDropdown.value !isShowDropdown.value
}const handelCheckGroup (value) {const obj props.dataSource.filter((item) item.value value[0])[0]modelLabel.value obj?.labelemit(update:modelValue, value)
}const handelMouseEnter () {isShowIconRemove.value true
}const handleMouseLeave () {isShowIconRemove.value false
}const handleRemove () {modelLabel.value checkList.value []if (isShowDropdown.value) {isShowDropdown.value false}if (props.multilevel) {cusDataListChecked.value addCheckProperties(props.dataSource)}emit(update:modelValue, [])
}const handleDeleteIcon () {isShowDropdown.value falsecheckList.value.splice(0, 1)if (props.multilevel) return cusDataListChecked.value findTreeChecked(cusDataListChecked.value)const info toRaw(checkList.value)[0]const obj props.dataSource.filter((item) item.value info)[0]modelLabel.value obj?.label ||
}const handelIconMouseEnter () {ishShowIconDeleteText.value true
}const handleIconMouseLeave () {ishShowIconDeleteText.value false
}// 点击某个DOM元素之外的方法
const handlerDocClick (event) {const isSelf customSelectRef.value?.contains(event.target) || cusSelectDropdown.value?.contains(event.target)if (!isSelf) {isShowDropdown.value false}
}/*** 展示区域省份的逻辑* */
const handleCheckAllChange (bool: any, option) {const allCity option.children ? option.children.map(item item.value) : [option.value]bool ? option.checkList allCity : option.checkList []option.isIndeterminate falsecheckList.value option.checkListconst newLabelArr option.children ? option.children.filter(item checkList.value.includes(item.value)) : checkList.value?.length ? [{ label: 默认 }] : []modelLabel.value newLabelArr?.[0]?.label || emit(update:modelValue, checkList.value)
}const handleCheckedCitiesChange (value: any[], option) {const checkedCount value.lengthconst allCity option.children ? option.children.map(item item.value) : [option.value]option.checkAll checkedCount allCity.lengthoption.isIndeterminate checkedCount 0 checkedCount allCity.lengthcheckList.value option.checkListconst newLabelArr option.children ? option.children.filter(item checkList.value.includes(item.value)) : checkList.value?.length ? [{ label: 默认 }] : []modelLabel.value newLabelArr?.[0]?.label || emit(update:modelValue, checkList.value)
}const addCheckProperties (treeData) {let result []result JSON.parse(JSON.stringify(treeData))result.forEach(node {const child node.children;node.checkAll false;node.isIndeterminate false;node.checkList [];if (child child.length 0) {addCheckProperties(child);}});return result
}const findTreeChecked (treeData) {let newLabelconst val toRaw(checkList.value)const defaultBool val.some(item item.includes(default))treeData.forEach(node {if (node.children?.length) {const child node.children;const bool child.some(opt val.includes(opt.value))!newLabel ? newLabel child.filter(item val.includes(item.value))[0] : void nullif (bool) {node.checkAll val.length child?.length;node.isIndeterminate val.length 0 val.length child?.length;node.checkList val;} else {node.isIndeterminate false}}})treeData[0].isIndeterminate false;treeData[0].checkAll defaultBool ? true : false;treeData[0].checkList defaultBool ? [default] : [];modelLabel.value defaultBool ? 默认 : newLabel?.label || return treeData
}watch([customSelectRef, cusSelectDropdown],() {if (customSelectRef.value cusSelectDropdown.value) {createPopper(customSelectRef.value, cusSelectDropdown.value, {placement: bottom,modifiers: [{name: offset,options: {offset: [80, 8]}}]})}},{deep: true,immediate: true}
)watch(props.modelValue,(newval) {if (!newval || !newval.length) returncheckList.value props.modelValueif (props.multilevel) returnconst obj props.dataSource.filter((item) item.value newval[0])[0]modelLabel.value obj?.label},{deep: true,immediate: true}
)onBeforeMount(() {if (props.multilevel) {cusDataListChecked.value addCheckProperties(props.dataSource)}
})onMounted(async () {await nextTick()popperOffestWidth.value customSelectRef.value.offsetWidthdocument.addEventListener(click, handlerDocClick, true)if (props.multilevel props.modelValue.length) { cusDataListChecked.value findTreeChecked(cusDataListChecked.value)}
})onUnmounted(() {document.removeEventListener(click, handlerDocClick, true)
})
/scriptscript langts
export default { name: CustomSelect }
/scriptstyle langscss scoped
.v-enter-active,
.v-leave-active {transition: opacity 0.5s ease;
}.v-enter-from,
.v-leave-to {opacity: 0;
}.custom-select_contaniner-i {width: 100%;height: 25px;padding: 7px 9px;padding-left: 5px;border-radius: 4px;line-height: 1;cursor: pointer;position: relative;user-select: none;word-wrap: break-word;word-break: break-all;font-size: 13px;flex-grow: 1;display: inline-flex;align-items: center;box-sizing: border-box;justify-content: space-between;color: var(--el-input-text-color, var(--el-text-color-regular));background-color: var(--el-input-bg-color, var(--el-fill-color-blank));box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
}.custom-tag {color: var(--el-color-info);display: inline-flex;justify-content: center;align-items: center;height: 18px;padding: 0 9px;line-height: 1;border-radius: 4px;white-space: nowrap;font-size: 12px;background-color: var(--el-fill-color);
}.custom_tag_delete {width: 18px;margin-left: 5px;font-size: 0px;border-radius: 50%;display: flex;justify-content: center;align-items: center;cursor: pointer;color: var(--el-color-info);
}.custom-tag:first-child {margin-right: 6px;padding-right: 4px;
}.arrow-top-icon {width: 14px;transform: rotateX(-180deg);color: var(--el-text-color-placeholder);
}.remove-icon {margin-top: 2px;color: var(--el-text-color-placeholder);
}.arrow-top-icon-active {transform: rotateX(0deg);
}.custom-select:hover {box-shadow: 0 0 0 1px var(--el-border-color-hover) inset;
}.custom-select:focus {outline: none;box-shadow: 0 0 0 1px var(--el-color-primary) inset;
}.custom-select_background {box-shadow: 0 0 0 1px var(--el-color-primary) inset;
}::-webkit-scrollbar {width: 4px;height: 4px;background-color: transparent;
}/*滚动条的轨道*/
::-webkit-scrollbar-track {background-color: transparent;
}/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb {border-radius: 8px;background-color: rgba(0, 0, 0, 0.1);box-shadow: inset 0 0 2px rgba(#000000, 0.04);
}/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button {height: 0;background-color: transparent;
}.cus_select_contaniner {padding: 5px 10px;display: flex;
}.cus_select_left {width: 60px;margin-top: 5px;
}.cus_select_right {flex: 1;width: 480px;
}.cus_select_background {min-height: 200px;box-sizing: border-box;border-radius: 4px;font-size: var(--el-font-size-base);color: var(--el-text-color-regular);background: var(--el-bg-color-overlay);border: 1px solid var(--el-border-color-light);.multilevel_box {display: flex; padding: 5px; border-bottom: 1px solid #e4e7ed;}.multilevel_box:last-child {border-bottom: none;}
}.cus_placeholder {color: var(--el-text-color-placeholder);
}.el-popper__arrow {top: -5px;
}.el-popper__arrow {position: absolute;width: 10px;height: 10px;z-index: -1;
}.el-popper__arrow::before {border: 1px solid var(--el-border-color-light);background: var(--el-bg-color-overlay);right: 0;border-bottom-color: transparent!important;border-right-color: transparent!important;
}
/style2、组件-相关api说明
参数说明类型默认值必填项height输入框的高度String/Number25否dataSource[{}]-label,value;树形结构Array[][]是modelValue当前选中项内容Array[]否placeholder输入框内容String请输入否multilevel是否开启跨层级模式Booleanfalse否disabled是否开启跨层级禁用Booleanfalse否
