97 lines
3.7 KiB
Vue
97 lines
3.7 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
||
<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
|
||
<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
|
||
<u--input v-model="model1.userInfo.name" border="none"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="性别" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
|
||
ref="item1">
|
||
<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
|
||
border="none"></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
<u-form-item label="内容" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
|
||
ref="item1">
|
||
<u--textarea v-model="model1.userInfo.namevalue1" placeholder="请输入内容"></u--textarea>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
<u-form-item label="内容" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
|
||
ref="item1">
|
||
<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
|
||
:maxCount="10"></u-upload>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
<u-form-item label="内容" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
|
||
ref="item1">
|
||
<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
|
||
:maxCount="10"></u-upload>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
</u--form>
|
||
<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
|
||
@close="showSex = false" @select="sexSelect">
|
||
</u-action-sheet>
|
||
<button @click="submit">11</button>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
showSex: false,
|
||
model1: {
|
||
userInfo: {
|
||
name: 'uView UI',
|
||
sex: '',
|
||
},
|
||
},
|
||
actions: [{
|
||
name: '男',
|
||
},
|
||
{
|
||
name: '女',
|
||
},
|
||
{
|
||
name: '保密',
|
||
},
|
||
],
|
||
rules: {
|
||
'userInfo.name': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请填写姓名',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'userInfo.sex': {
|
||
type: 'string',
|
||
max: 1,
|
||
required: true,
|
||
message: '请选择男或女',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
},
|
||
radio: '',
|
||
switchVal: false
|
||
};
|
||
},
|
||
methods: {
|
||
sexSelect(e) {
|
||
this.model1.userInfo.sex = e.name
|
||
this.$refs.uForm.validateField('userInfo.sex')
|
||
},
|
||
submit() {
|
||
this.$refs.uForm.validate().then(res => {
|
||
uni.$u.toast('校验通过')
|
||
}).catch(errors => {
|
||
uni.$u.toast('校验失败')
|
||
})
|
||
}
|
||
},
|
||
onReady() {
|
||
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
|
||
this.$refs.uForm.setRules(this.rules)
|
||
},
|
||
};
|
||
</script> |