div.panel
h3| form
div.margin-10
r-form(
label-width="70",
:model="formItem",
:rules="ruleValidate",
ref="myForm"
)
r-form-item(
label="输入框",
prop="input",
required,
ref="myFormInput"
)
r-input(
v-model="formItem.input",
placeholder="请输入",
trim
)
r-form-item(label="选择器", prop="select", v-if="boool")
r-select(
v-model="formItem.select",
clearable,
)
r-select-option(label="北京市", value="0")
r-select-option(label="上海市", value="1")
r-select-option(label="深圳市", value="2")
r-form-item(label="日期控件")
div(style="display:flex; align-items:baseline")
r-form-item(prop="date")
r-datepicker(v-model="formItem.date", clearable)
span(style="flex-basis:50px;text-align:center") -
r-form-item(prop="time")
r-timepicker(v-model="formItem.time", clearable)
r-form-item(label="单选框", prop="radio")
r-radio-group(v-model="formItem.radio")
r-radio(label="男", value="male")
r-radio(label="女", value="remale")
r-form-item(label="多选框", prop="checkbox")
r-checkbox-group(v-model="formItem.checkbox")
r-checkbox(label="吃饭", value="吃饭")
r-checkbox(label="睡觉", value="睡觉")
r-checkbox(label="跑步", value="跑步")
r-checkbox(label="看电影", value="看电影")
r-form-item(label="文本域")
r-input(
v-model="formItem.textarea",
type="textarea"
)
r-form-item(label="异步验证", prop="ajaxValue")
r-input(
v-model="formItem.ajaxValue"
)
r-form-item(
v-for="(item, index) in formItem.tels.items",
:key="index",
:label="'电话' + (index + 1)",
:prop="'tels.items[' + index + '].value'",
:rules="[{validate: required, msg:'不能为空'}]"
)
r-row()
r-col()
r-input(
v-model="item.value"
)
r-col(offset="1")
r-button(
type="danger",
size="small",
@click.native="delTel(item)"
)| 删除
r-form-item(style="margin-left: 70px;")
r-button(
type="primary",
@click.native="addTel"
)| 添加电话
r-form-item(prop="images", required, label="上传图片")
r-upload(
v-model="formItem.images",
action="//jsonplaceholder.typicode.com/posts/",
:on-success="onSuccess",
:on-error="onError",
list-type="image"
)
r-button(icon="ios-cloud-upload-outline")| 上传文件
r-form-item(style="margin-left: 70px;")
r-button(
@click.native="reset"
)| reset
r-button(
style="margin-left: 8px",
type="primary",
@click.native="submit")| 提交