You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
2.0 KiB
70 lines
2.0 KiB
<template> |
|
<div> |
|
<a-form style="max-width: 500px; margin: 40px auto 0;"> |
|
<a-form-item |
|
label="付款账户" |
|
:labelCol="{span: 5}" |
|
:wrapperCol="{span: 19}" |
|
> |
|
<a-select value="1" placeholder="ant-design@alipay.com"> |
|
<a-select-option value="1">ant-design@alipay.com</a-select-option> |
|
</a-select> |
|
</a-form-item> |
|
<a-form-item |
|
label="收款账户" |
|
:labelCol="{span: 5}" |
|
:wrapperCol="{span: 19}" |
|
> |
|
<a-input-group :compact="true" style="display: inline-block; vertical-align: middle"> |
|
<a-select defaultValue="alipay" style="width: 100px"> |
|
<a-select-option value="alipay">支付宝</a-select-option> |
|
<a-select-option value="wexinpay">微信</a-select-option> |
|
</a-select> |
|
<a-input :style="{width: 'calc(100% - 100px)'}" value="test@example.com"/> |
|
</a-input-group> |
|
</a-form-item> |
|
<a-form-item |
|
label="收款人姓名" |
|
:labelCol="{span: 5}" |
|
:wrapperCol="{span: 19}" |
|
> |
|
<a-input value="Alex" /> |
|
</a-form-item> |
|
<a-form-item |
|
label="转账金额" |
|
:labelCol="{span: 5}" |
|
:wrapperCol="{span: 19}" |
|
> |
|
<a-input prefix="￥" value="5000" /> |
|
</a-form-item> |
|
<a-form-item :wrapperCol="{span: 19, offset: 5}"> |
|
<a-button type="primary" @click="nextStep">下一步</a-button> |
|
</a-form-item> |
|
</a-form> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import AForm from 'ant-design-vue/es/form/Form' |
|
import AFormItem from 'ant-design-vue/es/form/FormItem' |
|
import AButton from 'ant-design-vue/es/button/button' |
|
import ASelect from 'ant-design-vue/es/select/index' |
|
import AInputGroup from 'ant-design-vue/es/input/Group' |
|
import AInput from 'ant-design-vue/es/input/Input' |
|
|
|
const ASelectOption = ASelect.Option |
|
|
|
export default { |
|
name: 'Step1', |
|
components: {AInput, AInputGroup, ASelectOption, ASelect, AButton, AFormItem, AForm}, |
|
methods: { |
|
nextStep () { |
|
this.$emit('nextStep') |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped> |
|
|
|
</style>
|
|
|