1.公共组件DropDown加上一个限制文本宽度的配置属性
2.在切换租户的下拉列表中引入DropDown时传入限定宽度的配置。
This commit is contained in:
@ -7,6 +7,7 @@
|
||||
:selectedKeys="selectedKeys"
|
||||
@menu-event="handleMenuEvent"
|
||||
overlayClassName="app-locale-picker-overlay"
|
||||
maxTextWidth=200
|
||||
>
|
||||
<span class="cursor-pointer flex items-center" style="margin-left: 10px;">
|
||||
<Icon icon="ant-design:apartment-outlined" size="18" style="color:#222222"/>
|
||||
@ -59,6 +60,9 @@
|
||||
formInfo.value.tenants.forEach((o) => {
|
||||
o.text = o.name;
|
||||
o.event = o.code;
|
||||
if(formInfo.value.tenantCode==o.code){
|
||||
o.icon="ant-design:check-outlined";
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
</a-popconfirm>
|
||||
<template v-else>
|
||||
<Icon :icon="item.icon" v-if="item.icon" />
|
||||
<span class="ml-1">{{ item.text }}</span>
|
||||
<span class="ml-1" :style="getStyle">{{ item.text }}</span>
|
||||
</template>
|
||||
</a-menu-item>
|
||||
<a-menu-divider v-if="item.divider" :key="`d-${item.event}`" />
|
||||
@ -70,6 +70,9 @@
|
||||
type: Array as PropType<string[]>,
|
||||
default: () => [],
|
||||
},
|
||||
maxTextWidth:{
|
||||
type: [Number, String]
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['menuEvent']);
|
||||
@ -93,4 +96,12 @@
|
||||
});
|
||||
|
||||
const getAttr = (key: string | number) => ({ key });
|
||||
|
||||
const getStyle = computed(() => {
|
||||
if(props.maxTextWidth){
|
||||
return { maxWidth: `${props.maxTextWidth}`.replace(/px/, '') + 'px',display:'inline-block',overflow: 'hidden', textOverflow:'ellipsis', whiteSpace: 'nowrap',lineHeight:'100%'};
|
||||
}else{
|
||||
return {};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user