前端UI组件【免费下载链接】iviewA high quality UI Toolkit built on Vue.js 2.0项目地址https://gitcode.com/gh_mirrors/iv/iview点击查看免费下载iViewiview是一套构建于 Vue.js 之上的高质量 UI 组件库当前仓库的 CHANGE.md 是一份针对 Vue 2.x 升级的内部变更清单逐组件记录了从 Vue 1.x 迁移到 Vue 2.x 时必须调整的 API 差异。本文以该清单为主线结合 src/components 下的源码实现系统梳理各组件 prop 更名、v-model 接入、事件语义变化与受控属性调整帮助开发者把基于 iView 1.x 的业务代码平滑迁移到 2.x。为什么需要这份变更清单Vue 2.0 对组件 API 的硬性约束Vue 2.0 相比 1.x 在组件通信与表单组件上做了两项根本性调整直接导致 iView 大量组件的对外 API 必须重设计.sync修饰符被移除。Vue 1.x 中父组件通过props.sync实现子组件状态的双向绑定2.x 官方推荐使用v-model组件内部$emit(input)或显式props 事件的方式。iView 因此把大量组件的当前值prop 统一改名为value并在内部通过$emit(input)与v-model对接。key成为 Vue 的保留关键字用于列表渲染的虚拟 DOM diff 标识不能再作为业务标识 prop 使用iView 统一将其更名为name。从源码中可以清楚看到这一设计痕迹例如 radio.vue 中this.$emit(input, value)、switch.vue 中this.$emit(input, checked)、collapse.vue 中this.$emit(input, newActiveKey)组件内currentValue与value通过watch同步正是 v-model 协议的完整实现。表单类组件全面接入 v-modelVue 1.x 时代 iView 表单组件普遍使用checked、value混合的受控写法2.x 版本统一收敛为valuev-model同时用label取代value作为选项的标识值。Radio 与 RadioGroup变更要点Radio的value改为label使用v-model废弃checkedRadioGroup使用v-model。在 radio.vue 中Radio的 props 变为value当前选中值、trueValue/falseValue选中/未选中时的输出值默认true/false和label选项标识。点击时先更新currentValue再$emit(input, value)驱动 v-modelradio.vueRadioGroup则维护统一的currentValue并在子项变化时调用updateValue()同步所有子项的高亮态radio-group.vue。!-- 1.xvalue / checked -- radio-group v-modelgender radio valuemale checked男/radio radio valuefemale女/radio /radio-group !-- 2.xlabel v-model -- radio-group v-modelgender radio labelmale男/radio radio labelfemale女/radio /radio-groupCheckbox 与 CheckboxGroup变更要点Checkbox与CheckboxGroup均改用v-model其中Checkbox的value改为label、废弃checkedCheckboxGroup的当前值集合通过value数组承载。典型写法checkbox-group v-modelhobbies checkbox labelread阅读/checkbox checkbox labelcode编码/checkbox /checkbox-groupSwitch变更要点废弃checked改为value使用v-model。switch.vue 的 props 为value默认false与trueValue/falseValue默认true/false。切换时在 toggle 中做防抖与beforeChange前置校验支持返回 Promise通过 handleToggle 更新currentValue并$emit(input, checked)。switch v-modelenabled true-valueon false-valueoff/switchInputNumber变更要点使用v-model。用法上只需把原来的:valueon-change手动回写改为v-model即可。Slider变更要点支持v-model。README.md 中的官方示例即为此形态template Slider v-modelvalue range / /template script export default { data () { return { value: [20, 50] } } } /scriptrange模式下value为区间数组由组件内部在拖拽结束时通过$emit(input, ...)回写。Select变更要点model改为value支持v-model。这是最直接的属性更名搜索代码中所有model绑定并替换为value事件侧保持on-change不变。DatePicker变更要点使用v-model。时间类组件的当前选中值统一从valueprop 手动监听改为v-model绑定。Cascader变更要点Caspanel的sublist由 prop 改为 data。这一改动意味着级联子面板的列表数据不再由外部注入 prop而是组件内部状态管理外部只需维护顶层value通过 v-model子级展开由组件自身递归计算。结构性组件key 更名与受控属性调整Collapse变更要点废弃activeKey使用v-modelkey是保留字Panel的标识更名为name。collapse.vue 的value接受Array | String支持手风琴模式accordion多选时自动收敛为第一个panel.vue 的name缺省时回退为索引child.name || index.toString()见 collapse.vue。collapse v-modelactiveNames accordion panel namep1面板一/panel panel namep2面板二/panel /collapseTabs变更要点废弃activeKey改用value使用v-modelkey更名为name。tabs.vue 的value为String | Numbernameprop 用于 Tabs 嵌套时区分层级切换时 handleChange 更新activeKey并$emit(input, nav.name)。注意TabPane的name同时作为v-model的匹配标识。Carousel变更要点废弃activeIndex使用v-model另外需注意 Vue 2 的数字循环从 1 开始v-forn in slides.length中n的取值区间为[1, length]源码中指示点判等即使用n - 1 currentIndexcarousel.vue。carousel v-modelcurrentSlide autoplay carousel-item1/carousel-item carousel-item2/carousel-item /carouselTree变更要点废弃data改为value使用v-modelkey更名为name不能再在 template 的 prop 上使用this。需要说明的是当前 tree.vue 仍保留了data作为节点树数据源Array同时通过on-select-change、on-check-change、on-toggle-expand等事件对外通信选中/勾选结果由事件回调获取迁移时若 1.x 依赖data绑定选中态应改为value 事件回调组合。key→name影响的是节点标识字段命名且模板 prop 中不能再使用this引用Vue 2 模板表达式作用域限制。Menu变更要点MenuItem和Submenu的key改为nameMenu的activeKey改为activeName、openKeys改为openNames。menu.vue 中activeName为String | NumberopenNames为数组展开状态通过广播on-update-active-name同步menu.vue手风琴模式下updateOpenKeys会先收起所有Submenu再展开目标项menu.vue。menu active-name1 open-names[2] on-selecthandleSelect menu-item name1首页/menu-item submenu name2 template slottitle设置/template menu-item name2-1个人资料/menu-item /submenu /menuDropdown变更要点DropdownItem的key改为nameDropdown的visible不再sync改用on-visible-change捕获DropdownItem中this.$parent.$parent的层级关系与 1.x 有区别。Modal变更要点visible改为value使用v-modelstyle改为styles$Modal的关闭行为有改动官方建议在纯 html 模式下测试验证。modal.vue 中valueBoolean默认false作为显隐受控值内部visible转为 data 状态配合transition动画styles用于自定义弹窗样式对象。modal v-modelshowModal title提示 p内容区域/p /modalCircle变更要点改名为iCircle。当前源码 circle.vue 的组件name即为iCircle在使用处需同步替换组件标签。展示与反馈类组件命名与事件调整Badge / Page变更要点class改为className。两个组件的自定义样式类 prop 均从class更名为className避免与 Vue 2 模板中class特殊属性冲突。Progress名称有警告变更要点新增on-status-change事件。迁移时除保留原有百分比 prop 绑定外需监听on-status-change以感知进度完成/异常等状态变化该组件名在 1.x 中已存在命名冲突警告注意按 2.x 文档使用正式组件名。Upload变更要点父级不能 computedUpload的fileList了。1.x 允许父组件通过计算属性直接派生子组件文件列表2.x 中fileList改为组件内部状态父级通过on-change、on-success、on-error等事件获取上传结果。LoadingBar变更要点部分 prop 移至 data。加载条组件由函数式 APIthis.$Loading.start()/finish()驱动内部状态改由 data 管理外部只需调用实例方法。Message变更要点notice.vue的key改为了namestyle改为stylesnotification.vue同理。该变更同时影响Notice与Notification两个轻提示组件的内部注册标识与样式 prop迁移时检查所有自定义样式绑定。底层 Popper 体系受控值统一为 value变更要点Popper移除了visible使用value受控可能涉及Poptip、Tooltip两个组件。这是本次迁移中最具系统性的一处所有基于 base/popper.js 实现的浮层组件弹出/收起状态统一改为value受控。对业务代码的影响主要是Poptip、Tooltip的显隐从poptip visibletrue改为poptip valuetrue且可使用 v-model交互状态变化不再通过sync回传而是监听on-popper-show/on-popper-hide具体事件名以 2.x 文档为准等事件驱动。迁移清单速查表组件1.x 写法2.x 写法备注Radio / RadioGroupvalue、checkedlabelv-model废弃checkedCheckbox / CheckboxGroupvalue、checkedlabelv-model废弃checkedSwitchcheckedvaluev-model支持trueValue/falseValueInputNumber / Slider / DatePicker / Select / Cascader手动绑定v-modelSelect 的model更名为valueCollapseactiveKey、keyvaluev-model、namekey为保留字TabsactiveKey、keyvaluev-model、name—CarouselactiveIndexvaluev-modelVue 2 数字循环从 1 开始Treedata、keyvalue 事件回调、name模板 prop 禁用thisMenuactiveKey、openKeys、keyactiveName、openNames、name—Dropdownkey、visiblesyncname、on-visible-change注意$parent层级差异Modalvisible、stylevaluev-model、styles$Modal关闭逻辑有改动CircleCircleiCircle组件更名Badge / PageclassclassName—Progress—新增on-status-change组件名有警告UploadcomputedfileList事件回调获取fileList移入内部LoadingBarprop 注入部分 prop 移至 data—Message / Noticekey、stylename、styles—Poptip / TooltipPoppervisiblevalue受控不再 sync迁移验证建议优先全仓搜索activeKey、openKeys、:value.sync、change.native等 1.x 遗留写法逐一对照上表替换表单组件验证重点确认v-model绑定后组件内部$emit(input)是否正确驱动父级数据更新可参照 radio.vue、switch.vue、collapse.vue 的实现核对浮层组件验证重点value受控后手动关闭如点击遮罩、ESC 键是否触发对应事件并同步父级状态保留组件 props 关键字校验key已为 Vue 保留字任何自定义keyprop 都必须改为name若项目使用 TypeScript可同步参考 types 目录下各组件.d.ts声明如 modal.d.ts、collapse.d.ts校验 prop 类型与事件签名。通过以上梳理可以看到iView 2.x 的 API 变化并非零散修补而是围绕 Vue 2.0 的v-model协议、key保留字与受控组件三大机制展开的系统性重构。按 CHANGE.md 清单逐项核对并替换即可将存量 1.x 业务代码平稳迁移至 2.x。赞分享前端UI组件【免费下载链接】iviewA high quality UI Toolkit built on Vue.js 2.0项目地址https://gitcode.com/gh_mirrors/iv/iview点击查看免费下载相关推荐Vux 2.x 升级完全指南从 Vue 1.x 迁移到 Vue 2.x 的 API 变更、构建配置与组件改造实战Vux 2.x 升级完全指南从 Vue 1.x 迁移到 Vue 2.x 的 API 变更、构建配置与组件改造实战 本篇技术指南以 Vux 官方《升级到 vuxUI组件前端Vux 2.0 升级迁移指南从 Vue 1.x 到 Vue 2.x 的组件库变更全解析Vux 2.0 升级迁移指南从 Vue 1.x 到 Vue 2.x 的组件库变更全解析 本文是 Vux基于 Vue 与 WeUI 的移动端 UI 组件库从UI组件前端React Native Reanimated 迁移指南从 1.x 到 2.x 的增量迁移策略与 API 重命名清单React Native Reanimated 迁移指南从 1.x 到 2.x 的增量迁移策略与 API 重命名清单 本文以官方文档 migration.md移动开发前端上一篇Layerdivider一键将图片转换为可编辑的PSD分层文件下一篇终极5分钟掌握HunterPie《怪物猎人世界》智能数据覆盖插件完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
前端UI组件【免费下载链接】iviewA high quality UI Toolkit built on Vue.js 2.0项目地址https://gitcode.com/gh_mirrors/iv/iview点击查看免费下载iViewiview是一套构建于 Vue.js 之上的高质量 UI 组件库当前仓库的 CHANGE.md 是一份针对 Vue 2.x 升级的内部变更清单逐组件记录了从 Vue 1.x 迁移到 Vue 2.x 时必须调整的 API 差异。本文以该清单为主线结合 src/components 下的源码实现系统梳理各组件 prop 更名、v-model 接入、事件语义变化与受控属性调整帮助开发者把基于 iView 1.x 的业务代码平滑迁移到 2.x。为什么需要这份变更清单Vue 2.0 对组件 API 的硬性约束Vue 2.0 相比 1.x 在组件通信与表单组件上做了两项根本性调整直接导致 iView 大量组件的对外 API 必须重设计.sync修饰符被移除。Vue 1.x 中父组件通过props.sync实现子组件状态的双向绑定2.x 官方推荐使用v-model组件内部$emit(input)或显式props 事件的方式。iView 因此把大量组件的当前值prop 统一改名为value并在内部通过$emit(input)与v-model对接。key成为 Vue 的保留关键字用于列表渲染的虚拟 DOM diff 标识不能再作为业务标识 prop 使用iView 统一将其更名为name。从源码中可以清楚看到这一设计痕迹例如 radio.vue 中this.$emit(input, value)、switch.vue 中this.$emit(input, checked)、collapse.vue 中this.$emit(input, newActiveKey)组件内currentValue与value通过watch同步正是 v-model 协议的完整实现。表单类组件全面接入 v-modelVue 1.x 时代 iView 表单组件普遍使用checked、value混合的受控写法2.x 版本统一收敛为valuev-model同时用label取代value作为选项的标识值。Radio 与 RadioGroup变更要点Radio的value改为label使用v-model废弃checkedRadioGroup使用v-model。在 radio.vue 中Radio的 props 变为value当前选中值、trueValue/falseValue选中/未选中时的输出值默认true/false和label选项标识。点击时先更新currentValue再$emit(input, value)驱动 v-modelradio.vueRadioGroup则维护统一的currentValue并在子项变化时调用updateValue()同步所有子项的高亮态radio-group.vue。!-- 1.xvalue / checked -- radio-group v-modelgender radio valuemale checked男/radio radio valuefemale女/radio /radio-group !-- 2.xlabel v-model -- radio-group v-modelgender radio labelmale男/radio radio labelfemale女/radio /radio-groupCheckbox 与 CheckboxGroup变更要点Checkbox与CheckboxGroup均改用v-model其中Checkbox的value改为label、废弃checkedCheckboxGroup的当前值集合通过value数组承载。典型写法checkbox-group v-modelhobbies checkbox labelread阅读/checkbox checkbox labelcode编码/checkbox /checkbox-groupSwitch变更要点废弃checked改为value使用v-model。switch.vue 的 props 为value默认false与trueValue/falseValue默认true/false。切换时在 toggle 中做防抖与beforeChange前置校验支持返回 Promise通过 handleToggle 更新currentValue并$emit(input, checked)。switch v-modelenabled true-valueon false-valueoff/switchInputNumber变更要点使用v-model。用法上只需把原来的:valueon-change手动回写改为v-model即可。Slider变更要点支持v-model。README.md 中的官方示例即为此形态template Slider v-modelvalue range / /template script export default { data () { return { value: [20, 50] } } } /scriptrange模式下value为区间数组由组件内部在拖拽结束时通过$emit(input, ...)回写。Select变更要点model改为value支持v-model。这是最直接的属性更名搜索代码中所有model绑定并替换为value事件侧保持on-change不变。DatePicker变更要点使用v-model。时间类组件的当前选中值统一从valueprop 手动监听改为v-model绑定。Cascader变更要点Caspanel的sublist由 prop 改为 data。这一改动意味着级联子面板的列表数据不再由外部注入 prop而是组件内部状态管理外部只需维护顶层value通过 v-model子级展开由组件自身递归计算。结构性组件key 更名与受控属性调整Collapse变更要点废弃activeKey使用v-modelkey是保留字Panel的标识更名为name。collapse.vue 的value接受Array | String支持手风琴模式accordion多选时自动收敛为第一个panel.vue 的name缺省时回退为索引child.name || index.toString()见 collapse.vue。collapse v-modelactiveNames accordion panel namep1面板一/panel panel namep2面板二/panel /collapseTabs变更要点废弃activeKey改用value使用v-modelkey更名为name。tabs.vue 的value为String | Numbernameprop 用于 Tabs 嵌套时区分层级切换时 handleChange 更新activeKey并$emit(input, nav.name)。注意TabPane的name同时作为v-model的匹配标识。Carousel变更要点废弃activeIndex使用v-model另外需注意 Vue 2 的数字循环从 1 开始v-forn in slides.length中n的取值区间为[1, length]源码中指示点判等即使用n - 1 currentIndexcarousel.vue。carousel v-modelcurrentSlide autoplay carousel-item1/carousel-item carousel-item2/carousel-item /carouselTree变更要点废弃data改为value使用v-modelkey更名为name不能再在 template 的 prop 上使用this。需要说明的是当前 tree.vue 仍保留了data作为节点树数据源Array同时通过on-select-change、on-check-change、on-toggle-expand等事件对外通信选中/勾选结果由事件回调获取迁移时若 1.x 依赖data绑定选中态应改为value 事件回调组合。key→name影响的是节点标识字段命名且模板 prop 中不能再使用this引用Vue 2 模板表达式作用域限制。Menu变更要点MenuItem和Submenu的key改为nameMenu的activeKey改为activeName、openKeys改为openNames。menu.vue 中activeName为String | NumberopenNames为数组展开状态通过广播on-update-active-name同步menu.vue手风琴模式下updateOpenKeys会先收起所有Submenu再展开目标项menu.vue。menu active-name1 open-names[2] on-selecthandleSelect menu-item name1首页/menu-item submenu name2 template slottitle设置/template menu-item name2-1个人资料/menu-item /submenu /menuDropdown变更要点DropdownItem的key改为nameDropdown的visible不再sync改用on-visible-change捕获DropdownItem中this.$parent.$parent的层级关系与 1.x 有区别。Modal变更要点visible改为value使用v-modelstyle改为styles$Modal的关闭行为有改动官方建议在纯 html 模式下测试验证。modal.vue 中valueBoolean默认false作为显隐受控值内部visible转为 data 状态配合transition动画styles用于自定义弹窗样式对象。modal v-modelshowModal title提示 p内容区域/p /modalCircle变更要点改名为iCircle。当前源码 circle.vue 的组件name即为iCircle在使用处需同步替换组件标签。展示与反馈类组件命名与事件调整Badge / Page变更要点class改为className。两个组件的自定义样式类 prop 均从class更名为className避免与 Vue 2 模板中class特殊属性冲突。Progress名称有警告变更要点新增on-status-change事件。迁移时除保留原有百分比 prop 绑定外需监听on-status-change以感知进度完成/异常等状态变化该组件名在 1.x 中已存在命名冲突警告注意按 2.x 文档使用正式组件名。Upload变更要点父级不能 computedUpload的fileList了。1.x 允许父组件通过计算属性直接派生子组件文件列表2.x 中fileList改为组件内部状态父级通过on-change、on-success、on-error等事件获取上传结果。LoadingBar变更要点部分 prop 移至 data。加载条组件由函数式 APIthis.$Loading.start()/finish()驱动内部状态改由 data 管理外部只需调用实例方法。Message变更要点notice.vue的key改为了namestyle改为stylesnotification.vue同理。该变更同时影响Notice与Notification两个轻提示组件的内部注册标识与样式 prop迁移时检查所有自定义样式绑定。底层 Popper 体系受控值统一为 value变更要点Popper移除了visible使用value受控可能涉及Poptip、Tooltip两个组件。这是本次迁移中最具系统性的一处所有基于 base/popper.js 实现的浮层组件弹出/收起状态统一改为value受控。对业务代码的影响主要是Poptip、Tooltip的显隐从poptip visibletrue改为poptip valuetrue且可使用 v-model交互状态变化不再通过sync回传而是监听on-popper-show/on-popper-hide具体事件名以 2.x 文档为准等事件驱动。迁移清单速查表组件1.x 写法2.x 写法备注Radio / RadioGroupvalue、checkedlabelv-model废弃checkedCheckbox / CheckboxGroupvalue、checkedlabelv-model废弃checkedSwitchcheckedvaluev-model支持trueValue/falseValueInputNumber / Slider / DatePicker / Select / Cascader手动绑定v-modelSelect 的model更名为valueCollapseactiveKey、keyvaluev-model、namekey为保留字TabsactiveKey、keyvaluev-model、name—CarouselactiveIndexvaluev-modelVue 2 数字循环从 1 开始Treedata、keyvalue 事件回调、name模板 prop 禁用thisMenuactiveKey、openKeys、keyactiveName、openNames、name—Dropdownkey、visiblesyncname、on-visible-change注意$parent层级差异Modalvisible、stylevaluev-model、styles$Modal关闭逻辑有改动CircleCircleiCircle组件更名Badge / PageclassclassName—Progress—新增on-status-change组件名有警告UploadcomputedfileList事件回调获取fileList移入内部LoadingBarprop 注入部分 prop 移至 data—Message / Noticekey、stylename、styles—Poptip / TooltipPoppervisiblevalue受控不再 sync迁移验证建议优先全仓搜索activeKey、openKeys、:value.sync、change.native等 1.x 遗留写法逐一对照上表替换表单组件验证重点确认v-model绑定后组件内部$emit(input)是否正确驱动父级数据更新可参照 radio.vue、switch.vue、collapse.vue 的实现核对浮层组件验证重点value受控后手动关闭如点击遮罩、ESC 键是否触发对应事件并同步父级状态保留组件 props 关键字校验key已为 Vue 保留字任何自定义keyprop 都必须改为name若项目使用 TypeScript可同步参考 types 目录下各组件.d.ts声明如 modal.d.ts、collapse.d.ts校验 prop 类型与事件签名。通过以上梳理可以看到iView 2.x 的 API 变化并非零散修补而是围绕 Vue 2.0 的v-model协议、key保留字与受控组件三大机制展开的系统性重构。按 CHANGE.md 清单逐项核对并替换即可将存量 1.x 业务代码平稳迁移至 2.x。赞分享前端UI组件【免费下载链接】iviewA high quality UI Toolkit built on Vue.js 2.0项目地址https://gitcode.com/gh_mirrors/iv/iview点击查看免费下载相关推荐Vux 2.x 升级完全指南从 Vue 1.x 迁移到 Vue 2.x 的 API 变更、构建配置与组件改造实战Vux 2.x 升级完全指南从 Vue 1.x 迁移到 Vue 2.x 的 API 变更、构建配置与组件改造实战 本篇技术指南以 Vux 官方《升级到 vuxUI组件前端Vux 2.0 升级迁移指南从 Vue 1.x 到 Vue 2.x 的组件库变更全解析Vux 2.0 升级迁移指南从 Vue 1.x 到 Vue 2.x 的组件库变更全解析 本文是 Vux基于 Vue 与 WeUI 的移动端 UI 组件库从UI组件前端React Native Reanimated 迁移指南从 1.x 到 2.x 的增量迁移策略与 API 重命名清单React Native Reanimated 迁移指南从 1.x 到 2.x 的增量迁移策略与 API 重命名清单 本文以官方文档 migration.md移动开发前端上一篇Layerdivider一键将图片转换为可编辑的PSD分层文件下一篇终极5分钟掌握HunterPie《怪物猎人世界》智能数据覆盖插件完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
