mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
fix(Field): label-align top works well with label-width (#11684)
* fix(Field): label-align top works well with label-width * fix(Field): update snapshot * fix(Field): break long label when `labelAlign="top"`
This commit is contained in:
Jungzl
GitHub
parent
07c0e3e9da
commit
1c1e2e3b27
@ -45,6 +45,10 @@ program
|
||||
'--runInBand',
|
||||
'Run all tests serially in the current process, rather than creating a worker pool of child processes that run tests'
|
||||
)
|
||||
.option(
|
||||
'--updateSnapshot',
|
||||
'Re-record every snapshot that fails during this test run'
|
||||
)
|
||||
.option('--debug', 'Print debugging info about your Jest config')
|
||||
.action(async (options) => {
|
||||
const { test } = await import('./commands/jest.js');
|
||||
|
||||
@ -24,6 +24,7 @@ export function test(command: Config.Argv) {
|
||||
clearCache: command.clearCache,
|
||||
changedSince: command.changedSince,
|
||||
logHeapUsage: command.logHeapUsage,
|
||||
updateSnapshot: command.updateSnapshot,
|
||||
// make jest tests faster
|
||||
// see: https://ivantanev.com/make-jest-faster/
|
||||
maxWorkers: '50%',
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
"build:site": "vant-cli build-site",
|
||||
"release": "cp ../../README.md ./ && vant-cli release && rm ./README.md",
|
||||
"release:site": "pnpm build:site && npx gh-pages -d site-dist --add",
|
||||
"test:update": "vant-cli test --updateSnapshot",
|
||||
"test:watch": "vant-cli test --watch",
|
||||
"test:coverage": "open test/coverage/index.html"
|
||||
},
|
||||
|
||||
@ -434,7 +434,8 @@ export default defineComponent({
|
||||
|
||||
const labelStyle = computed(() => {
|
||||
const labelWidth = getProp('labelWidth');
|
||||
if (labelWidth) {
|
||||
const labelAlign = getProp('labelAlign');
|
||||
if (labelWidth && labelAlign !== 'top') {
|
||||
return { width: addUnit(labelWidth) };
|
||||
}
|
||||
});
|
||||
@ -571,6 +572,8 @@ export default defineComponent({
|
||||
};
|
||||
|
||||
const renderLabel = () => {
|
||||
const labelWidth = getProp('labelWidth');
|
||||
const labelAlign = getProp('labelAlign');
|
||||
const colon = getProp('colon') ? ':' : '';
|
||||
|
||||
if (slots.label) {
|
||||
@ -578,7 +581,15 @@ export default defineComponent({
|
||||
}
|
||||
if (props.label) {
|
||||
return (
|
||||
<label id={`${id}-label`} for={getInputId()}>
|
||||
<label
|
||||
id={`${id}-label`}
|
||||
for={getInputId()}
|
||||
style={
|
||||
labelAlign === 'top' && labelWidth
|
||||
? { width: addUnit(labelWidth) }
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{props.label + colon}
|
||||
</label>
|
||||
);
|
||||
|
||||
@ -6,14 +6,20 @@ import { useTranslate } from '../../../docs/site';
|
||||
|
||||
const t = useTranslate({
|
||||
'zh-CN': {
|
||||
text: '手机号',
|
||||
text: '文本',
|
||||
top: '顶部对齐',
|
||||
center: '居中对齐',
|
||||
left: '左对齐',
|
||||
right: '右对齐',
|
||||
labelAlign: '输入框文本位置',
|
||||
alignPlaceHolder: '请输入手机号',
|
||||
},
|
||||
'en-US': {
|
||||
text: 'Tel',
|
||||
text: 'Text',
|
||||
top: 'Top Align',
|
||||
center: 'Center Align',
|
||||
left: 'Left Align',
|
||||
right: 'Right Align',
|
||||
labelAlign: 'Label Align',
|
||||
alignPlaceHolder: 'Please input tel number',
|
||||
},
|
||||
});
|
||||
|
||||
@ -26,9 +32,27 @@ const value = ref('');
|
||||
<van-field
|
||||
v-model="value"
|
||||
:label="t('text')"
|
||||
:placeholder="t('alignPlaceHolder')"
|
||||
:placeholder="t('top')"
|
||||
label-align="top"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value"
|
||||
:label="t('text')"
|
||||
:placeholder="t('left')"
|
||||
label-align="left"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value"
|
||||
:label="t('text')"
|
||||
:placeholder="t('center')"
|
||||
label-align="center"
|
||||
/>
|
||||
<van-field
|
||||
v-model="value"
|
||||
:label="t('text')"
|
||||
:placeholder="t('right')"
|
||||
label-align="right"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
@ -23,15 +23,6 @@
|
||||
.van-field {
|
||||
flex-wrap: wrap;
|
||||
|
||||
&--label {
|
||||
&-top {
|
||||
.van-field__value {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
flex: none;
|
||||
box-sizing: border-box;
|
||||
@ -50,7 +41,11 @@
|
||||
}
|
||||
|
||||
&--top {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin-bottom: var(--van-padding-base);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
&--required {
|
||||
|
||||
@ -424,7 +424,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Tel
|
||||
Text
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
@ -432,7 +432,64 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Please input tel number"
|
||||
placeholder="Top Align"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field van-field--label-left">
|
||||
<div class="van-cell__title van-field__label van-field__label--left">
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Text
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Left Align"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field van-field--label-center">
|
||||
<div class="van-cell__title van-field__label van-field__label--center">
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Text
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Center Align"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field van-field--label-right">
|
||||
<div class="van-cell__title van-field__label van-field__label--right">
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
>
|
||||
Text
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
placeholder="Right Align"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
|
||||
@ -162,6 +162,25 @@ exports[`should render label-width prop correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-cell van-field van-field--label-top">
|
||||
<div class="van-cell__title van-field__label van-field__label--top">
|
||||
<label id="van-field-label"
|
||||
for="van-field-input"
|
||||
style="width: 10vw;"
|
||||
>
|
||||
Label
|
||||
</label>
|
||||
</div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body">
|
||||
<input type="text"
|
||||
id="van-field-input"
|
||||
class="van-field__control"
|
||||
aria-labelledby="van-field-label"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
|
||||
@ -243,6 +243,7 @@ test('should render label-width prop correctly', () => {
|
||||
<Form labelWidth="5rem">
|
||||
<Field label="Label" />
|
||||
<Field label="Label" labelWidth="10vw" />
|
||||
<Field label="Label" labelWidth="10vw" labelAlign="top" />
|
||||
</Form>
|
||||
);
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user