vur iview 表单提交数据
下载module$ npm install --save iview在main导入import iView from 'iview' // 引入iview依赖import 'iview/dist/styles/iview.css' // 引入iview css样式Vue.use(iView) //使用iview组件登录页面调用 v-model 绑定数据 :r...
·
下载module
$ npm install --save iview
在main导入
import iView from 'iview' // 引入iview依赖
import 'iview/dist/styles/iview.css' // 引入iview css样式
Vue.use(iView) //使用iview组件
登录页面调用 v-model 绑定数据 :rules 没有输入或者输入错误时候的提示
<Form ref="formInline" :model="formInline" :rules="ruleInline">
<FormItem prop="user">
<Input type="text" v-model="formInline.user" placeholder="Username" />
<Icon type="ios-person-outline" slot="prepend"></Icon>
</FormItem>
<FormItem prop="password">
<Input type="password" v-model="formInline.password" placeholder="Password" />
<Icon type="ios-lock-outline" slot="prepend"></Icon>
</FormItem>
<FormItem>
<button class="submit" type="primary" :loading="loading" @click="handleSubmit('formInline')">登入</button>
</FormItem>
</Form>
data中的参数
return {
// input1: "",
// input2: ""
formInline: {
user: '',
password: ''
},
ruleInline: { // 输入错误时的提示
user: [{
required: true,
message: '请输入用户名',
trigger: 'blur'
}],
password: [{
required: true,
message: '请输入密码',
trigger: 'blur'
},
{
type: 'string',
min: 5,
message: '密码长度不能小于6位',
trigger: 'blur'
}
]
},
loading: false
};
点击登录后的方法
handleSubmit(name) {
this.$refs[name].validate((valid) => {
if(valid){
// 提交数据代码
}
});
});
}
更多推荐
已为社区贡献1条内容
所有评论(0)