row column 布局属性优化

Author: SmallRuralDog

public/app.js

@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=aa3a61559592bb7e4225",
+    "/app.js": "/app.js?id=868d166b1127889c43e9",
     "/manifest.js": "/manifest.js?id=8991394a854ee5cdffc3",
     "/vendor.js": "/vendor.js?id=df0be4950fcb717193ba"
 }

public/mix-manifest.json

@@ -60,7 +60,7 @@ php artisan vendor:publish --tag=laravel-vue-admin-lang --force
 // 清理视图缓存
 php artisan view:clear
 ```
-最后不要忘记清理浏览器缓存
+最后不要忘记清理浏览器缓存，如果有CDN也要更新CDN的缓存
 
 # 感谢
 

readme.md

@@ -165,7 +165,7 @@
           </el-table-column>
         </el-table>
       </div>
-      <div class="table-page padding-sm">
+      <div class="table-page padding-xs">
         <el-pagination
           :layout="attrs.pageLayout"
           :hide-on-single-page="false"

resources/js/components/grid/Table.vue

@@ -1,5 +1,18 @@
 <template>
-  <el-col :span="attrs.width" :style="attrs.style" :class="attrs.className">
+  <el-col
+    :span="attrs.width"
+    :offset="attrs.offset"
+    :push='attrs.push'
+    :pull='attrs.pull'
+    :xs='attrs.xs'
+    :sm='attrs.sm'
+    :md='attrs.md'
+    :lg='attrs.lg'
+    :xl='attrs.xl'
+    :tag='attrs.tag'
+    :style="attrs.style"
+    :class="attrs.className"
+  >
     <component
       v-for="(content, index) in attrs.contents"
       :key="index"
@@ -13,8 +26,8 @@
 <script>
 export default {
   props: {
-    attrs: Object
-  }
+    attrs: Object,
+  },
 };
 </script>
 

resources/js/components/layout/Column.vue

@@ -1,5 +1,13 @@
 <template>
-  <el-row :gutter="attrs.gutter" :style="attrs.style" :class="attrs.className">
+  <el-row
+    :gutter="attrs.gutter"
+    :type="attrs.type"
+    :justify="attrs.justify"
+    :align="attrs.align"
+    :tag="attrs.tag"
+    :style="attrs.style"
+    :class="attrs.className"
+  >
     <component
       v-for="(column, index) in attrs.columns"
       :key="index"
@@ -13,8 +21,8 @@
 <script>
 export default {
   props: {
-    attrs: Object
-  }
+    attrs: Object,
+  },
 };
 </script>
 

resources/js/components/layout/Row.vue

@@ -13,6 +13,16 @@ class Column extends Component
 
     protected $width = 24;
 
+    protected $span;
+    protected $offset;
+    protected $push;
+    protected $pull;
+    protected $xs;
+    protected $md;
+    protected $lg;
+    protected $xl;
+    protected $tag;
+
     protected $contents = [];
 
     public function __construct($content, $width = 24)
@@ -43,4 +53,106 @@ public function row($content)
         $this->append($row);
     }
 
+    /**
+     * @param mixed $span
+     * @return $this
+     */
+    public function span($span)
+    {
+        $this->span = $span;
+        return $this;
+    }
+
+    /**
+     * @param mixed $offset
+     * @return $this
+     */
+    public function offset($offset)
+    {
+        $this->offset = $offset;
+        return $this;
+    }
+
+    /**
+     * @param mixed $push
+     * @return $this
+     */
+    public function push($push)
+    {
+        $this->push = $push;
+        return $this;
+    }
+
+    /**
+     * @param mixed $pull
+     * @return $this
+     */
+    public function pull($pull)
+    {
+        $this->pull = $pull;
+        return $this;
+    }
+
+    /**
+     * @param mixed $xs
+     * @return $this
+     */
+    public function xs($xs)
+    {
+        $this->xs = $xs;
+        return $this;
+    }
+
+    /**
+     * @param mixed $md
+     * @return $this
+     */
+    public function md($md)
+    {
+        $this->md = $md;
+        return $this;
+    }
+
+    /**
+     * @param mixed $lg
+     * @return $this
+     */
+    public function lg($lg)
+    {
+        $this->lg = $lg;
+        return $this;
+    }
+
+    /**
+     * @param mixed $xl
+     * @return $this
+     */
+    public function xl($xl)
+    {
+        $this->xl = $xl;
+        return $this;
+    }
+
+    /**
+     * @param mixed $tag
+     * @return $this
+     */
+    public function tag($tag)
+    {
+        $this->tag = $tag;
+        return $this;
+    }
+
+    /**
+     * @param array $contents
+     * @return $this
+     */
+    public function contents(array $contents)
+    {
+        $this->contents = $contents;
+        return $this;
+    }
+
+
+
 }

src/Layout/Column.php

@@ -16,6 +16,10 @@ class Row extends Component
     protected $columns = [];
 
     protected $gutter = 0;
+    protected $type;
+    protected $justify = "start";
+    protected $align = "top";
+    protected $tag = "div";
 
     public function __construct($content = '')
     {
@@ -31,7 +35,7 @@ public function item($item)
     {
         if ($item instanceof \Closure) {
             $this->addColumn(call_user_func($item));
-        }else{
+        } else {
             $this->addColumn($item);
         }
 
@@ -61,4 +65,51 @@ public function gutter($gutter)
         $this->gutter = $gutter;
         return $this;
     }
+
+    /**
+     * 布局模式，可选 flex，现代浏览器下有效
+     * @param mixed $type
+     * @return $this
+     */
+    public function type($type)
+    {
+        $this->type = $type;
+        return $this;
+    }
+
+    /**
+     * flex 布局下的水平排列方式
+     * start/end/center/space-around/space-between
+     * @param string $justify
+     * @return $this
+     */
+    public function justify(string $justify)
+    {
+        $this->justify = $justify;
+        return $this;
+    }
+
+    /**
+     * flex 布局下的垂直排列方式
+     * @param string $align
+     * @return $this
+     */
+    public function align(string $align)
+    {
+        $this->align = $align;
+        return $this;
+    }
+
+    /**
+     * 自定义元素标签
+     * @param string $tag
+     * @return $this
+     */
+    public function tag(string $tag)
+    {
+        $this->tag = $tag;
+        return $this;
+    }
+
+
 }