uni-ui开启了virtualHost，在抖音小程序中通过provide提供的uniForm为null，在uniFormsItem拿不到uniForm的labelwidth，设置宽度失败,校验无效 属性设置无效；
debugger发现uni-forms-item组件通过inject获取父组件provide提供的uniForm为null
setting
- 发布：2024-06-12 09:46
- 更新：2024-08-08 10:37
- 阅读：169
抖音小程序中uni-ui开启了virtualHost，provide提供的uniForm为null，在uniFormsItem拿不到uniForm的labelwidth，设置宽度失败
分类：uni-app
产品分类： uniapp/小程序/字节跳动
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： windows11
HBuilderX类型： 正式
HBuilderX版本号： 4.19
第三方开发者工具版本号： 4.2.5
基础库版本号： 3.24.0.5
项目创建方式： HBuilderX
示例代码：
操作步骤：
<template>
<view class="content">
<uni-forms ref="form" :rules="rules" v-model="formData" :label-width="200">
<uni-forms-item label="姓名" name="name"
:label-width="100" required>
<uni-easyinput v-model="formData.name" :inputBorder="false" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item label="手机号码" name="mobile" required>
<uni-easyinput v-model="formData.mobile" :inputBorder="false" placeholder="请输入手机号码" />
</uni-forms-item>
</uni-forms>
<button type="primary" @click="test">t111</button>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
formData: {
name: '',
mobile: ''
},
rules: {
name: {
rules: [{
required: true,
errorMessage: '请输入姓名'
}]
},
mobile: {
rules: [{
required: true,
errorMessage: '请输入手机'
}]
},
}
}
},
methods: {
test() {
this.$refs.form.validate().then(res => {
console.log(res)
})
}
}
}
</script>
<template>
<view class="content">
<uni-forms ref="form" :rules="rules" v-model="formData" :label-width="200">
<uni-forms-item label="姓名" name="name"
:label-width="100" required>
<uni-easyinput v-model="formData.name" :inputBorder="false" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item label="手机号码" name="mobile" required>
<uni-easyinput v-model="formData.mobile" :inputBorder="false" placeholder="请输入手机号码" />
</uni-forms-item>
</uni-forms>
<button type="primary" @click="test">t111</button>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
formData: {
name: '',
mobile: ''
},
rules: {
name: {
rules: [{
required: true,
errorMessage: '请输入姓名'
}]
},
mobile: {
rules: [{
required: true,
errorMessage: '请输入手机'
}]
},
}
}
},
methods: {
test() {
this.$refs.form.validate().then(res => {
console.log(res)
})
}
}
}
</script> 预期结果：
label-width设置为200宽度
label-width设置为200宽度
实际结果：
label-width设置无效
label-width设置无效
6 个回复
setting (作者) - 1111
@DCloud_UNI_OttoJi
setting (作者) - 1111
抖音小程序组件开启virtualHost，导致父子组件间的provide和inject失效
DCloud_UNI_OttoJi
使用我在其他问题上提的修复 virtural host 问题，有改善吗。我看下
2024-06-14 11:19
setting (作者)
回复 DCloud_UNI_OttoJi: 你说的其他问题修改 virtural host 是指哪个
2024-06-18 14:13
DCloud_UNI_OttoJi
回复 setting: 这个问题提供了一个文件，你替换一下试试 https://ask.dcloud.net.cn/question/192502
2024-06-18 14:32
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
替换一下试试 https://ask.dcloud.net.cn/question/192502
你是 vue2 vue3?其他小程序 ok 吗？
setting (作者)
按照你说的替换过文件 created执行没问题，但是开启了virtualHost，在抖音小程序中provide、inject无效，其他小程序正常
2024-06-18 15:17
setting (作者)
问题中的代码示例或者自己创建父子组件，稳定复现provide、inject问题
2024-06-18 15:18
DCloud_UNI_OttoJi
回复 setting: provide/inject 的问题我看下
2024-07-01 14:54
setting (作者) - 1111
@DCloud_UNI_OttoJi 这个你复现了吗
setting (作者) - 1111
@DCloud移动团队
2***@qq.com
请问问题解决了吗