```
perf(ant-tag.scss): 更新标签样式并增加字体属性更新了.ant-tag的样式,包括:- 将border-radius从2px改为4px- 添加了font-family, font-style和font-weight属性feat(add-raw-material-drawer, edit-raw-material-modal): 增加标签渲染功能 ```
This commit is contained in:
@ -1,4 +1,7 @@
|
|||||||
.ant-tag {
|
.ant-tag {
|
||||||
border-radius: 2px;
|
border-radius: 4px;
|
||||||
border: none;
|
border: none;
|
||||||
|
font-family: $font-family-regular;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<script lang="tsx">
|
<script lang="tsx">
|
||||||
import { Drawer, Button, Upload, Table, Input, Progress, message, Select, Modal } from 'ant-design-vue';
|
import { Drawer, Button, Upload, Table, Input, Progress, message, Select, Modal, Tag, Tooltip } from 'ant-design-vue';
|
||||||
|
|
||||||
const { Column } = Table;
|
const { Column } = Table;
|
||||||
const { TextArea } = Input;
|
const { TextArea } = Input;
|
||||||
@ -379,6 +379,34 @@ export default defineComponent({
|
|||||||
handleTagInputPressEnter(e, record);
|
handleTagInputPressEnter(e, record);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
v-slots={{
|
||||||
|
tagRender: (val) => {
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
} 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<script lang="tsx">
|
<script lang="tsx">
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { Button, Modal, Form, FormItem, Input, message, Select } from 'ant-design-vue';
|
import { Button, Modal, Form, FormItem, Input, message, Select, Tag, Tooltip } from 'ant-design-vue';
|
||||||
|
|
||||||
const { TextArea } = Input;
|
const { TextArea } = Input;
|
||||||
|
|
||||||
@ -111,6 +111,10 @@ export default {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const deleteTag = (tagId) => {
|
||||||
|
form.value.tag_ids = form.value.tag_ids.filter((item) => item !== tagId);
|
||||||
|
};
|
||||||
|
|
||||||
// 添加处理标签输入的函数
|
// 添加处理标签输入的函数
|
||||||
const handleTagInputPressEnter = async (e) => {
|
const handleTagInputPressEnter = async (e) => {
|
||||||
const inputValue = e.target.value.trim();
|
const inputValue = e.target.value.trim();
|
||||||
@ -219,6 +223,34 @@ export default {
|
|||||||
handleTagInputPressEnter(e);
|
handleTagInputPressEnter(e);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
|
v-slots={{
|
||||||
|
tagRender: (val) => {
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
} 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="来源" name="origin">
|
<FormItem label="来源" name="origin">
|
||||||
|
|||||||
Reference in New Issue
Block a user