NgMiduComponents

title: 全局组件库

组件列表

组件名 | 说明 ----|------ dropdown | 下拉菜单组件 avatar | 头像组件 auth | 微博认证组件 emot | 情绪类型组件 video | 视频播放组件 text-area | textarea组件 text-input | text-input组件

dropdown 下拉菜单组件

dropdown是为了优化列表中带有下拉菜单的渲染速度而创建的，需要挂载一个元素作为按钮，可以用< button>、< a>、iconfont图标等，组件有一个option插槽，用于放置下拉内容。miMenuItem是下拉内容的鼠标略过点击指令，会给元素加上一个mi-dropdown-menu-itemclass类，我们可以给这个类自定义样式。 组件可以根据元素在屏幕中的位置自适应显示下拉框方向。

avatar 头像组件 和 auth 微博认证组件 emot 情绪类型组件 组合使用

avatar组件是为了能够挂载类似微博认证、情绪标签等元素而创建的，可以使用[userUrl]设置没有图片的情况下的默认图片，可以使用[size]设置头像的大小。有些数据没有头像图片，可以通过[type]插槽可以设置来源类型头像，同时需要加上[miAvatarType]这个指令为[type]插槽加上一个样式类[mi-avatar-type]。

video 视频播放组件

指令名 | 说明 ----|------ clickOutside | 点击元素以外的地方 miErrorImg | 判断图片URL是否失效，并设置默认图片

miErrorImg 判断图片URL是否失效，并设置默认图片

判断图片URL是否失效，并设置默认图片

clickOutside 点击元素以外区域的方法

可用于需要点击指定元素以外的区域来隐藏元素的需求。

管道名 | 说明 ----|------ miFilesize | 转换文件大小格式 miNumberFormat | 转换数字超过千位数显示对应的单位来缩写数字 miFilter | 可用于搜索提取内容

miFilesize 转换文件大小格式

可用于需要将表示文件大小的数字转换为更为易读的格式，比如：1024 转换为 1MB。

miNumberFormat 转换数字超过千位数显示对应的单位来缩写数字

可用于数字比较长的场景，超过千位数用，千、万、亿来表示

miFilter 可用于搜索提取内容

text-area 本组件用于高级方案设置时，存在特殊符号按钮的情况

text-input 本组件用于input统计字数

dependencies

"dependencies": { "@angular/animations": "~10.2.0", "@angular/common": "~10.2.0", "@angular/compiler": "~10.2.0", "@angular/core": "~10.2.0", "@angular/forms": "~10.2.0", "@angular/platform-browser": "~10.2.0", "@angular/platform-browser-dynamic": "~10.2.0", "@angular/router": "~10.2.0", "ng-zorro-antd": "^10.2.2", "jquery": "^3.4.1", "ngx-cookie-service": "^11.0.2", "rxjs": "~6.6.0", "ts-md5": "^1.2.7", "svgaplayerweb": "^2.3.1", "tslib": "^2.0.0", "zone.js": "~0.10.2" },