fix: search input box length overflow (#217)

This commit is contained in:
Lykin 2024-04-03 14:47:04 +08:00
parent fc67590bde
commit 8ab82534e1
5 changed files with 23 additions and 11 deletions

View File

@ -100,7 +100,7 @@ defineExpose({
</script> </script>
<template> <template>
<n-input-group> <n-input-group style="overflow: hidden">
<slot name="prepend" /> <slot name="prepend" />
<n-input <n-input
v-model:value="inputData.filter" v-model:value="inputData.filter"
@ -175,10 +175,22 @@ defineExpose({
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
//:deep(.n-input__prefix) { :deep(.n-input) {
// max-width: 50%; width: 100%;
//} overflow: hidden;
//:deep(.n-tag__content) { }
// overflow: hidden;
//} :deep(.n-input__prefix) {
max-width: 50%;
& > div {
overflow: hidden;
text-overflow: ellipsis;
}
}
:deep(.n-tag__content) {
overflow: hidden;
max-width: 100%;
}
</style> </style>

View File

@ -335,7 +335,7 @@ defineExpose({
<div class="content-wrapper flex-box-v"> <div class="content-wrapper flex-box-v">
<slot name="toolbar" /> <slot name="toolbar" />
<div class="tb2 value-item-part flex-box-h"> <div class="tb2 value-item-part flex-box-h">
<div class="flex-box-h"> <div class="flex-box-h" style="max-width: 50%">
<content-search-input <content-search-input
ref="searchInputRef" ref="searchInputRef"
@filter-changed="onFilterInput" @filter-changed="onFilterInput"

View File

@ -309,7 +309,7 @@ defineExpose({
<div class="content-wrapper flex-box-v"> <div class="content-wrapper flex-box-v">
<slot name="toolbar" /> <slot name="toolbar" />
<div class="tb2 value-item-part flex-box-h"> <div class="tb2 value-item-part flex-box-h">
<div class="flex-box-h"> <div class="flex-box-h" style="max-width: 50%">
<content-search-input <content-search-input
ref="searchInputRef" ref="searchInputRef"
@filter-changed="onFilterInput" @filter-changed="onFilterInput"

View File

@ -306,7 +306,7 @@ defineExpose({
<div class="content-wrapper flex-box-v"> <div class="content-wrapper flex-box-v">
<slot name="toolbar" /> <slot name="toolbar" />
<div class="tb2 value-item-part flex-box-h"> <div class="tb2 value-item-part flex-box-h">
<div class="flex-box-h"> <div class="flex-box-h" style="max-width: 50%">
<content-search-input <content-search-input
ref="searchInputRef" ref="searchInputRef"
@filter-changed="onFilterInput" @filter-changed="onFilterInput"

View File

@ -341,7 +341,7 @@ defineExpose({
<div class="content-wrapper flex-box-v"> <div class="content-wrapper flex-box-v">
<slot name="toolbar" /> <slot name="toolbar" />
<div class="tb2 value-item-part flex-box-h"> <div class="tb2 value-item-part flex-box-h">
<div class="flex-box-h"> <div class="flex-box-h" style="max-width: 50%">
<content-search-input <content-search-input
ref="searchInputRef" ref="searchInputRef"
@filter-changed="onFilterInput" @filter-changed="onFilterInput"