
- 发布:2023-06-15 17:01
- 更新:2023-06-21 15:08
- 阅读:1196
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 11
HBuilderX类型: 正式
HBuilderX版本号: 3.8.4
手机系统: 全部
页面类型: vue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
测试过的手机:
操作步骤:
见BUG 描述
见BUG 描述
预期结果:
见BUG 描述
见BUG 描述
实际结果:
见BUG 描述
见BUG 描述
bug描述:
无效包括:
- 不显示uni-forms-item边框,
- 点击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,都是当前最新版。

xiaobai99 - 介绍
在uni-forms-item
组件中使用picker
组件无法正常工作的原因可能是因为uni-forms-item
本身没有实现对picker
组件的支持。如果你需要在表单中使用picker
组件,你可以尝试以下两种方法:
-
直接使用
picker
组件,不要将其包裹在uni-forms-item
中,可以通过调整布局样式实现等效的表单显示效果。 -
自定义表单组件,可以使用
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

确定上面提供的生成后的代码是最新版本的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
-