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