blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(Field): add extra slot (#6290)

Browse Source 
* feat(Field): add extra slot

* docs: remove form demo style
This commit is contained in:
neverland 2020-05-16 11:18:08 +08:00 committed by GitHub
parent 5c8d1d2420
commit 6870bdcbc2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 124 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/field/README.md
View File

@ -268,10 +268,11 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Field instance and call instance
### Slots
| Name | Description |
| ---------- | ----------------- |
| label | Custom label |
| input | Custom input |
| left-icon | Custom left icon |
| right-icon | Custom right icon |
| button | Insert button |
| Name | Description |
| -------------- | --------------------------- |
| label | Custom label |
| input | Custom input |
| left-icon | Custom left icon |
| right-icon | Custom right icon |
| button | Insert button |
| extra `v2.8.2` | Custom content on the right |

15
src/field/README.zh-CN.md
View File

@ -293,13 +293,14 @@ export default {
### Slots
| 名称 | 说明 |
| ---------- | ---------------------------------------------------------- |
| label | 自定义输入框标签 |
| input | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 |
| left-icon | 自定义输入框头部图标 |
| right-icon | 自定义输入框尾部图标 |
| button | 自定义输入框尾部按钮 |
| 名称 | 说明 |
| -------------- | ---------------------------------------------------------- |
| label | 自定义输入框 label 标签 |
| input | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 |
| left-icon | 自定义输入框头部图标 |
| right-icon | 自定义输入框尾部图标 |
| button | 自定义输入框尾部按钮 |
| extra `v2.8.2` | 自定义输入框最右侧的额外内容 |
## 常见问题

5
src/field/index.js
View File

@ -550,6 +550,11 @@ export default createComponent({
scopedSlots.title = () => Label;
}
const extra = this.slots('extra');
if (extra) {
scopedSlots.extra = () => extra;
}
return (
<Cell
icon={this.leftIcon}

8
src/field/test/__snapshots__/index.spec.js.snap
View File

@ -79,6 +79,14 @@ exports[`reach max word-limit 1`] = `
</div>
`;
exports[`render extra slot 1`] = `
<div class="van-cell van-field">
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body"><input type="text" class="van-field__control"></div>
</div>Extra
</div>
`;
exports[`render input slot 1`] = `
<div class="van-cell van-field">
<div class="van-cell__value van-cell__value--alone van-field__value">

32
src/field/test/index.spec.js
View File

@ -203,14 +203,9 @@ test('clearable', () => {
});
test('render input slot', () => {
const wrapper = mount({
template: `
<field>
<template v-slot:input>Custom Input</template>
</field>
`,
components: {
Field,
const wrapper = mount(Field, {
scopedSlots: {
input: () => 'Custom Input',
},
});
@ -218,14 +213,19 @@ test('render input slot', () => {
});
test('render label slot', () => {
const wrapper = mount({
template: `
<field label="Default Label">
<template v-slot:label>Custom Label</template>
</field>
`,
components: {
Field,
const wrapper = mount(Field, {
scopedSlots: {
label: () => 'Custom Label',
},
});
expect(wrapper).toMatchSnapshot();
});
test('render extra slot', () => {
const wrapper = mount(Field, {
scopedSlots: {
extra: () => 'Extra',
},
});

29
src/form/demo/FieldTypeArea.vue
View File

@ -1,23 +1,26 @@
<template>
<div class="van-hairline--bottom">
<van-field
readonly
clickable
name="area"
:value="value"
:border="false"
:label="t('picker')"
:placeholder="t('placeholder')"
@click="showArea = true"
/>
<van-popup v-model="showArea" position="bottom">
<van-field
readonly
clickable
name="area"
:value="value"
:label="t('picker')"
:placeholder="t('placeholder')"
@click="showArea = true"
>
<van-popup
v-model="showArea"
slot="extra"
position="bottom"
get-container="body"
>
<van-area
:area-list="t('areaList')"
@confirm="onConfirm"
@cancel="onCancel"
/>
</van-popup>
</div>
</van-field>
</template>
<script>

26
src/form/demo/FieldTypeCalendar.vue
View File

@ -1,16 +1,20 @@
<template>
<div>
<van-field
readonly
clickable
name="calendar"
:value="value"
:label="t('calendar')"
:placeholder="t('placeholder')"
@click="showCalendar = true"
<van-field
readonly
clickable
name="calendar"
:value="value"
:label="t('calendar')"
:placeholder="t('placeholder')"
@click="showCalendar = true"
>
<van-calendar
v-model="showCalendar"
slot="extra"
get-container="body"
@confirm="onConfirm"
/>
<van-calendar v-model="showCalendar" @confirm="onConfirm" />
</div>
</van-field>
</template>
<script>

29
src/form/demo/FieldTypeDatetimePicker.vue
View File

@ -1,23 +1,26 @@
<template>
<div class="van-hairline--bottom">
<van-field
readonly
clickable
name="datetimePicker"
:value="value"
:border="false"
:label="t('label')"
:placeholder="t('placeholder')"
@click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
<van-field
readonly
clickable
name="datetimePicker"
:value="value"
:label="t('label')"
:placeholder="t('placeholder')"
@click="showPicker = true"
>
<van-popup
v-model="showPicker"
slot="extra"
position="bottom"
get-container="body"
>
<van-datetime-picker
type="time"
@confirm="onConfirm"
@cancel="onCancel"
/>
</van-popup>
</div>
</van-field>
</template>
<script>

29
src/form/demo/FieldTypePicker.vue
View File

@ -1,16 +1,19 @@
<template>
<div class="van-hairline--bottom">
<van-field
readonly
clickable
name="picker"
:value="value"
:border="false"
:label="t('picker')"
:placeholder="t('placeholder')"
@click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
<van-field
readonly
clickable
name="picker"
:value="value"
:label="t('picker')"
:placeholder="t('placeholder')"
@click="showPicker = true"
>
<van-popup
v-model="showPicker"
slot="extra"
position="bottom"
get-container="body"
>
<van-picker
show-toolbar
:columns="t('textColumns')"
@ -18,7 +21,7 @@
@cancel="onCancel"
/>
</van-popup>
</div>
</van-field>
</template>
<script>

11
src/form/demo/index.vue
View File

@ -19,14 +19,3 @@ export default {
},
};
</script>
<style lang="less">
.demo-form {
width: 100vw;
overflow: hidden;
.van-hairline--bottom::after {
margin-left: 16px;
}
}
</style>

44
src/form/test/__snapshots__/demo.spec.js.snap
View File

@ -184,41 +184,29 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
</div>
<div class="van-hairline--bottom">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-field">
<div class="van-cell__title van-field__label"><span>选择器</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body"><input type="text" name="picker" readonly="readonly" placeholder="点击选择城市" class="van-field__control"></div>
</div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__title van-field__label"><span>选择器</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body"><input type="text" name="picker" readonly="readonly" placeholder="点击选择城市" class="van-field__control"></div>
</div>
<!---->
</div>
<div class="van-hairline--bottom">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-field">
<div class="van-cell__title van-field__label"><span>时间选择</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body"><input type="text" name="datetimePicker" readonly="readonly" placeholder="点击选择时间" class="van-field__control"></div>
</div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__title van-field__label"><span>时间选择</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body"><input type="text" name="datetimePicker" readonly="readonly" placeholder="点击选择时间" class="van-field__control"></div>
</div>
<!---->
</div>
<div class="van-hairline--bottom">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-field">
<div class="van-cell__title van-field__label"><span>地区选择</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body"><input type="text" name="area" readonly="readonly" placeholder="点击选择省市区" class="van-field__control"></div>
</div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__title van-field__label"><span>地区选择</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body"><input type="text" name="area" readonly="readonly" placeholder="点击选择省市区" class="van-field__control"></div>
</div>
<!---->
</div>
<div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__title van-field__label"><span>日历</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body"><input type="text" name="calendar" readonly="readonly" placeholder="点击选择日期" class="van-field__control"></div>
</div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__title van-field__label"><span>日历</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body"><input type="text" name="calendar" readonly="readonly" placeholder="点击选择日期" class="van-field__control"></div>
</div>
<!---->
</div>
<div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">
提交