|
|
@@ -5,55 +5,243 @@
|
|
|
*@version: V1.0.5
|
|
|
*/
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <u-form :model="form" ref="uForm">
|
|
|
- <u-form-item label="标题"><u-input v-model="form.titleName" /></u-form-item>
|
|
|
- </u-form>
|
|
|
+ <view>
|
|
|
+ <uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext" class="uniForm">
|
|
|
+ <uni-group title="基本信息" top="0">
|
|
|
+ <uni-forms-item name="name" required label="标题">
|
|
|
+ <uni-easyinput type="text" :inputBorder="true" v-model="formData.titleName" placeholder="请输入标题"></uni-easyinput>
|
|
|
+ </uni-forms-item>
|
|
|
+ <!-- 使用原生input，需要绑定binddata -->
|
|
|
+ <uni-forms-item name="textDetails" required label="正文">
|
|
|
+ <uni-easyinput type="textarea" v-model="formData.textDetails" :maxlength="50" @blur="binddata('textDetails', $event.detail.value)" placeholder="请输入正文"></uni-easyinput>
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item name="checked" label="是否政策推荐" label-width="30%">
|
|
|
+ <switch :checked="formData.isGovernment" @change="change('isGovernment', $event.detail.value)" style="margin-top: 3%;"/>
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item name="checked" label="是否置顶" label-width="30%">
|
|
|
+ <switch :checked="formData. isTop" @change="change(' isTop', $event.detail.value)" style="margin-top: 2%;"/>
|
|
|
+ </uni-forms-item>
|
|
|
+ <uni-forms-item name="urlList" required label="图片">
|
|
|
+ <upload :imgArr="imageList" :fileSize="1" :limit="3" @updateImg="updateImg"></upload>
|
|
|
+ </uni-forms-item>
|
|
|
+ </uni-group>
|
|
|
+ <view>
|
|
|
+ <!-- <button @click="submitForm('form')">校验表单</button>
|
|
|
+ <button size="mini" @click="validateField('form')">只校验用户名和邮箱项</button>
|
|
|
+ <button size="mini" @click="clearValidate('form', 'name')">移除用户名的校验结果</button>
|
|
|
+ <button size="mini" @click="clearValidate('form')">移除全部表单校验结果</button>
|
|
|
+ <button @click="resetForm">重置表单</button> -->
|
|
|
+ <button @click="submitForm('form')">新增</button>
|
|
|
+ </view>
|
|
|
+ </uni-forms>
|
|
|
</view>
|
|
|
</template>
|
|
|
-
|
|
|
+
|
|
|
<script>
|
|
|
+ import upload from '@/components/upload/index.vue'
|
|
|
export default {
|
|
|
- data(){
|
|
|
+ components: {
|
|
|
+ upload
|
|
|
+ },
|
|
|
+ data() {
|
|
|
return {
|
|
|
- form: {
|
|
|
+ formData: {
|
|
|
titleName: '',
|
|
|
- intro: '',
|
|
|
- sex: ''
|
|
|
+ textDetails: '',
|
|
|
+ email: '',
|
|
|
+ sex: '0',
|
|
|
+ hobby: [0, 2],
|
|
|
+ remarks: '热爱学习，热爱生活',
|
|
|
+ isGovernment: false,
|
|
|
+ isTop: false,
|
|
|
+ country: 2,
|
|
|
+ weight: 120,
|
|
|
+ birth: ''
|
|
|
},
|
|
|
- checkboxList: [
|
|
|
- {
|
|
|
- name: '苹果',
|
|
|
- checked: false,
|
|
|
- disabled: false
|
|
|
+ imageList:[],
|
|
|
+ sex: [{
|
|
|
+ text: '男',
|
|
|
+ value: '0'
|
|
|
},
|
|
|
{
|
|
|
- name: '雪梨',
|
|
|
- checked: false,
|
|
|
- disabled: false
|
|
|
+ text: '女',
|
|
|
+ value: '1'
|
|
|
},
|
|
|
{
|
|
|
- name: '柠檬',
|
|
|
- checked: false,
|
|
|
- disabled: false
|
|
|
+ text: '未知',
|
|
|
+ value: '2'
|
|
|
}
|
|
|
],
|
|
|
- radioList: [
|
|
|
+ hobby: [{
|
|
|
+ text: '足球',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
{
|
|
|
- name: '鲜甜',
|
|
|
- disabled: false
|
|
|
+ text: '篮球',
|
|
|
+ value: 1
|
|
|
},
|
|
|
{
|
|
|
- name: '麻辣',
|
|
|
- disabled: false
|
|
|
+ text: '游泳',
|
|
|
+ value: 2
|
|
|
}
|
|
|
],
|
|
|
- radio: '',
|
|
|
- switchVal: false
|
|
|
+ range: ['中国', '美国', '澳大利亚'],
|
|
|
+ show: false,
|
|
|
+ rules: {
|
|
|
+ titleName: {
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ errorMessage: '请输入标题'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ minLength: 1,
|
|
|
+ errorMessage: '标题不得为空'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ textDetails: {
|
|
|
+ rules: [{
|
|
|
+ required: true,
|
|
|
+ errorMessage: '请输入正文'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ minLength: 10,
|
|
|
+ errorMessage: '正文不得少于 {minLength} 字'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ weight: {
|
|
|
+ rules: [{
|
|
|
+ format: 'number',
|
|
|
+ errorMessage: '体重必须是数字'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ minimum: 100,
|
|
|
+ maximum: 200,
|
|
|
+ errorMessage: '体重应该大于 {minimum} 斤，小于 {maximum} 斤'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ birth: {
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ errorMessage: '请选择时间'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ format: 'timestamp',
|
|
|
+ errorMessage: '必须是时间戳'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ email: {
|
|
|
+ rules: [{
|
|
|
+ format: 'email',
|
|
|
+ errorMessage: '请输入正确的邮箱地址'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ isGovernment: {
|
|
|
+ rules: [{
|
|
|
+ format: 'bool'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ isTop: {
|
|
|
+ rules: [{
|
|
|
+ format: 'bool'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ sex: {
|
|
|
+ rules: [{
|
|
|
+ format: 'string'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ hobby: {
|
|
|
+ rules: [{
|
|
|
+ format: 'array'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ validateFunction: function(rule, value, data, callback) {
|
|
|
+ if (value.length < 2) {
|
|
|
+ callback('请至少勾选两个兴趣爱好')
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ change(name, value) {
|
|
|
+ this.formData.checked = value
|
|
|
+ this.$refs.form.setValue(name, value)
|
|
|
+ },
|
|
|
+
|
|
|
+ submitForm(form) {
|
|
|
+ this.$refs[form]
|
|
|
+ .submit()
|
|
|
+ .then(res => {
|
|
|
+ console.log('表单的值：', res)
|
|
|
+ uni.showToast({
|
|
|
+ title: '验证成功'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch(errors => {
|
|
|
+ console.error('验证失败：', errors)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //重置表单 。原生的组件input组件不能重置表单
|
|
|
+ resetForm() {
|
|
|
+ this.$refs.form.resetFields()
|
|
|
+ },
|
|
|
+ validateField(form) {
|
|
|
+ this.$refs[form]
|
|
|
+ .validateField(['name', 'email'])
|
|
|
+ .then(res => {
|
|
|
+ uni.showToast({
|
|
|
+ title: '验证成功'
|
|
|
+ })
|
|
|
+ console.log('表单的值：', res)
|
|
|
+ })
|
|
|
+ .catch(errors => {
|
|
|
+ console.error('验证失败：', errors)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ updateImg(imgList){
|
|
|
+ this.imageList = imgList;
|
|
|
+ },
|
|
|
+ clearValidate(form, name) {
|
|
|
+ if (!name) name = []
|
|
|
+ this.$refs[form].clearValidate(name)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-
|
|
|
-<style>
|
|
|
+<style lang="scss">
|
|
|
+ .uniForm{
|
|
|
+ .uni-forms-item{
|
|
|
+ margin: auto;
|
|
|
+ .uni-forms-item__content{
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .radioView{
|
|
|
+ margin: auto;
|
|
|
+ .uni-forms-item__content{
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .uni-input-border {
|
|
|
+ padding: 0 10px;
|
|
|
+ height: 35px;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ border: 1px #e5e5e5 solid;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
</style>
|
付宇航