-
Notifications
You must be signed in to change notification settings - Fork 140
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(pro:tag-select): tag data edit and create should be validated (#1931
- Loading branch information
Showing
10 changed files
with
187 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
order: 3 | ||
title: | ||
zh: 校验标签label输入 | ||
en: Validate tag label input | ||
--- | ||
|
||
## zh | ||
|
||
使用 `tagLabelValidator` 校验标签的输入,可以用于校验创建的标签输入以及标签修改的内容是否合法,并显示错误提示。 | ||
|
||
## en | ||
|
||
Validate tag label input via `tagLabelValidator`, in doing so, created tag input and tag label edit input is validated and error meassages will be disaplayed. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,79 @@ | ||
<template> | ||
<IxProTagSelect | ||
v-model:value="selectedValue" | ||
placeholder="请选择标签" | ||
:dataSource="tagSelectData" | ||
:tagLabelValidator="tagLabelValidator" | ||
:onTagDataRemove="handleTagDataRemove" | ||
:onTagDataAdd="handleTagDataAdd" | ||
:onTagDataChange="handleTagDataChange" | ||
style="width: 336px" | ||
> | ||
<template #removeConfirmTitle="{ label }"> 确定删除“{{ label }}”标签吗? </template> | ||
<template #removeConfirmContent> 操作说明 </template> | ||
</IxProTagSelect> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { ref } from 'vue' | ||
import { TagSelectData } from '@idux/pro/tag-select' | ||
const selectedValue = ref<string[]>([]) | ||
const tagSelectData = ref<TagSelectData[]>([ | ||
{ | ||
key: 'emphasis', | ||
label: '重点关注', | ||
color: 'yellow', | ||
}, | ||
{ | ||
key: 'alarm', | ||
label: '告警标签', | ||
color: 'blue', | ||
}, | ||
{ | ||
key: 'track', | ||
label: '持续追踪', | ||
color: 'blue', | ||
}, | ||
{ | ||
key: 'care-and-track', | ||
label: '持续关注并追踪', | ||
color: 'green', | ||
}, | ||
{ | ||
key: 'keeps-alarm', | ||
label: '持续告警', | ||
color: 'red', | ||
}, | ||
]) | ||
const tagLabelValidator = (input: string) => { | ||
if (!input) { | ||
return '不能为空' | ||
} | ||
if (/[%+-.]/.test(input)) { | ||
return '不能输入特殊字符' | ||
} | ||
return | ||
} | ||
const handleTagDataRemove = (data: TagSelectData) => { | ||
tagSelectData.value = tagSelectData.value.filter(d => d.key !== data.key) | ||
} | ||
const handleTagDataAdd = (data: TagSelectData) => { | ||
tagSelectData.value.push(data) | ||
} | ||
const handleTagDataChange = (data: TagSelectData) => { | ||
const index = tagSelectData.value.findIndex(d => d.key === data.key) | ||
if (index < 0) { | ||
return | ||
} | ||
tagSelectData.value.splice(index, 1, data) | ||
} | ||
</script> | ||
|
||
<style scoped lang="less"></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters