atui
Version:
components built with Vue.js
91 lines (81 loc) • 3.04 kB
Markdown
---
order: 0
title:
zh-CN: 横向排列
en-US: Type
---
## zh-CN
## en-US
````jsx
<v-form action="aaa.do" method="post">
<form-item label="联系人电话:" item-col="8" label-col="10">
<v-input type="text" placeholder="电话号码"></v-input>
</form-item>
<form-item label="联系人电话:" item-col="8" label-col="10">
<v-input type="text" placeholder="电话号码"></v-input>
</form-item>
<form-item label="联系人电话:" item-col="8" label-col="10">
<v-input type="text" placeholder="电话号码"></v-input>
</form-item>
<form-item label="联系人电话:" item-col="8" label-col="10">
<v-input type="text" placeholder="电话号码"></v-input>
</form-item>
<form-item label="联系人电话:" item-col="8" label-col="10">
<v-input type="text" placeholder="电话号码"></v-input>
</form-item>
<form-item label="联系人电话:" item-col="8" label-col="10">
<v-input type="text" placeholder="电话号码"></v-input>
</form-item>
<form-item required label="联系人电话:" :valid-status="telStatus" item-col="8" label-col="10" has-icon tips="123">
<v-input type="text" placeholder="电话号码" :valid-status="telStatus" :value="tel" @click.native="clickFun"></v-input>
</form-item>
<form-item required label="应用名/网站名:" item-col="8" label-col="10">
<v-input type="text" placeholder="若还未上线可填无"></v-input>
</form-item>
<form-item required label="行业:" item-col="8" label-col="10">
<v-select :value="arr" :options="industry" :close-on-select="true"></v-select>
</form-item>
<form-item required label="电话号码:" item-col="8" label-col="10">
<v-input placeholder="请输入电话号码"></v-input>
</form-item>
<form-item required label="电话号码:" valid-status="error" has-icon item-col="8" label-col="10" tips="请输入有效的电话号码">
<v-input valid-status="error" placeholder="请输入电话号码"></v-input>
</form-item>
<form-item required label="电话号码:" valid-status="success" has-icon item-col="8" label-col="10" tips="请输入有效的电话号码">
<v-input valid-status="success" placeholder="请输入电话号码"></v-input>
</form-item>
<form-item required label-col="0">
<label><input type="checkbox" />阅读并接受《用户协议》</label>
</form-item>
<form-item required label-col="4">
<v-button type="submit" primary @click.native="validFun" style="margin-right: 10px;">确定</v-button><v-button type="reset" tertiary value="重置条件"></v-button>
</form-item>
</v-form>
````
````vue-script
new Vue({
el: 'body',
components: {
vForm: atui.Form,
formItem: atui.Form.FormItem,
vInput: atui.Input,
vSelect: atui.Select,
vButton: atui.Button,
vButton: atui.Button,
datePicker: atui.DatePicker
},
data:{
username: '',
tel: '',
arr: [],
telStatus: 'success',
industry: []
},
methods: {
clickFun: function(){
},
validFun: function(){
}
}
})
````