uni-app input keyboard-accessory编译后嵌套关系问题

uni-app input keyboard-accessory编译后嵌套关系问题

产品分类：

uniapp/小程序/微信

PC开发环境操作系统：

Windows

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

11

HBuilderX类型：

正式

HBuilderX版本号：

4.65

第三方开发者工具版本号：

1.03.2412050

基础库版本号：

3.8.3

项目创建方式：

HBuilderX

示例代码：

<input  class="hidden-input" hold-keyboard  type="digit" >    
        <keyboard-accessory>    
                <cover-view class="custom__list">    
                        <cover-view class="custom__item" v-for="i in 4" :key="i" @click="change(i)">{{i * 5}}</cover-view>    
                </cover-view>    
        </keyboard-accessory>    
    </input>

编译出来最终结果如下, 嵌套关系不存在了

<input  class="hidden-input" hold-keyboard  type="digit" />    
<keyboard-accessory>    
                <cover-view class="custom__list">    
                        <cover-view class="custom__item" v-for="i in 4" :key="i" @click="change(i)">{{i * 5}}</cover-view>    
                </cover-view>    
</keyboard-accessory>

操作步骤：

<input  class="hidden-input" hold-keyboard  type="digit" >
<keyboard-accessory>
<cover-view class="custom__list">
<cover-view class="custom__item" v-for="i in 4" :key="i" @click="change(i)">{{i * 5}}</cover-view>
</cover-view>
</keyboard-accessory>
</input>

预期结果：

<input  class="hidden-input" hold-keyboard  type="digit" >
<keyboard-accessory>
<cover-view class="custom__list">
<cover-view class="custom__item" v-for="i in 4" :key="i" @click="change(i)">{{i * 5}}</cover-view>
</cover-view>
</keyboard-accessory>
</input>

实际结果：

<input  class="hidden-input" hold-keyboard  type="digit" />
<keyboard-accessory>
<cover-view class="custom__list">
<cover-view class="custom__item" v-for="i in 4" :key="i" @click="change(i)">{{i * 5}}</cover-view>
</cover-view>
</keyboard-accessory>

bug描述：

使用HBuildeX 运行或者发行, 解析input嵌套关系错误


更多关于uni-app input keyboard-accessory编译后嵌套关系问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

这个是已知问题，感谢反馈
相似问题 https://ask.dcloud.net.cn/question/202776
小程序官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/keyboard-accessory.html

更多关于uni-app input keyboard-accessory编译后嵌套关系问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


临时解决方案
替换 /Applications/HBuilderX/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-mp-compiler/dist/parserOptions.js 为 下面的代码
注意不能这样 <input type="text"> 否则会编译失败
“use strict”;
Object.defineProperty(exports, “__esModule”, { value: true });
exports.parserOptions = void 0;
const compiler_core_1 = require("@vue/compiler-core");
const shared_1 = require("@vue/shared");
exports.parserOptions = {
isVoidTag(tag) {
if (tag === ‘input’) {
return false
}
return (0, shared_1.isVoidTag)(tag);
},
isNativeTag: (tag) => (0, shared_1.isHTMLTag)(tag) || (0, shared_1.isSVGTag)(tag),
isPreTag: (tag) => tag === ‘pre’,
// https://html.spec.whatwg.org/multipage/parsing.html#tree-construction-dispatcher
getNamespace(tag, parent) {
let ns = parent ? parent.ns : 0 /* DOMNamespaces.HTML /;
if (parent && ns === 2 / DOMNamespaces.MATH_ML /) {
if (parent.tag === ‘annotation-xml’) {
if (tag === ‘svg’) {
return 1 / DOMNamespaces.SVG /;
}
if (parent.props.some((a) => a.type === compiler_core_1.NodeTypes.ATTRIBUTE &&
a.name === ‘encoding’ &&
a.value != null &&
(a.value.content === ‘text/html’ ||
a.value.content === ‘application/xhtml+xml’))) {
ns = 0 / DOMNamespaces.HTML /;
}
}
else if (/^m(?:[ions]|text)$/.test(parent.tag) &&
tag !== ‘mglyph’ &&
tag !== ‘malignmark’) {
ns = 0 / DOMNamespaces.HTML /;
}
}
else if (parent && ns === 1 / DOMNamespaces.SVG /) {
if (parent.tag === ‘foreignObject’ ||
parent.tag === ‘desc’ ||
parent.tag === ‘title’) {
ns = 0 / DOMNamespaces.HTML /;
}
}
if (ns === 0 / DOMNamespaces.HTML /) {
if (tag === ‘svg’) {
return 1 / DOMNamespaces.SVG /;
}
if (tag === ‘math’) {
return 2 / DOMNamespaces.MATH_ML */;
}
}
return ns;
},
parseMode: ‘html’,
};

这是uni-app编译时对input标签的标准化处理问题。根据HTML规范，input是自闭合标签，不应该包含子元素。uni-app编译器在转换时会自动修正这种不符合规范的嵌套结构。

正确的做法应该是将keyboard-accessory作为input的兄弟节点而不是子节点。微信小程序官方文档也明确指出keyboard-accessory是独立组件，不是input的子组件。

修改方案：

<input class="hidden-input" hold-keyboard type="digit"/>
<keyboard-accessory>
    <cover-view class="custom__list">
        <cover-view class="custom__item" v-for="i in 4" :key="i" @click="change(i)">{{i * 5}}</cover-view>
    </cover-view>
</keyboard-accessory>
回到顶部