blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

feat(Search): id prop add default value (#9884)

Browse Source
This commit is contained in:
neverland 2021-11-16 22:06:51 +08:00 committed by GitHub
parent c1bdba5213
commit 5bd31a7759
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 23 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/vant/src/search/README.md
View File

@ -122,7 +122,7 @@ Use `action` slot to custom right button, `cancel` event will no longer be Emitt
| label | Left side label | _string_ | - |
| name `v3.2.3` | As the identifier when submitting the form | _string_ | - |
| shape | Shape of field, can be set to `round` | _string_ | `square` |
| id `v3.2.2` | Input id, the for attribute of the label also will be set | _string_ | - |
| id `v3.2.2` | Input id, the for attribute of the label also will be set | _string_ | `van-search-n-input` |
| background | Background color of field | _string_ | `#f2f2f2` |
| maxlength | Max length of value | _number \| string_ | - |
| placeholder | Placeholder | _string_ | - |

2
packages/vant/src/search/README.zh-CN.md
View File

@ -134,7 +134,7 @@ export default {
| label | 搜索框左侧文本 | _string_ | - |
| name `v3.2.3` | 名称，作为提交表单时的标识符 | _string_ | - |
| shape | 搜索框形状，可选值为 `round` | _string_ | `square` |
| id `v3.2.2` | 搜索框 id，同时会设置 label 的 for 属性 | _string_ | - |
| id `v3.2.2` | 搜索框 id，同时会设置 label 的 for 属性 | _string_ | `van-search-n-input` |
| background | 搜索框外部背景色 | _string_ | `#f2f2f2` |
| maxlength | 输入的最大字符数 | _number \| string_ | - |
| placeholder | 占位提示文字 | _string_ | - |

10
packages/vant/src/search/Search.tsx
View File

@ -12,6 +12,7 @@ import {
import { fieldSharedProps } from '../field/Field';
// Composables
import { useId } from '../composables/use-id';
import { useExpose } from '../composables/use-expose';
// Components
@ -42,6 +43,7 @@ export default defineComponent({
emits: ['search', 'cancel', 'update:modelValue'],
setup(props, { emit, slots, attrs }) {
const id = useId();
const filedRef = ref<FieldInstance>();
const onCancel = () => {
@ -59,10 +61,12 @@ export default defineComponent({
}
};
const getInputId = () => props.id || `${id}-input`;
const renderLabel = () => {
if (slots.label || props.label) {
return (
<label class={bem('label')} for={props.id}>
<label class={bem('label')} for={getInputId()}>
{slots.label ? slots.label() : props.label}
</label>
);
@ -93,7 +97,9 @@ export default defineComponent({
>;
const renderField = () => {
const fieldAttrs = extend({}, attrs, pick(props, fieldPropNames));
const fieldAttrs = extend({}, attrs, pick(props, fieldPropNames), {
id: getInputId(),
});
const onInput = (value: string) => emit('update:modelValue', value);

16
packages/vant/src/search/test/__snapshots__/demo.spec.ts.snap
View File

@ -12,7 +12,7 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="search"
id="van-field-input"
id="van-search-input"
class="van-field__control"
placeholder="Placeholder"
>
@ -34,7 +34,7 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="search"
id="van-field-input"
id="van-search-input"
class="van-field__control"
placeholder="Placeholder"
>
@ -62,7 +62,7 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="search"
id="van-field-input"
id="van-search-input"
class="van-field__control van-field__control--center"
placeholder="Placeholder"
>
@ -83,7 +83,7 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="search"
id="van-field-input"
id="van-search-input"
class="van-field__control"
disabled
placeholder="Placeholder"
@ -107,7 +107,7 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="search"
id="van-field-input"
id="van-search-input"
class="van-field__control"
placeholder="Placeholder"
>
@ -120,7 +120,9 @@ exports[`should render demo and match snapshot 1`] = `
<div>
<div class="van-search van-search--show-action">
<div class="van-search__content van-search__content--square">
<label class="van-search__label">
<label class="van-search__label"
for="van-search-input"
>
Address
</label>
<div class="van-cell van-cell--borderless van-field van-search__field">
@ -131,7 +133,7 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="search"
id="van-field-input"
id="van-search-input"
class="van-field__control"
placeholder="Placeholder"
>

6
packages/vant/src/search/test/__snapshots__/index.spec.ts.snap
View File

@ -10,7 +10,9 @@ exports[`should render action text when using action-text prop 1`] = `
`;
exports[`should render label slot correctly 1`] = `
<label class="van-search__label">
<label class="van-search__label"
for="van-search-input"
>
Custom Label
</label>
`;
@ -34,7 +36,7 @@ exports[`should render left slot correctly 1`] = `
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body">
<input type="search"
id="van-field-input"
id="van-search-input"
class="van-field__control"
>
</div>