易者
易者
  • 发布:2023-06-15 17:01
  • 更新:2023-06-21 15:08
  • 阅读:1196

【报Bug】老问题:在uni-forms-item中使用picker组件无效,仍未解决!

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 11

HBuilderX类型: 正式

HBuilderX版本号: 3.8.4

手机系统: 全部

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

主要是开发工具HX中都没通过

操作步骤:

见BUG 描述

预期结果:

见BUG 描述

实际结果:

见BUG 描述

bug描述:

无效包括:

  1. 不显示uni-forms-item边框,
  2. 点击picker组件无反应。

效果图如下,只看开始时分和结束时分后面的部分:

代码如下,由schema2code生成:

      <uni-forms-item name="starttimeb" label="选择时间">    
        <picker mode="time" start="00:00" end="23:59" placeholder="请选择时间" @change="binddata('starttimeb', $event.detail.value)" v-model="formData.starttimeb"></picker>    
      </uni-forms-item>

schema写法如下,只截取了用到picker的字段:


        "msstarttime": {    
            "bsonType": "string",    
            "label": "开始时分",    
            "description": "请选择秒杀开始时分",    
            "defaultValue": "11:00",    
            "componentForEdit": {    
                "name": "picker",    
                "props": {    
                    "mode": "time",    
                    "start": "00:00",    
                    "end": "23:59"    
                }    
            }    
        },    
        "msendtime": {    
            "bsonType": "string",    
            "label": "结束时分",    
            "description": "请选择秒杀结束时分",    
            "defaultValue": "11:30",    
            "componentForEdit": {    
                "name": "picker",    
                "props": {    
                    "mode": "time",    
                    "start": "00:00",    
                    "end": "23:59"    
                }    
            }    
        },    
        "frequency": {    
            "bsonType": "int",    
            "label": "秒杀频率",    
            "enum": [{    
                "value": 1,    
                "text": "每天"    
            }, {    
                "value": 2,    
                "text": "每周几"    
            }, {    
                "value": 3,    
                "text": "指定日"    
            }],    
            "defaultValue": 1    
        },    
        "mswday": {    
            "bsonType": "int",    
            "title": "选择周几",    
            // "componentForEdit": {    
            //  "name": "picker",    
            //  "props": {    
            //      "mode": "selector"    
            //  }    
            // }    
            "enum": [{    
                "value": 1,    
                "text": "星期一"    
            }, {    
                "value": 2,    
                "text": "星期二"    
            }, {    
                "value": 3,    
                "text": "星期三"    
            }, {    
                "value": 4,    
                "text": "星期四"    
            }, {    
                "value": 5,    
                "text": "星期五"    
            }, {    
                "value": 6,    
                "text": "星期六"    
            }, {    
                "value": 7,    
                "text": "星期日"    
            }],    
            "defaultValue": 1    
        },    
        "msdate": {    
            "bsonType": "string",    
            "title": "指定日期",    
            "description": "请选择指定日期",    
            "componentForEdit": {    
                "name": "uni-datetime-picker",    
                "props": {    
                    "type": "date"    
                }    
            }    
        },

以上使用的是开发工具HX3.8.4和插件schema2code 0.5.7,都是当前最新版。

老问题链接

2023-06-15 17:01 负责人:DCloud_uni-ad_HDX 分享
已邀请:
易者

易者 (作者)

这个提交老bug的帖子又沉没5天了,没有一点回应,希望不要再耽误一个月的时间。恳请官方尽快解决这个bug。

xiaobai99

xiaobai99 - 介绍

uni-forms-item组件中使用picker组件无法正常工作的原因可能是因为uni-forms-item本身没有实现对picker组件的支持。如果你需要在表单中使用picker组件,你可以尝试以下两种方法:

  1. 直接使用picker组件,不要将其包裹在uni-forms-item中,可以通过调整布局样式实现等效的表单显示效果。

  2. 自定义表单组件,可以使用picker组件作为表单项,然后将其封装为一个自定义表单组件。自定义表单组件可以继承uni-forms-item组件的特性,可以实现和uni-forms-item类似的表单显示效果。当然,在编写自定义表单组件时,你需要自己处理表单验证和数据绑定等问题。

希望以上方法可以帮助到你。

  • 易者 (作者)

    感谢回答!你说的这两种方法确实可用,但我之前是因为schema2code的文档中有示例,觉得很方便,所以就优先选用schema2code生成的页面,然后再微改动即可。picker是个很常用的组件,uni-forms却不支持,这很奇怪!如果单独对picker或某个组件进行自定义开发或封装,那还不如全部改用原生开发,失去了选用uni-app开发的意义,而且官方要加入支持picker或更多组件,比开发者私下去做二开更易操作,好处也更多。开发者发现一个组件不支持的问题,就自行去二开,这会重复制造好多轮子,还不如官方统一集中解决问题,这也符合uni-app的宗旨,又降低了开发者的成本,更有利于uni-app的发展壮大。

    2023-06-20 12:31

  • 易者 (作者)

    因为后续是要面对很多次的不同开发都需要用到schema2code,UI以及很多方面都有比较多的变化,而且还要紧跟官方的版本更新,如果自行二开,会增加很多工作量,所以还是希望官方能把这个问题解决。

    2023-06-20 12:36

DCloud_uni-ad_HDX

DCloud_uni-ad_HDX

确定上面提供的生成后的代码是最新版本的schema2code吗?

schema2code 0.5.7 生成代码如下

{  
  "bsonType": "object",  
  "required": [],  
  "properties": {  
    "_id": {  
      "description": "存储文档 ID(用户 ID),系统自动生成"  
    },  
    "image": {  
      "bsonType": "string",  
      "componentForEdit": {  
        "name": "picker",  
        "props": {  
          "mode": "time",  
          "start": "00:00",  
          "end": "23:59"  
        }  
      }  
    }  
  }  
}
<template>  
  <view class="uni-container">  
    <uni-forms ref="form" :model="formData" validate-trigger="submit" err-show-type="toast">  
      <uni-forms-item name="image" label="">  
        <picker mode="time" start="00:00" end="23:59" @change="binddata('image', $event.detail.value)" v-model="formData.image">  
          <view>{{formData.image || '请选择...'}}</view>  
        </picker>  
      </uni-forms-item>  
      <view class="uni-button-group">  
        <button type="primary" class="uni-button" @click="submit">提交</button>  
      </view>  
    </uni-forms>  
  </view>  
</template>  

<script>  
  import { validator } from '../../js_sdk/validator/table1.js';  

  const db = uniCloud.database();  
  const dbCollectionName = 'table1';  

  function getValidator(fields) {  
    let result = {}  
    for (let key in validator) {  
      if (fields.indexOf(key) > -1) {  
        result[key] = validator[key]  
      }  
    }  
    return result  
  }  

  function numberRange(start, end) {  
    return Array.from(new Array(end + 1).keys()).slice(start);  
  }  

  export default {  
    data() {  
      let formData = {  
        "image": ""  
      }  
      return {  
        formData,  
        formOptions: {},  
        rules: {  
          ...getValidator(Object.keys(formData))  
        }  
      }  
    },  
    onReady() {  
      this.$refs.form.setRules(this.rules)  
    },  
    methods: {  
      pickerChange(e, name) {  
        this.formOptions[name + '_index'] = e.detail.value;  
        this.formData[name] = this.formOptions[name + '_data'][e.detail.value];  
        this.binddata(name, this.formData[name]);  
      },  
      /**  
       * 验证表单并提交  
       */  
      submit() {  
        uni.showLoading({  
          mask: true  
        })  
        this.$refs.form.validate().then((res) => {  
          return this.submitForm(res)  
        }).catch(() => {  
        }).finally(() => {  
          uni.hideLoading()  
        })  
      },  

      /**  
       * 提交表单  
       */  
      submitForm(value) {  
        // 使用 clientDB 提交数据  
        return db.collection(dbCollectionName).add(value).then((res) => {  
          uni.showToast({  
            icon: 'none',  
            title: '新增成功'  
          })  
          this.getOpenerEventChannel().emit('refreshData')  
          setTimeout(() => uni.navigateBack(), 500)  
        }).catch((err) => {  
          uni.showModal({  
            content: err.message || '请求服务失败',  
            showCancel: false  
          })  
        })  
      }  
    }  
  }  
</script>  

<style>  
  .uni-container {  
    padding: 15px;  
  }  

  .uni-input-border,  
  .uni-textarea-border {  
    width: 100%;  
    font-size: 14px;  
    color: #666;  
    border: 1px #e5e5e5 solid;  
    border-radius: 5px;  
    box-sizing: border-box;  
  }  

  .uni-input-border {  
    padding: 0 10px;  
    height: 35px;  

  }  

  .uni-textarea-border {  
    padding: 10px;  
    height: 80px;  
  }  

  .uni-button-group {  
    margin-top: 50px;  
    /* #ifndef APP-NVUE */  
    display: flex;  
    /* #endif */  
    justify-content: center;  
  }  

  .uni-button {  
    width: 184px;  
  }  
</style>
  • 易者 (作者)

    确定上面提供的生成后的代码是当前最新版本的schema2code 0.5.7,本帖内容是基于uni-admin2.3.7的vue3版本生成的,看到您本楼的回复内容后,我又把您的schema代码另外复制到uni-starter2.1.3的vue3版本项目中用schema2code生成页面,和你本楼的回复内容生成的一致,对比以前生成的组件代码,也就是多了一个 <view>{{formData.image || '请选择...'}}</view> ,picker组件可点击了,但uni-forms-item依然无边框。不知道您生成的这个页面有没有uni-forms-item的边框。

    2023-06-21 19:38

  • DCloud_uni-ad_HDX

    回复 易者: uni-forms-item 默认不显示边框,你可以通过样式添加

    2023-06-26 10:22

要回复问题请先登录注册