@enjoyor/enloop-ui

基于 element ui 封装的 Enloop UI

Usage no npm install needed!

<script type="module">
  import enjoyorEnloopUi from 'https://cdn.skypack.dev/@enjoyor/enloop-ui';
</script>

README

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

 <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 单位转换组件

e-input-convert

此组件用于常见的单位转换,比如:

  • 后端接收毫秒,用户输入秒,前端完成转换。
  • 后端接收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|

插槽:

名称|作用| -|-| -|单位|