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

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

开发环境 版本号 项目创建方式
Windows Windows 11 专业版 23H2 HBuilderX 
# bug描述：

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

## 示例代码：

```html
<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 }, }中无法获取


更多关于在uni-app自定义组件中使用uni-forms组件的labelPosition属性在字节小程序中不起作用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

14 回复

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

更多关于在uni-app自定义组件中使用uni-forms组件的labelPosition属性在字节小程序中不起作用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


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

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

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

页面代码
<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>

<script> import MyComponent from '@/components/my-component.vue'; export default { components:{ MyComponent, }, data() { return { formData:{ name:'', age:'', hobby:'', }, } }, onLoad() { }, 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>

<script> export default { name:"my-component", data() { return { formData:{ name:'', age:'', hobby:'', }, } }, methods:{ submitForm:()=>{ console.log('submit'); }, } } </script> <style> </style>

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

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

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

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

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

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

回复 DCloud_UNI_yuhe: 怎么样了大佬

代码都是写的top，微信是正常的，抖音小程序不正常

@DCloud_UNI_yuhe 麻烦看下这张图

这是一个已知的uni-app在字节小程序平台上的兼容性问题。在自定义组件中使用uni-forms时，provide/inject机制在字节小程序中无法正常工作，导致labelPosition等属性失效。

解决方案：

  1. 最简单的方法是避免在自定义组件内直接使用uni-forms，改为在页面级组件中使用
  2. 或者改用props显式传递配置参数到子组件

临时解决方法：

<template>
  <view>
    <uni-forms :label-position="labelPos" labelWidth="330px">
      <!-- 表单内容 -->
    </uni-forms>
  </view>
</template>

<script>
export default {
  props: {
    labelPos: {
      type: String,
      default: 'top'
    }
  }
}
</script>
回到顶部