@hexinfo/ares-ui

Ares

goframe admin ui library

安装依赖

npm -g install yarn

yarn install

本地运行

npm run serve

编译打包

npm run build

生成API

1. 需启动后台服务
2. 确认API文档路径（package.json -> scripts -> api）配置正确

npm run api

开发使用debugger、console

package.json配置

"rules": {
  "no-debugger": 0,
  "no-console": 0
}

IE兼容性

vue.config.js配置

# 打包的时候vue.js、vue-router.js排除在外，然后再index.html里面单独引用
configureWebpack:{
    externals: {
        'vue': 'Vue',
        'vue-router': 'VueRouter'
    }
},

# babel配置,node_module模块非es5语法转成es5语法
transpileDependencies:[
    "@hex/gf-ui",
    "sm-crypto"
]

vue-grid-layout 存在拉取无法拖拽到尾部情况处理

注意:只能在组中项目使用,否则容易报错 参考:手动修复npm中bug 安装patch-package

yarn add patch-package -D

package.json 下修改

//添加postinstall
"scripts": {
    "postinstall": "patch-package"
  }

常见目录patches/vue-grid-layout+2.4.0.patch,代码如下

diff --git a/node_modules/vue-grid-layout/dist/vue-grid-layout.common.js b/node_modules/vue-grid-layout/dist/vue-grid-layout.common.js
index c25562f..d9f203a 100644
--- a/node_modules/vue-grid-layout/dist/vue-grid-layout.common.js
+++ b/node_modules/vue-grid-layout/dist/vue-grid-layout.common.js
@@ -12243,7 +12243,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
      * @return {Object} x and y in grid units.
      */
     // TODO check if this function needs change in order to support rtl.
-    calcXY: function calcXY(top, left) {
+    calcXY: function calcXY(top, left,width,height) {
       var colWidth = this.calcColWidth(); // left = colWidth * x + margin * (x + 1)
       // l = cx + m(x+1)
       // l = cx + mx + m
@@ -12255,8 +12255,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
       var x = Math.round((left - this.margin[0]) / (colWidth + this.margin[0]));
       var y = Math.round((top - this.margin[1]) / (this.rowHeight + this.margin[1])); // Capping
 
-      x = Math.max(Math.min(x, this.cols - this.innerW), 0);
-      y = Math.max(Math.min(y, this.maxRows - this.innerH), 0);
+      const _width  = width||this.innerW
+                const _height  = height|| this.innerH
+                x = Math.max(Math.min(x, this.cols - _width), 0);
+                y = Math.max(Math.min(y, this.maxRows - _height), 0);
       return {
         x: x,
         y: y