[重构] row col 组件, 支持 24 栅格, 非破坏性重构

src/module/col/index.vue

@@ -1,32 +1,39 @@
+<script lang="ts">
+export default {
+  name: "LayCol",
+};
+</script>
+
+<script setup lang="ts">
+import { computed, defineProps } from "vue";
+
+const props = defineProps<{
+  md?: string;
+  xs?: string;
+  sm?: string;
+  lg?: string;
+  mdOffset?: string;
+  xsOffset?: string;
+  smOffset?: string;
+  lgOffset?: string;
+}>();
+
+const classes = computed(() => {
+  return [
+    props.md ? "layui-col-md" + props.md : "",
+    props.xs ? "layui-col-xs" + props.xs : "",
+    props.sm ? "layui-col-sm" + props.sm : "",
+    props.lg ? "layui-col-lg" + props.lg : "",
+    props.mdOffset ? "layui-col-md-offset" + props.mdOffset : "",
+    props.xsOffset ? "layui-col-xs-offset" + props.xsOffset : "",
+    props.smOffset ? "layui-col-sm-offset" + props.smOffset : "",
+    props.lgOffset ? "layui-col-lg-offset" + props.lgOffset : "",
+  ];
+});
+</script>
+
 <template>
-  <div
-    class="layui-col"
-    :class="[
-      md ? 'layui-col-md' + md : '',
-      xs ? 'layui-col-xs' + xs : '',
-      sm ? 'layui-col-sm' + sm : '',
-      lg ? 'layui-col-lg' + lg : '',
-      mdOffset ? 'layui-col-md-offset' + mdOffset : '',
-      xsOffset ? 'layui-col-xs-offset' + xsOffset : '',
-      smOffset ? 'layui-col-sm-offset' + smOffset : '',
-      lgOffset ? 'layui-col-lg-offset' + lgOffset : '',
-    ]"
-  >
+  <div class="layui-col" :class="classes">
     <slot />
   </div>
 </template>
-
-<script setup name="LayCol" lang="ts">
-import { defineProps } from 'vue'
-
-const props = defineProps<{
-  md?: string
-  xs?: string
-  sm?: string
-  lg?: string
-  mdOffset?: string
-  xsOffset?: string
-  smOffset?: string
-  lgOffset?: string
-}>()
-</script>

src/module/row/index.less

@@ -0,0 +1,201 @@
+.layui-row:after,
+.layui-row:before {
+    content: '';
+    display: block;
+    clear: both;
+}
+
+/** generate space */
+.generate-space(@a) {
+
+    .layui-col-space@{a} {
+        margin: -0.5px * @a;
+    }
+
+    .layui-col-space@{a}>* {
+        padding: 0.5px * @a;
+    }
+}
+
+.loop-generate-space(@index) when (@index <=30) {
+    .generate-space(@index);
+    .loop-generate-space(@index + 1);
+}
+
+.loop-generate-space(1);
+
+/** generate col xs */
+
+.generate-col-xs(@a) {
+
+    .layui-col-xs@{a} {
+        float: left;
+        display: block;
+        position: relative;
+        box-sizing: border-box;
+        width: 100% * (@a / 24);
+    }
+
+    .layui-col-xs-offset@{a} {
+        margin-left: 100% * (@a / 24);
+    }
+}
+
+.generate-col-sm(@a) {
+
+    .layui-col-sm@{a} {
+        float: left;
+        display: block;
+        position: relative;
+        box-sizing: border-box;
+        width: 100% * (@a / 24);
+    }
+
+    .layui-col-sm-offset@{a} {
+        margin-left: 100% * (@a / 24);
+    }
+}
+
+.generate-col-md(@a) {
+
+    .layui-col-md@{a} {
+        float: left;
+        display: block;
+        position: relative;
+        box-sizing: border-box;
+        width: 100% * (@a / 24);
+    }
+
+    .layui-col-md-offset@{a} {
+        margin-left: 100% * (@a / 24);
+    }
+}
+
+.generate-col-lg(@a) {
+
+    .layui-col-lg@{a} {
+        float: left;
+        display: block;
+        position: relative;
+        box-sizing: border-box;
+        width: 100% * (@a / 24);
+    }
+
+    .layui-col-lg-offset@{a} {
+        margin-left: 100% * (@a / 24);
+    }
+}
+
+.loop-generate-col-xs(@index) when (@index <=24) {
+    .generate-col-xs(@index);
+    .loop-generate-col-xs(@index + 1)
+}
+
+.loop-generate-col-sm(@index) when (@index <=24) {
+    .generate-col-sm(@index);
+    .loop-generate-col-sm(@index + 1)
+}
+
+.loop-generate-col-md(@index) when (@index <=24) {
+    .generate-col-md(@index);
+    .loop-generate-col-md(@index + 1)
+}
+
+.loop-generate-col-lg(@index) when (@index <=24) {
+    .generate-col-lg(@index);
+    .loop-generate-col-lg(@index + 1)
+}
+
+@media screen and (max-width: 768px) {
+    .layui-hide-xs {
+        display: none !important;
+    }
+
+    .layui-show-xs-block {
+        display: block !important;
+    }
+
+    .layui-show-xs-inline {
+        display: inline !important;
+    }
+
+    .layui-show-xs-inline-block {
+        display: inline-block !important;
+    }
+
+    .loop-generate-col-xs(1);
+}
+
+
+@media screen and (min-width: 768px) {
+    .layui-container {
+        width: 750px;
+    }
+
+    .layui-hide-sm {
+        display: none !important;
+    }
+
+    .layui-show-sm-block {
+        display: block !important;
+    }
+
+    .layui-show-sm-inline {
+        display: inline !important;
+    }
+
+    .layui-show-sm-inline-block {
+        display: inline-block !important;
+    }
+
+    .loop-generate-col-sm(1)
+}
+
+
+@media screen and (min-width: 992px) {
+    .layui-container {
+        width: 970px;
+    }
+
+    .layui-hide-md {
+        display: none !important;
+    }
+
+    .layui-show-md-block {
+        display: block !important;
+    }
+
+    .layui-show-md-inline {
+        display: inline !important;
+    }
+
+    .layui-show-md-inline-block {
+        display: inline-block !important;
+    }
+
+    .loop-generate-col-md(1)
+}
+
+@media screen and (min-width: 1200px) {
+    .layui-container {
+        width: 1170px;
+    }
+
+    .layui-hide-lg {
+        display: none !important;
+    }
+
+    .layui-show-lg-block {
+        display: block !important;
+    }
+
+    .layui-show-lg-inline {
+        display: inline !important;
+    }
+
+    .layui-show-lg-inline-block {
+        display: inline-block !important;
+    }
+
+    .loop-generate-col-lg(1)
+}

src/module/row/index.ts

@@ -6,4 +6,4 @@ Component.install = (app: App) => {
   app.component(Component.name || 'LayRow', Component)
 }
 
-export default Component as IDefineComponent
+export default Component as IDefineComponent

src/module/row/index.vue

@@ -1,13 +1,25 @@
+<script lang="ts">
+export default {
+  name: "LayRow",
+};
+</script>
+
+<script setup lang="ts">
+import { computed, defineProps } from "vue";
+import "./index.less";
+
+const props = defineProps<{
+  space?: string;
+}>();
+
+const classes = computed(() => {
+  return [props.space ? "layui-col-space" + props.space : ""];
+});
+</script>
+
 <template>
-  <div class="layui-row" :class="[space ? 'layui-col-space' + space : '']">
+  <div class="layui-row" :class="classes">
     <slot />
   </div>
 </template>
 
-<script setup name="LayRow" lang="ts">
-import { defineProps } from 'vue'
-
-const props = defineProps<{
-  space?: string
-}>()
-</script>