【报Bug】在自定义组件中使用uni-forms组件的labelPosition属性在字节小程序中不起作用

分类：uni-app

bug反馈

产品分类： uniapp/小程序/抖音

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： Windows 11 专业版 23H2

HBuilderX类型：正式

HBuilderX版本号： 4.57

第三方开发者工具版本号： Version: 4.3.7 OS: win32 DeviceId: 2892b4c9-084d-466c-9697-740779d55845 BuildId: 125067351 Electron: 25.9.1 Chrome: 114.0.5735.289 Node.js: 18.15.0 V8: 11.4.183.29-electron.0

基础库版本号： 3.62.0.5

项目创建方式： HBuilderX

示例代码：

自定义组件中写上如下代码
<template>
<view>
<uni-forms labelWidth="330px"
label-position="top">
<uni-forms-item label="label"
required>
<uni-easyinput v-model="test"
placeholder="请输入label"
type="textarea"
autoHeight
maxlength="250"></uni-easyinput>
</uni-forms-item>
</uni-forms>
</view>
</template>
<script>
export default {
name: "MyComponent",
props: {
label: String,
},
data(){
return {'test':''};
}
}
</script>
<style scoped
lang="scss">

</style>

随便一个页面中引入这个组件
<my-component></my-component>
可见label-position不起作用

根本原因：
uni-form代码
provide() {
return {
uniForm: this
}
},

这里提供的uniForm在uni-form-item组件中无法获取

操作步骤：

如代码示例100%重现

预期结果：

provide提供的属性在子组件inject中可以获取

实际结果：

provide提供的属性在子组件inject: {
form: {
from: 'uniForm',
default: null
},
},中无法获取

bug描述：

在自定义组件中使用uni-forms组件的labelPosition属性在字节小程序中不起作用

2025-04-03 18:04 负责人:无分享

5 个回复

DCloud_UNI_yuhe

hello ，我这里测试使用 label-position 在字节小程序中是生效的，你可以更新一下插件版本看一下

6***@qq.com (作者)

建一个自定义组件，把你这段代码放入组件中就不起作用了。

2025-04-07 09:05
6***@qq.com (作者)

代码我已经放在下一个评论中了，麻烦核对下谢谢。

2025-04-07 09:23
6***@qq.com (作者)

运行后的效果我也放在下面了，麻烦爬楼，谢谢。

2025-04-07 09:33

6***@qq.com (作者)

页面代码

<template>
<view>
<view style="padding: 20px;">
<uni-forms :modelValue="formData" label-position="top">
<uni-forms-item label="姓名" name="name">
<input type="text" v-model="formData.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item label="年龄" name="age">
<input type="text" v-model="formData.age" placeholder="请输入年龄" />
</uni-forms-item>
</uni-forms>
<button @click="submitForm">Submit</button>
</view>
<my-component></my-component>
</view>
</template>

    },  
    methods: {  
        submitForm:()=>{  
            console.log('submit');  
        },  
    }  
}

</script>

<style>

</style>

自定义组件：
<template>
<view>
<view style="padding: 20px;">
<uni-forms :modelValue="formData" label-position="top">
<uni-forms-item label="姓名" name="name">
<input type="text" v-model="formData.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item label="年龄" name="age">
<input type="text" v-model="formData.age" placeholder="请输入年龄" />
</uni-forms-item>
</uni-forms>
<button @click="submitForm">Submit</button>
</view>
</view>
</template>

<style>

</style>

可见写在page中的代码是正常运行的，但是自定义组件中的label-position不起作用

6***@qq.com (作者)

附件中的图片可以看出相同的代码，微信开发者工具与抖音开发者工具的差异。

DCloud_UNI_yuhe

label 是文字的位置，你说的差异是什么呢？

2025-04-07 10:49
6***@qq.com (作者)

回复 DCloud_UNI_yuhe: 抖音小程序位置不对得嘛，代码都是写的顶部，抖音小程序在左侧，而微信是正常的啊

2025-04-07 11:38
6***@qq.com (作者)

回复 DCloud_UNI_yuhe: 在page组件是正常的，在自定义组件中不正常，根本原因是抖音小程序在自定义组件中引用uni-form组件时provide提供的属性在子组件inject中获取不到。

2025-04-07 11:42
6***@qq.com (作者)

回复 DCloud_UNI_yuhe: 在自定义组件中引用很多uni官方的组件都会出问题，原因就是这些组件中使用了provide与inject而在抖音中provide与inject似乎不起作用。

2025-04-07 11:50
6***@qq.com (作者)

回复 DCloud_UNI_yuhe: 怎么样了大佬

2025-04-08 10:47