网站注册协议模板,网站的优化是什么,个人简介网站html代码,免费邮箱登录163登录分享-2023年高级前端进阶#xff1a;前端登顶之巅-最全面的前端知识点总结站点
*分享一个使用比较久的#x1fa9c; 技术框架公司的选型#xff1a;uni-app uni-ui vue3 vite4 ts 需求分析#xff1a;微信小程序-uni-ui内容 1、创建一个自定义的下拉#xff0c;支持多…分享-2023年高级前端进阶前端登顶之巅-最全面的前端知识点总结站点
*分享一个使用比较久的 技术框架公司的选型uni-app uni-ui vue3 vite4 ts 需求分析微信小程序-uni-ui内容 1、创建一个自定义的下拉支持多个内容的同时多选 2、定义好出入参数支持回显内容等 3、绑定对应的v-model数据响应 1、代码信息
templateview tabindex1 refcustomSelectRef classuni-select click.stophandleClickDivviewtemplate v-ifmodelLabel.lengthspan classcustom-tag :keyindex v-for(item, index) in modelLabelspan{{ item }}/span/span/templatespan classcustom-tag v-ifmodelLabel.length checkList.length - maxLength 0 {{ checkList.length - maxLength }}/spanspan v-if!modelLabel.length classcus_placeholder{{ placeholder }}/spanimgclassicon-deletev-ifmodelLabel.lengthclick.stophandleRemove:src../../static/icons/delete.png//viewtransitionview classcus_select_background refcusSelectDropdown v-ifisShowDropdown clickhandleMemoryview classcus_tabs :keyindex v-for(item, index) in cusDataListCheckedtemplate v-ifitem.childrenview classcus_tabs_title{{ item.text }}/viewview classcus_tabs_bodyuni-data-checkboxmodetag:multiplemultiplev-modelitem.checkList:localdataitem.childrenchange(val) handleCheckedChange(val, item)/uni-data-checkbox/view/template/view/view/transitionview v-ifisShowDropdown classcustom_mask/view/view
/templatescript setup langts
import { watch } from vue;
import { toRaw } from vue;
import { ref, onMounted, nextTick, onBeforeMount } from vue;const props withDefaults(defineProps{dataSource: any;modelValue?: any;placeholder?: string;multiple?: boolean;maxLength?: number;}(),{multiple: true,dataSource: [],modelValue: [],maxLength: 3,placeholder: 请选择,}
);const emit defineEmits([update:modelValue, change]);const customSelectRef ref();const cusSelectDropdown ref();const modelLabel refRecordstring, any[]([]);const checkList refstring[]([]);const cusDataListChecked refRecordstring, any[]([]);const isShowDropdown refboolean(false);const isShowDownMemory refboolean(false);const handleClickDiv () {isShowDropdown.value isShowDownMemory.value ? true : !isShowDropdown.value;isShowDownMemory.value false;
};const handleMemory () {isShowDownMemory.value true;
};const handleCheckedChange (e: Recordstring, any, row: Recordstring, any) {const { data } e.detail;row.checkLabel data.map((opt) opt.text);getModelVal();
};const getModelVal () {const newValue toRaw(cusDataListChecked.value);const newLabel newValue.map((item) item.checkLabel);const newModelVal newValue.map((item) item.checkList);const deconstructLabel newLabel?.flat();const deconstructVal newModelVal?.flat();modelLabel.value deconstructLabel.slice(0, props.maxLength);checkList.value deconstructVal;emit(update:modelValue, newModelVal);
};const handleRemove (e) {modelLabel.value [];checkList.value [];if (isShowDropdown.value) {isShowDropdown.value false;}if (props.multiple) {cusDataListChecked.value addCheckProperties(props.dataSource);}emit(update:modelValue, []);
};const addCheckProperties (treeData) {let result [];result JSON.parse(JSON.stringify(treeData));result.forEach((node) {const child node.children;node.checkList [];node.checkLabel [];if (child child.length 0) {addCheckProperties(child);}});return result;
};const findTreeChecked (treeData) {const newLabel [];const val toRaw(props.modelValue);treeData.forEach((node, index) {if (node.children?.length) {const child node.children;const bool child.some((opt) {const isExist val[index] val[index].includes(opt.value);isExist ? newLabel.push(opt.text) : void null;return isExist;});if (bool) {node.checkLabel newLabel;node.checkList val[index];}}});return treeData;
};watch(isShowDropdown, (newVal) {emit(change, newVal, props.modelValue)
})onBeforeMount(() {if (props.multiple) {cusDataListChecked.value addCheckProperties(props.dataSource);}
});onMounted(async () {await nextTick();if (props.multiple props.modelValue.length) {cusDataListChecked.value findTreeChecked(cusDataListChecked.value);getModelVal();}
});
/scriptstyle langscss scoped
.uni-select {font-size: 14px;border: 1px solid #e5e5e5;box-sizing: border-box;border-radius: 4px;padding: 0 5px 0 10px;position: relative;display: flex;user-select: none;flex-direction: row;align-items: center;border-bottom: solid 1px #e5e5e5;width: 100%;flex: 1;height: 35px;position: relative;
}.cus_placeholder {color: #6a6a6a;font-size: 12px;
}.icon-delete {position: absolute;width: 18px;height: 18px;right: 5px;margin-top: 3.5px;z-index: 10;
}.cus_select_background {width: 95vw;max-height: 260px;box-sizing: border-box;border-radius: 4px;font-size: 13px;color: #606266;background: #ffffff;border: 1px solid #e4e7ed;position: absolute;top: 40px;left: 0px;padding: 5px 8px;z-index: 10;
}.cus_tabs {margin-bottom: 8px;.cus_tabs_title {font-weight: 600;margin-bottom: 4px;}.cus_tabs_body {margin-left: 12px;}
}.custom-tag {color: #909399;display: inline-flex;justify-content: center;align-items: center;height: 24px;padding: 0 9px;line-height: 1;border-radius: 4px;white-space: nowrap;font-size: 13px;margin-right: 5px;background-color: #f0f2f5;
}.custom_mask {position: fixed;top: 0;bottom: 0;left: 0;right: 0;z-index: 1;display: flex;justify-content: center;align-items: center;
}
/style2、使用api介绍 1、树形结构入参dataSource[{ ext: 服务器状态, children: [{ text: 在线, value: 0}]}] 2、标签引用ivuSelect :maxLength2 refivuSelectRef v-modelcustomSelect :dataSourcedeviceDataList stylewidth: 100%; margin-left: 5px / 3、相关api说明文档在文章底部 参数说明类型默认值必填项dataSource[{}]-label,value;树形结构Array[][]是modelValue当前选中项内容Array[]否placeholder输入框内容String请输入否multiple是否开启多选Booleanfalse否maxLength输入框最大标签长度Number3否
