对象的解构赋值是内部机制,先找回同名属性,再赋值给对应的变量,真正被赋值的是后者。
let node = {
type:'Identifier',
name:'foo',
loc:{
start:{
line:1,
column:1
},
end:{
line:1,
column:4
}
},
method:function(){
console.log('method');
},
range:[0,3]
};
//
let {
loc:{start:start1},
range:[startIndex]
} = node;
//将loc.start 解构值赋给一个start1变量
console.log('@@@@',start1,startIndex);
//将mehtod 函数解构赋给method1 函数变量
let {
method: method1
} = node;
method1()
不难理解
<template>
<a-upload name="file" :showUploadList="false" :customRequest="(file) => handleImportXls(file, getImportUrl, reload)">
<a-button preIcon="ant-design:import-outlined" type="primary">导入</a-button>
</a-upload>
<JImportModal @register="registerModalJimport" :url="getImportUrl" online />
</template>
<script lang="ts" setup>
const [registerModalJimport, {openModal: openModalJimport }] = useModal();
function handleImport() {
//调用函数openModal: <T = any>(visible = true, data?: T, openOnSet = true): void
//设置visible =true 显示弹出框
openModalJimport(true);
}
</script>
useModal.ts
export function useModal(): UseModalReturnType {
const modal = ref<Nullable<ModalMethods>>(null);
const loaded = ref<Nullable<boolean>>(false);
const uid = ref<string>('');
function register(modalMethod: ModalMethods, uuid: string) {
if (!getCurrentInstance()) {
throw new Error('useModal() can only be used inside setup() or functional components!');
}
uid.value = uuid;
isProdMode() &&
onUnmounted(() => {
modal.value = null;
loaded.value = false;
dataTransfer[unref(uid)] = null;
});
if (unref(loaded) && isProdMode() && modalMethod === unref(modal)) return;
modal.value = modalMethod;
loaded.value = true;
modalMethod.emitVisible = (visible: boolean, uid: number) => {
visibleData[uid] = visible;
};
}
const getInstance = () => {
const instance = unref(modal);
if (!instance) {
error('useModal instance is undefined!');
}
return instance;
};
const methods: ReturnMethods = {
setModalProps: (props: Partial<ModalProps>): void => {
getInstance()?.setModalProps(props);
},
getVisible: computed((): boolean => {
return visibleData[~~unref(uid)];
}),
getOpen: computed((): boolean => {
return visibleData[~~unref(uid)];
}),
redoModalHeight: () => {
getInstance()?.redoModalHeight?.();
},
// visible 是否显示
openModal: <T = any>(visible = true, data?: T, openOnSet = true): void => {
getInstance()?.setModalProps({
open: visible,
});
if (!data) return;
const id = unref(uid);
if (openOnSet) {
dataTransfer[id] = null;
dataTransfer[id] = toRaw(data);
return;
}
const equal = isEqual(toRaw(dataTransfer[id]), toRaw(data));
if (!equal) {
dataTransfer[id] = toRaw(data);
}
},
closeModal: () => {
// update-begin--author:liaozhiyang---date:20231218---for:【QQYUN-6366】升级到antd4.x
getInstance()?.setModalProps({ open: false });
// update-end--author:liaozhiyang---date:20231218---for:【QQYUN-6366】升级到antd4.x
},
};
return [register, methods];
}