[重构] 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>