fix(h5): allow readonly in input component #18099 #18103
Conversation
Walkthrough本次变更主要为 Taro 组件库的 Input 组件新增了 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant InputComponent
participant NativeInput
User->>InputComponent: 设置 readonly 属性
InputComponent->>NativeInput: 渲染 input，传递 readonly 属性
NativeInput-->>User: 展示只读输入框
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 分钟 Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (11)
examples/input-readonly-taro4/src/index.html (3)
2-2: 建议为<html>标签添加lang属性缺少
lang会影响可访问性与 SEO，可补充为lang="zh-CN"或实际使用语言。
4-4: 使用简洁的字符集声明写法
http-equiv="Content-Type"的做法已较过时，可改为更简洁且被所有现代浏览器优先解析的写法：- <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> + <meta charset="utf-8">
12-12: 内联模板脚本需确保构建期安全替换
<%= htmlWebpackPlugin.options.script %>会在构建时注入脚本字符串，需确认该值来源可控并在生产环境经过最小化 / 哈希命名处理，避免潜在 XSS 风险。同时可考虑添加defer以避免阻塞。examples/input-readonly-taro4/.env.development (1)
1-2: 保持占位符，避免暴露真实 AppID当前使用注释占位的形式非常安全，确认正式开发时也不要把实际的
TARO_APP_ID值提交到仓库。若需在本地调试，可通过.env.local或私有 CI 变量注入，避免泄漏。examples/input-readonly-taro4/.env.test (1)
1-1: 统一变量书写格式为保持三套环境文件风格一致，可考虑去掉引号改为
KEY=value的写法，或三者全部保持引号，避免后续脚本解析差异。packages/taro-components/src/components/input/readme.md (1)
12-12: 修复表格格式问题根据 markdownlint 提示，表格行缺少结尾的管道符。
-| | placeholder-class | String | | 指定 placeholder 的样式类 +| | placeholder-class | String | | 指定 placeholder 的样式类 |examples/input-readonly-taro4/types/vue.d.ts (1)
3-10: 扩展写法 OK，但最好显式覆写存在冲突的标签
目前仅通过extends JSX.IntrinsicElements合并，若后续真要覆写如注释所示的scroll-view等标签，建议直接在接口内补充声明，避免 TS 在同名属性上推断为never或出现歧义。export interface GlobalComponents extends JSX.IntrinsicElements { 'scroll-view': JSX.IntrinsicElements['scroll-view'] }这样可提升 IDE 跳转及类型补全体验。
examples/input-readonly-taro4/tsconfig.json (1)
9-14: 考虑开启严格模式以提升类型安全
"noImplicitAny": false会放宽隐式 any 的检查。在示例项目中启用"noImplicitAny": true或直接开启"strict": true可及早暴露潜在类型问题。若仅为演示可保留，但请评估风险。- "noImplicitAny": false, + "strict": true,examples/input-readonly-taro4/config/prod.ts (1)
1-33: 配置占位无实际逻辑，可考虑删除或补充注释说明
mini: {}与空的h5配置目前不会产生任何效果。如果只是占位，建议添加 TODO 说明，或在文档中指出为何保留空对象，防止后续维护者误解。examples/input-readonly-taro4/package.json (1)
12-33: 缺少常规的 Lint / Test 脚本
项目已引入eslint,stylelint,@commitlint等依赖，但scripts中没有对应的lint、lint:style、test等命令。建议补充，方便 CI 或开发者本地校验。"scripts": { + "lint": "eslint --ext .ts,.tsx,.vue src", + "lint:style": "stylelint \"src/**/*.{css,scss,sass}\"", + "test": "echo \"No test specified\"" },examples/input-readonly-taro4/config/index.ts (1)
7-35: 基础配置建议优化配置整体结构合理，但有几个小建议：
- 日期格式建议使用标准格式（如 '2025-07-31'）
- 对于示例项目，可以考虑启用缓存以提升构建性能
- date: '2025-7-31', + date: '2025-07-31',- cache: { - enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache - }, + cache: { + enable: true // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache + },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
examples/input-readonly-taro4/yarn.lockis excluded by!**/yarn.lock,!**/*.lockpackages/taro-components/__tests__/__snapshots__/input.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (27)
examples/input-readonly-taro4/.editorconfig(1 hunks)examples/input-readonly-taro4/.env.development(1 hunks)examples/input-readonly-taro4/.env.production(1 hunks)examples/input-readonly-taro4/.env.test(1 hunks)examples/input-readonly-taro4/.eslintrc(1 hunks)examples/input-readonly-taro4/.gitignore(1 hunks)examples/input-readonly-taro4/.husky/commit-msg(1 hunks)examples/input-readonly-taro4/babel.config.js(1 hunks)examples/input-readonly-taro4/commitlint.config.mjs(1 hunks)examples/input-readonly-taro4/config/dev.ts(1 hunks)examples/input-readonly-taro4/config/index.ts(1 hunks)examples/input-readonly-taro4/config/prod.ts(1 hunks)examples/input-readonly-taro4/package.json(1 hunks)examples/input-readonly-taro4/project.config.json(1 hunks)examples/input-readonly-taro4/src/app.config.ts(1 hunks)examples/input-readonly-taro4/src/app.ts(1 hunks)examples/input-readonly-taro4/src/index.html(1 hunks)examples/input-readonly-taro4/src/pages/index/index.config.ts(1 hunks)examples/input-readonly-taro4/src/pages/index/index.vue(1 hunks)examples/input-readonly-taro4/stylelint.config.mjs(1 hunks)examples/input-readonly-taro4/tsconfig.json(1 hunks)examples/input-readonly-taro4/types/global.d.ts(1 hunks)examples/input-readonly-taro4/types/vue.d.ts(1 hunks)packages/babel-plugin-transform-taroapi/__tests__/__mocks__/h5-definition.json(1 hunks)packages/taro-components/__tests__/input.spec.tsx(2 hunks)packages/taro-components/src/components/input/input.tsx(3 hunks)packages/taro-components/src/components/input/readme.md(2 hunks)
🧰 Additional context used
🧠 Learnings (4)
📚 Learning: 在 taro-runtime 包的 tsdown 配置中，必须禁用 treeshake 来保留 dom-external/index.js 文件。...
Learnt from: ianzone
PR: NervJS/taro#17746
File: packages/taro-runtime/tsdown.config.ts:10-16
Timestamp: 2025-05-25T18:02:31.387Z
Learning: 在 taro-runtime 包的 tsdown 配置中，必须禁用 treeshake 来保留 dom-external/index.js 文件。
Applied to files:
examples/input-readonly-taro4/.env.developmentexamples/input-readonly-taro4/.env.productionexamples/input-readonly-taro4/.env.testexamples/input-readonly-taro4/src/app.config.tsexamples/input-readonly-taro4/src/pages/index/index.config.tsexamples/input-readonly-taro4/config/dev.tsexamples/input-readonly-taro4/babel.config.jsexamples/input-readonly-taro4/src/index.htmlexamples/input-readonly-taro4/tsconfig.jsonexamples/input-readonly-taro4/project.config.jsonexamples/input-readonly-taro4/config/prod.tsexamples/input-readonly-taro4/package.jsonexamples/input-readonly-taro4/config/index.tsexamples/input-readonly-taro4/types/global.d.tsexamples/input-readonly-taro4/.eslintrc
📚 Learning: 在使用 rollup-plugin-dts 的项目中，rollup.config.ts 等构建配置文件会被自动排除，不需要在 tsconfig.json 中手动排除。...
Learnt from: ianzone
PR: NervJS/taro#18056
File: packages/taro-runtime/tsconfig.json:10-10
Timestamp: 2025-07-22T09:16:21.180Z
Learning: 在使用 rollup-plugin-dts 的项目中，rollup.config.ts 等构建配置文件会被自动排除，不需要在 tsconfig.json 中手动排除。
Applied to files:
examples/input-readonly-taro4/tsconfig.jsonexamples/input-readonly-taro4/project.config.jsonexamples/input-readonly-taro4/config/prod.tsexamples/input-readonly-taro4/config/index.ts
📚 Learning: in nx 21, project.json targets don't necessarily require explicit "executor" and "options" fields li...
Learnt from: ianzone
PR: NervJS/taro#17842
File: packages/taro-components/project.json:4-8
Timestamp: 2025-06-21T21:23:03.650Z
Learning: In Nx 21, project.json targets don't necessarily require explicit "executor" and "options" fields like in earlier versions. A target can be defined with just "outputs" configuration, especially for custom build processes or when using implicit executors.
Applied to files:
examples/input-readonly-taro4/project.config.json
📚 Learning: 在 jest-helper 包中，src 目录下没有 __tests__ 测试目录，只包含 resolver.ts、sequencer.ts 和 snapshot 目录。不要假设包中存在测试目录结构。...
Learnt from: ianzone
PR: NervJS/taro#17842
File: packages/jest-helper/tsconfig.json:9-9
Timestamp: 2025-06-23T00:09:31.233Z
Learning: 在 jest-helper 包中，src 目录下没有 __tests__ 测试目录，只包含 resolver.ts、sequencer.ts 和 snapshot 目录。不要假设包中存在测试目录结构。
Applied to files:
examples/input-readonly-taro4/types/global.d.ts
🪛 markdownlint-cli2 (0.17.2)
packages/taro-components/src/components/input/readme.md
12-12: Table pipe style
Expected: leading_and_trailing; Actual: leading_only; Missing trailing pipe
(MD055, table-pipe-style)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Build Rust Binding / stable - x86_64-apple-darwin
- GitHub Check: Build Rust Binding / stable - x86_64-pc-windows-msvc
- GitHub Check: Build Rust Binding / stable - aarch64-apple-darwin
🔇 Additional comments (23)
examples/input-readonly-taro4/src/index.html (1)
9-9:apple-mobile-web-app-status-bar-style的取值应为官方允许的枚举官方仅支持
default、black、black-translucent三个值，white将被忽略。建议根据需求改为合法取值。examples/input-readonly-taro4/.env.production (1)
1-1: 谨慎处理生产密钥同样建议在生产环境用 CI/CD 注入真正的
TARO_APP_ID，并在仓库中只保留占位或注释，防止敏感信息泄露。examples/input-readonly-taro4/src/pages/index/index.config.ts (1)
1-3: 确认已启用宏，否则需显式导入definePageConfig如果项目的 tsconfig 未开启 Taro 的宏定义（
"plugins": [{ "name": "@tarojs/plugin-macros" }]），TypeScript 可能无法识别definePageConfig。
如遇类型报错，可在文件顶部添加：+import { definePageConfig } from '@tarojs/taro'examples/input-readonly-taro4/commitlint.config.mjs (1)
1-1: LGTM：采用 conventional 提交规范配置简单直接，能够满足基础提交规范校验。
examples/input-readonly-taro4/.eslintrc (1)
1-5: 配置正确，符合最佳实践。ESLint 配置正确地扩展了
taro/vue3规则集，注释也提供了有用的编辑器集成指导。这是一个标准的 Taro Vue3 项目配置。examples/input-readonly-taro4/.gitignore (1)
1-8: 忽略文件配置完整且合适。
.gitignore文件包含了 Taro 项目的所有必要忽略模式，包括构建输出、依赖项、临时文件和平台特定文件。examples/input-readonly-taro4/.editorconfig (1)
1-12: 编辑器配置标准且合理。EditorConfig 配置遵循了常见的代码格式约定，2 空格缩进适合 JavaScript/Vue 项目，对 Markdown 文件的特殊处理也是正确的。
examples/input-readonly-taro4/config/dev.ts (1)
1-10: 开发环境配置适当且类型安全。Taro 开发配置正确使用了类型导入和
satisfies关键字，日志配置适合开发环境，平台配置留空是合理的基础设置。examples/input-readonly-taro4/stylelint.config.mjs (1)
1-4: 样式检查配置简洁且符合现代标准。Stylelint 配置正确使用了 ESM 格式和 TypeScript 类型注解，扩展标准预设是大多数项目的合适选择。
examples/input-readonly-taro4/.husky/commit-msg (1)
1-4: 标准的 commitlint 钩子实现，看起来不错！这个提交消息验证钩子遵循了标准的 Husky 和 commitlint 最佳实践，实现正确。
packages/babel-plugin-transform-taroapi/__tests__/__mocks__/h5-definition.json (1)
2208-2208: 正确添加了 readonly 属性定义在 H5 平台的组件定义中正确添加了
readonly布尔属性，与其他属性保持一致的格式。examples/input-readonly-taro4/src/pages/index/index.vue (1)
1-20: 很好的示例组件，正确演示了 readonly 功能这个 Vue 组件正确使用了新添加的
readonly属性，代码结构清晰，符合 Vue 3 组合式 API 的最佳实践。examples/input-readonly-taro4/babel.config.js (1)
1-11: 标准的 Taro Babel 配置，实现正确配置正确设置了 Vue 3 框架、TypeScript 支持和 Webpack 5 编译器，符合 Taro 项目的最佳实践。注释中包含的文档链接也很有帮助。
packages/taro-components/__tests__/input.spec.tsx (1)
16-16: 测试实现正确readonly 属性的测试用例实现得当，正确验证了属性传递和 DOM 渲染逻辑。
Also applies to: 29-29, 37-37
examples/input-readonly-taro4/src/app.ts (1)
1-16: 示例项目应用入口实现正确这是一个标准的 Vue 3 + Taro 4 应用入口配置，实现规范且符合框架要求。
packages/taro-components/src/components/input/readme.md (1)
13-13: 文档更新正确readonly 属性在 API 表格和自动生成的属性部分都得到了正确的文档化，类型和默认值设置准确。
Also applies to: 45-45
packages/taro-components/src/components/input/input.tsx (2)
43-43: readonly 属性声明正确使用 Stencil @prop 装饰器正确声明了 readonly 属性，默认值设为 false 符合预期。
253-253: readonly 属性渲染逻辑正确在 render 方法中正确解构 readonly 属性，并按照 HTML 标准将其条件性地设置为 'readonly' 字符串或 undefined，实现符合 Web 标准。
Also applies to: 270-270
examples/input-readonly-taro4/project.config.json (1)
1-16: 小程序配置文件设置合理这是一个标准的微信小程序项目配置文件，设置适合示例项目使用，配置项合理。
examples/input-readonly-taro4/types/global.d.ts (1)
19-25:TARO_ENV枚举与脚本不一致，请确认
脚本中存在harmony-hybrid，而类型定义仅包含'harmony'。若两者均有效，应同时在枚举里声明，避免类型与实际环境变量不符。- TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'qq' | 'jd' | 'harmony' | 'jdrn' + TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'qq' | 'jd' | 'harmony' | 'harmony-hybrid' | 'jdrn'examples/input-readonly-taro4/config/index.ts (3)
1-6: 导入配置看起来正确导入语句遵循了 Taro 项目的标准模式，包括正确引入了
defineConfig辅助函数和 TypeScript 路径插件。配置文件结构清晰，符合最佳实践。
36-93: 平台配置实现良好各平台的配置都遵循了 Taro 的最佳实践：
- 小程序和 H5 平台都正确配置了
TsconfigPathsPlugin支持 TypeScript 路径别名- CSS 模块配置在各平台保持一致
- H5 平台的输出文件命名使用了合适的哈希策略
- PostCSS 配置合理，H5 平台启用了 autoprefixer
96-102: 环境配置处理逻辑正确环境配置的处理逻辑清晰合理：
- 正确使用
NODE_ENV环境变量区分开发和生产环境- 使用
merge函数合并基础配置和环境特定配置- 默认使用生产配置是一个安全的选择
这种模式符合 Taro 项目的标准实践。
| export default defineAppConfig({ | ||
| pages: [ | ||
| 'pages/index/index' | ||
| ], | ||
| window: { | ||
| backgroundTextStyle: 'light', | ||
| navigationBarBackgroundColor: '#fff', | ||
| navigationBarTitleText: 'WeChat', | ||
| navigationBarTextStyle: 'black' | ||
| } | ||
| }) |
There was a problem hiding this comment.
缺少必要的导入语句
代码使用了 defineAppConfig 但未导入该函数，这会导致运行时错误。
添加必要的导入语句：
+import { defineAppConfig } from '@tarojs/taro'
+
export default defineAppConfig({
pages: [
'pages/index/index'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export default defineAppConfig({ | |
| pages: [ | |
| 'pages/index/index' | |
| ], | |
| window: { | |
| backgroundTextStyle: 'light', | |
| navigationBarBackgroundColor: '#fff', | |
| navigationBarTitleText: 'WeChat', | |
| navigationBarTextStyle: 'black' | |
| } | |
| }) | |
| import { defineAppConfig } from '@tarojs/taro' | |
| export default defineAppConfig({ | |
| pages: [ | |
| 'pages/index/index' | |
| ], | |
| window: { | |
| backgroundTextStyle: 'light', | |
| navigationBarBackgroundColor: '#fff', | |
| navigationBarTitleText: 'WeChat', | |
| navigationBarTextStyle: 'black' | |
| } | |
| }) |
🤖 Prompt for AI Agents
In examples/input-readonly-taro4/src/app.config.ts lines 1 to 11, the function
defineAppConfig is used but not imported, causing runtime errors. Fix this by
adding the appropriate import statement for defineAppConfig at the top of the
file, ensuring the function is properly imported from the relevant module before
usage.
这个 PR 做了什么？ (简要描述所做更改)
Taro的Input支持readonly属性
jd-opensource/nutui#3276
#18098
这个 PR 是什么类型？ (至少选择一个)
这个 PR 涉及以下平台：
Summary by CodeRabbit
readonly属性，支持只读模式。input-readonly-taro4新增，支持多平台开发与配置。readonly属性说明。readonly属性的相关测试用例。