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.
71 lines
2.0 KiB
71 lines
2.0 KiB
7 years ago
|
<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>
|
||
|
7 years ago
|
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'
|
||
|
7 years ago
|
|
||
|
|
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>
|