0.0.5 • Published 4 years ago
@enjoyor/enloop-ui v0.0.5
enloop-ui
这是 Enloop-Hub 开发过程中产生的公共组件库,用于类似Enloop-Hub系统开发,本项目基于 element ui,方便更快地开发风格类似的项目。
1.导入依赖:
yarn add @enjoyor/enloop-ui
2.在main.js引入:
import enloop from '@enjoyor/enloop-ui'
import '@enjoyor/enloop-ui/enloop-ui.css'
Vue.use(enloop)
ETop 页面顶部
<e-top :show-message-tip="true" :show-help="true"
user-name="用户123" system-name="系统1"
:menus="['用户信息','退出']" @dropdownMenuClick="dropdownMenuClick"
@helperClick="dropdownMenuClick" @systemNameClick="dropdownMenuClick"></e-top>
属性列表:
属性名称 | 说明 | 默认值 |
---|---|---|
show-message-tip | 是否显示信息推送框 | false |
show-help | 是否显示帮助按钮 | false |
user-name | 用户名 | 用户名 |
system-name | 系统名称 | 系统名称 |
menus | 下拉菜单数组 | '退出' |
函数列表:
函数名称 | 说明 | 参数 |
---|---|---|
dropdownMenuClick | 下拉菜单点击事件 | 菜单名称、$event |
helperClick | 帮助按钮点击事件 | $event |
systemNameClick | 系统名称点击事件 | $event |
EInputConverter 单位转换组件
此组件用于常见的单位转换,比如:
- 后端接收毫秒,用户输入秒,前端完成转换。
- 后端接收bit,用户输入M,前端完成转换,传入后端;
例如:前端需要输入G,后端接收M
<e-input-converter v-model="maxMemorySize" :precision="2"
:scale="1024" :max="100" :min="1">G</e-input-converter>
export default {
data () {
return {
// 10G
maxMemorySize: 10240
}
}
}
属性列表:
属性名称 | 说明 | 类型 | 默认值 |
---|---|---|---|
scale | 进制 | Number | |
max | 最大值 | Number | Number.MAX_VALUE |
min | 最小值 | Number | 0 |
precision | 小数位数 | Number | 0 |
插槽:
名称 | 作用 |
---|---|
- | 单位 |