Open selway opened 3 years ago
win10, chrome 87.0.4280.66, vue@2.6.12
https://run.iviewui.com/preview/PG3mLQGc
使用https://www.iviewui.com/docs/guide/install#SL 模板把上面的代码改成html方式,即,
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ViewUI example</title> <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css"> <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script> <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script> </head> <body> <div id="app"> <Row> <i-col span="10" offset="1"> <Card dis-hover> <p slot="title">Payment details</p> <i-form ref="payment" :model="payment" :rules="paymentRules" label-position="top"> <FormItem label="Card Number" prop="number"> <i-input placeholder="Credit Card Number" v-model="payment.number"></i-input> </FormItem> <FormItem label="Expiration" prop="expiration"> <i-input maxlength="5" placeholder="09/24" v-model="payment.expiration"></i-input> </FormItem> <FormItem label="CVV" prop="cvv"> <i-input type="number" maxlength="3" placeholder="123" v-model="payment.cvv"></i-input> </FormItem> <FormItem> <i-button type="primary" :loading="loading" v-on:click="handleSubmit('payment')" long> <span v-if="!loading">Pay With Card</span> <span v-else>Processing...</span> </i-button> </FormItem> </i-form> </Card> </i-col> </Row> </div> <script type="text/javascript"> new Vue({ el: '#app', data: { payment: { number: '', expiration: '', cvv: '' }, paymentRules: { number: [ { required: true, pattern: /^(?:4[0-9]{12}(?:[0-9]{3})?|[25][1-7][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/, message: 'Please enter a valid credit card number', change: 'blur' } ], expiration: [ { required: true, pattern: /(?:0[1-9]|1[0-2])\/[0-9]{2}/, message: 'Please enter a valid expiration date', trigger: 'change' } ], cvv: [ { required: true, pattern: /^\d{3}$/, message: 'Please enter a valid card security code, typically located on the back of your card', trigger: 'change' } ] }, loading: false }, methods: { show: function () { this.visible = true; }, handleSubmit: function (name) { let self = this; this.$refs[name].validate((valid) => { if (!valid) { this.handleError('Please enter valid information!'); return; } }); } } }); </script> </body> </html>
表单label正常显示、表单的原生布局正常生效、表单的验证生效。
表单label不显示、表单的原生布局不正常、表单的验证不生效。
请问你现在解决这个问题了吗?
Form 标签转成 i-form FormItem 标签转成 form-item 可以解决
Environment
win10, chrome 87.0.4280.66, vue@2.6.12
Reproduction link
https://run.iviewui.com/preview/PG3mLQGc
Steps to reproduce
使用https://www.iviewui.com/docs/guide/install#SL 模板把上面的代码改成html方式,即,
What is expected?
表单label正常显示、表单的原生布局正常生效、表单的验证生效。
What is actually happening?
表单label不显示、表单的原生布局不正常、表单的验证不生效。