```
style(ant-select.scss): 更新复选样式和标签样式在`ant-select.scss`文件中添加了复选相关的样式，并对`.ant-tag`元素进行了详细的样式定义，包括内边距、边框半径、背景色等。同时调整了`.ant-tag .anticon-close`的字体大小。 refactor(index.vue): 修改标签组件的渲染逻辑 - 在`add-raw-material-drawer/index.vue`和`edit-raw-material-modal/index.vue`中移除了`maxTagTextLength`属性。 - 为长标签增加了包裹`div`，并调整了其样式。 - 对于超过5个字符的标签文本，使用`Tooltip`显示完整内容，并截断显示前5个字符后加上省略号。 - 调整了`table/index.vue`中标签的渲染方式，对于长度超过5个字符的标签使用`Tooltip`展示完整内容。 - 在`add-raw-material-drawer/style.scss`中注释掉了`.ant-select-selection-overflow-item`的最大宽度设置。 ```
This commit is contained in:
rd
@ -74,6 +74,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 复选
|
||||
&.ant-select-multiple {
|
||||
.ant-select-selector {
|
||||
height: fit-content !important;
|
||||
@ -92,6 +93,22 @@
|
||||
color: #737478;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tag {
|
||||
padding: 1px 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--BG-300, #E6E6E8);
|
||||
color: var(--Text-1, #211F24);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
|
||||
.anticon-close {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -119,6 +136,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tag {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -367,7 +367,6 @@ export default defineComponent({
|
||||
showSearch
|
||||
showArrow
|
||||
maxTagCount={5}
|
||||
maxTagTextLength={5}
|
||||
options={tagData.value}
|
||||
optionFilterProp="name"
|
||||
field-names={{ label: 'name', value: 'id' }}
|
||||
@ -384,25 +383,29 @@ export default defineComponent({
|
||||
const { label, value } = val;
|
||||
if (label.length > 5) {
|
||||
return (
|
||||
<Tooltip title={label}>
|
||||
<Tag
|
||||
closable
|
||||
onClose={() => (record.tag_ids = record.tag_ids.filter((item) => item !== value))}
|
||||
class="bg-#F2F3F5 rounded-4px mr-0 px-8px !color-#55585F"
|
||||
>
|
||||
{label.slice(0, 5) + '...'}
|
||||
</Tag>
|
||||
</Tooltip>
|
||||
<div class="my-2px">
|
||||
<Tooltip title={label}>
|
||||
<Tag
|
||||
closable
|
||||
onClose={() => (record.tag_ids = record.tag_ids.filter((item) => item !== value))}
|
||||
class="mr-0 !color-#55585F h-20px !lh-20px !text-12px"
|
||||
>
|
||||
{label.slice(0, 5) + '...'}
|
||||
</Tag>
|
||||
</Tooltip>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Tag
|
||||
closable
|
||||
onClose={() => (record.tag_ids = record.tag_ids.filter((item) => item !== value))}
|
||||
class="bg-#F2F3F5 rounded-4px mr-0 px-8px !color-#55585F"
|
||||
>
|
||||
{label}
|
||||
</Tag>
|
||||
<div class="my-2px">
|
||||
<Tag
|
||||
closable
|
||||
onClose={() => (record.tag_ids = record.tag_ids.filter((item) => item !== value))}
|
||||
class="mr-0 !color-#55585F h-20px !lh-20px !text-12px"
|
||||
>
|
||||
{label}
|
||||
</Tag>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
@ -9,9 +9,9 @@
|
||||
}
|
||||
|
||||
.ant-select {
|
||||
.ant-select-selection-overflow-item {
|
||||
max-width: 50%;
|
||||
}
|
||||
//.ant-select-selection-overflow-item {
|
||||
// max-width: 50%;
|
||||
//}
|
||||
}
|
||||
|
||||
.ant-drawer-body {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script lang="tsx">
|
||||
import { ref } from 'vue';
|
||||
import { Button, Modal, Form, FormItem, Input, message, Select, Tag, Tooltip } from 'ant-design-vue';
|
||||
import TextOverTips from '@/components/text-over-tips';
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
@ -203,7 +204,7 @@ export default {
|
||||
<Select
|
||||
value={form.value.tag_ids}
|
||||
mode="multiple"
|
||||
size="middle"
|
||||
size="large"
|
||||
placeholder="请选择标签"
|
||||
allowClear
|
||||
autoClearSearchValue
|
||||
@ -213,7 +214,6 @@ export default {
|
||||
maxTagCount={5}
|
||||
optionFilterProp="name"
|
||||
options={tagOptions.value}
|
||||
maxTagTextLength={5}
|
||||
field-names={{ label: 'name', value: 'id' }}
|
||||
onChange={handleTagChange}
|
||||
onInputKeyDown={(e) => {
|
||||
@ -228,25 +228,29 @@ export default {
|
||||
const { label, value } = val;
|
||||
if (label.length > 5) {
|
||||
return (
|
||||
<Tooltip title={label}>
|
||||
<Tag
|
||||
closable
|
||||
onClose={() => (form.value.tag_ids = form.value.tag_ids.filter((item) => item !== value))}
|
||||
class="bg-#F2F3F5 rounded-4px mr-0 px-8px !color-#55585F"
|
||||
>
|
||||
{label.slice(0, 5) + '...'}
|
||||
</Tag>
|
||||
</Tooltip>
|
||||
<div class="my-2px">
|
||||
<Tooltip title={label}>
|
||||
<Tag
|
||||
closable
|
||||
onClose={() => (form.value.tag_ids = form.value.tag_ids.filter((item) => item !== value))}
|
||||
class="mr-0"
|
||||
>
|
||||
{`${label.slice(0, 5)}...`}
|
||||
</Tag>
|
||||
</Tooltip>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Tag
|
||||
closable
|
||||
onClose={() => (form.value.tag_ids = form.value.tag_ids.filter((item) => item !== value))}
|
||||
class="bg-#F2F3F5 rounded-4px mr-0 px-8px !color-#55585F"
|
||||
>
|
||||
{label}
|
||||
</Tag>
|
||||
<div class="my-2px">
|
||||
<Tag
|
||||
closable
|
||||
onClose={() => (form.value.tag_ids = form.value.tag_ids.filter((item) => item !== value))}
|
||||
class=" mr-0 "
|
||||
>
|
||||
{label}
|
||||
</Tag>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
@ -52,12 +52,11 @@
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'tags'" #customRender="{ record }">
|
||||
<div class="flex flex-wrap gap-4px">
|
||||
<Tag
|
||||
v-for="tag in record.tags"
|
||||
:key="tag.id"
|
||||
class="mr-0 h-22px lh-22px rounded-4px bg-#F2F3F5 max-w-76px px-8px"
|
||||
>
|
||||
<TextOverTips :context="tag.name" :line="1" class="cts !color-#55585F" />
|
||||
<Tag v-for="tag in record.tags" :key="tag.id" class="mr-0 rounded-4px bg-#F2F3F5 px-8px">
|
||||
<Tooltip v-if="tag.name.length > 5" :title="tag.name">
|
||||
<span class="cts !color-#55585F !lh-20px"> {{ `${tag.name.slice(0, 5)}...` }} </span>
|
||||
</Tooltip>
|
||||
<span v-else class="cts !color-#55585F !lh-20px"> {{ tag.name }} </span>
|
||||
</Tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user