【⚠️重要】Vue DevUI 1.0版本组件田主做好自检、保障好组件的质量 · Issue #I4K3VI · DevUI/vue-devui

以下是Vue DevUI 1.0版本的组件列表及对应的田主，为了确保组件和田主能正确对应上，请田主们确认是否有遗漏或错误，如果您是以下组件列表中某个组件的田主，请在issue下面评论：
1. 如果对应关系正确，请回复：`我是xx组件的田主，且对应关系正确`
2. 如果对应关系错误，请回复：`我是xx组件的田主，但对应关系错误`

----

2021.11.29 更新

# 1.0 发版自检 Checklist 总览

【⚠️重要】1.0发布之前，田主需要做好以下Checklist：
1. 自己和组件的对应关系无误 - ✅
2. 确认自己的组件田完成度(status)数据正确 - 进行中
3. 确保自己的组件田没有明显的严重缺陷(通过安装`vue-devui@latest`并在vite项目中使用来验证) - 进行中
4. 确保自己的组件demo/api文档没有缺失或错误（通过访问[vue devui](https://devui.gitee.io/)官网验证，参考[ng devui官网](http://devui.design/)） - 进行中
5. 确认自己的组件田已添加对应的英文文档 - 进行中
6. 确认自己的组件田已完善单元测试 - 进行中

----

2021.11.30 更新

# 组件功能自检步骤

组件功能自检步骤：

第1步：创建一个vite工程

第2步：在vite工程中安装和引入最新版本`Vue DevUI`
1. `npm i vue-devui`
1. `import DevUI from 'vue-devui'`
1. `import 'vue-devui/style.css'`
1. `createApp(App).use(DevUI).mount('#app')`

第3步：测试组件最核心的L0功能
1. 在页面中以最简方式(只写必填的props或slots)使用相应的组件`<d-button>确认</d-button>`，看默认情况下，渲染和功能是否正常。![输入图片说明](https://images.gitee.com/uploads/images/2021/1130/093242_4b319de4_7746958.png "屏幕截图.png")
1. 测试最核心的交互功能，比如Button最核心的是click事件：`<d-button @click="confirm">确认</d-button>`

第4步：测试每一个单独的api功能是否符合预期
1. 测试`type`的每一个值是否符合预期
1. 测试`disabled`是否正常
1. ...

第5步：测试api之间的组合是否功能正常

第6步：测试边界情况（可选）
1. 测试空值：`null`、`undefined`、`NaN`、`''`、`0`、`[]`、`{}`等值
1. 测试文本超长/超短的、其他语言、特殊的emoji字符等
1. 数值类型则测试超大数值、负数、0、小数等
1. 测试组件在浏览器边缘显示是否正常
1. 快速操作，比如快速连续单击/双击/快速拖拽等

第7步：兼容性测试（可选）
1. Chrome最新的3个大版本（Windows 10）
1. Firefox最新的3个大版本（Windows 10）
1. Edge最新的3个大版本（Windows 10）
1. Safari最新的3个大版本（MacOS 10）

----

2021.11.30 17:00 更新

# 组件文档自检步骤

组件文档的自检以[ng devui](https://devui.design/components/zh-cn/overview)文档为依据，需要照着`ng devui`官网的文档来，不一致的地方需要保持一致，如果有无法保持不一致的地方，可以记录下为什么不一致。

Ng DevUI官网：

[https://devui.design/components/zh-cn/overview](https://devui.design/components/zh-cn/overview)

组件文档自检步骤：

第1步：检查组件md文档的`标题`、`描述`、`何时使用`3块内容是否缺失、不一致或有错别字

第2步：检查组件demo是否正确

1. 检查右侧`快速前往`的demo分类数量、名称是否正确
2. 检查每一个demo与ng devui的是否一致，主要看demo使用的api是否正确，使用的文案是否正确

第3步：检查api是否正确

api一般是一个表格，也有文字说明的，保持和`ng devui`一致即可

1. 检查每一个api的`名称`、`类型`、`默认值`、`说明`、`跳转demo` 5项是否与`ng devui`一致

------

# 组件列表

通用(8)
✅1. Button 按钮 - [zcating](https://gitee.com/zcating)
✅2. Fullscreen 全屏 - [micd](https://gitee.com/micd)
✅3. Icon 图标 - [kagol](https://gitee.com/kagol)
✅4. Overlay 遮罩层 - [zcating](https://gitee.com/zcating)
✅5. Panel 面板 - [editorwang](https://gitee.com/editorwang)
✅6. Ripple 水波纹 - [ErKeLost](https://gitee.com/ErKeLost)
✅7. Search 搜索框 - [laiweilun](https://gitee.com/laiweilun)
✅8. Status 状态 - [LiuSuY](https://gitee.com/LiuSuY)

导航(1)
✅1. Pagination 分页 - [kd554246839](https://gitee.com/kd554246839)

反馈(5)
✅1. Alert 警告 - [to0simple](https://github.com/to0simple)/[zzzautumn](https://gitee.com/zzzautumn)
✅2. Loading 加载提示 - [kd554246839](https://gitee.com/kd554246839)
✅3. Modal 模态弹窗 - [zcating](https://gitee.com/zcating)
✅4. Popover 悬浮提示 - [JsHai](https://gitee.com/JsHai)
✅5. Toast 全局提示 - [RootWater](https://gitee.com/RootWater)

数据录入(7)
✅1. Checkbox 复选框 - [liao-jianguo](https://gitee.com/liao-jianguo)
✅2. Input 输入框 - [laiweilun](https://gitee.com/laiweilun)
✅3. Radio 单选框 - [xuehongjie](https://gitee.com/xuehongjie)
✅4. Slider 滑块 - [httpxiaobocom](https://gitee.com/httpxiaobocom)
✅5. Switch 开关 - [vergil_lu](https://gitee.com/vergil_lu)
✅6. Textarea 多行文本框 - [afterain](https://gitee.com/afterain)
✅7. Upload 上传 - [zzzautumn](https://gitee.com/zzzautumn)

数据展示(9)
✅1. Avatar 头像 - [zzzautumn](https://gitee.com/zzzautumn)
✅2. Badge 徽标 - [sise209](https://gitee.com/sise209)/[micd](https://gitee.com/micd)
✅3. Card 卡片 - [vergil_lu](https://gitee.com/vergil_lu)
✅4. Carousel 走马灯 - [onlyoupon](https://gitee.com/onlyoupon)
✅5. ImagePreview 图片预览 - [sise209](https://gitee.com/sise209)
✅6. Progress 进度条 - [lao--hu](https://gitee.com/lao--hu)
✅7. Rate 评分 - [zzzautumn](https://gitee.com/zzzautumn)
✅8. Skeleton 骨架屏 - [ivestszheng](https://gitee.com/ivestszheng)
✅9. TimeAxis 时间轴 - [jenson-miao](https://gitee.com/jenson-miao)

布局(3)
✅1. Grid 栅格 - [tanwenxue](https://gitee.com/tanwenxue)
✅2. Layout 布局 - [tanwenxue](https://gitee.com/tanwenxue)
✅3. Splitter 分割器 - [Jecyu](https://gitee.com/Jecyu)

DevUI/vue-devui

内容风险标识

【⚠️重要】Vue DevUI 1.0版本组件田主做好自检、保障好组件的质量置顶

评论 (21)

DevUI/vue-devui .gitee-modal { width: 500px !important; }

内容风险标识

【⚠️重要】Vue DevUI 1.0版本组件田主做好自检、保障好组件的质量 置顶

评论 (21)

搜索帮助

DevUI/vue-devui

【⚠️重要】Vue DevUI 1.0版本组件田主做好自检、保障好组件的质量置顶