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 ### Slots
| Name | Description | | Name | Description |
| ---------- | ----------------- | | -------------- | --------------------------- |
| label | Custom label | | label | Custom label |
| input | Custom input | | input | Custom input |
| left-icon | Custom left icon | | left-icon | Custom left icon |
| right-icon | Custom right icon | | right-icon | Custom right icon |
| button | Insert button | | 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 ### Slots
| 名称 | 说明 | | 名称 | 说明 |
| ---------- | ---------------------------------------------------------- | | -------------- | ---------------------------------------------------------- |
| label | 自定义输入框标签 | | label | 自定义输入框 label 标签 |
| input | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 | | input | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 |
| left-icon | 自定义输入框头部图标 | | left-icon | 自定义输入框头部图标 |
| right-icon | 自定义输入框尾部图标 | | right-icon | 自定义输入框尾部图标 |
| button | 自定义输入框尾部按钮 | | button | 自定义输入框尾部按钮 |
| extra `v2.8.2` | 自定义输入框最右侧的额外内容 |
## 常见问题 ## 常见问题

5
src/field/index.js
View File

@ -550,6 +550,11 @@ export default createComponent({
scopedSlots.title = () => Label; scopedSlots.title = () => Label;
} }
const extra = this.slots('extra');
if (extra) {
scopedSlots.extra = () => extra;
}
return ( return (
<Cell <Cell
icon={this.leftIcon} 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> </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`] = ` exports[`render input slot 1`] = `
<div class="van-cell van-field"> <div class="van-cell van-field">
<div class="van-cell__value van-cell__value--alone van-field__value"> <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', () => { test('render input slot', () => {
const wrapper = mount({ const wrapper = mount(Field, {
template: ` scopedSlots: {
<field> input: () => 'Custom Input',
<template v-slot:input>Custom Input</template>
</field>
`,
components: {
Field,
}, },
}); });
@ -218,14 +213,19 @@ test('render input slot', () => {
}); });
test('render label slot', () => { test('render label slot', () => {
const wrapper = mount({ const wrapper = mount(Field, {
template: ` scopedSlots: {
<field label="Default Label"> label: () => 'Custom Label',
<template v-slot:label>Custom Label</template> },
</field> });
`,
components: { expect(wrapper).toMatchSnapshot();
Field, });
test('render extra slot', () => {
const wrapper = mount(Field, {
scopedSlots: {
extra: () => 'Extra',
}, },
}); });

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

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

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

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

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

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

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

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

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

@ -19,14 +19,3 @@ export default {
}, },
}; };
</script> </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>
</div> </div>
<div class="van-hairline--bottom"> <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<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__title van-field__label"><span>选择器</span></div> <div class="van-cell__value van-field__value">
<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 class="van-field__body"><input type="text" name="picker" readonly="readonly" placeholder="点击选择城市" class="van-field__control"></div>
</div>
</div> </div>
<!---->
</div> </div>
<div class="van-hairline--bottom"> <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<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__title van-field__label"><span>时间选择</span></div> <div class="van-cell__value van-field__value">
<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 class="van-field__body"><input type="text" name="datetimePicker" readonly="readonly" placeholder="点击选择时间" class="van-field__control"></div>
</div>
</div> </div>
<!---->
</div> </div>
<div class="van-hairline--bottom"> <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<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__title van-field__label"><span>地区选择</span></div> <div class="van-cell__value van-field__value">
<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 class="van-field__body"><input type="text" name="area" readonly="readonly" placeholder="点击选择省市区" class="van-field__control"></div>
</div>
</div> </div>
<!---->
</div> </div>
<div> <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<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__title van-field__label"><span>日历</span></div> <div class="van-cell__value van-field__value">
<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 class="van-field__body"><input type="text" name="calendar" readonly="readonly" placeholder="点击选择日期" class="van-field__control"></div>
</div>
</div> </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"> <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">
提交 提交