vue2-client 1.10.7 → 1.10.8

package/src/base-client/components/common/XFormCol/XFormCol.vue

@@ -1,157 +1,157 @@
-<template>
-  <a-col :style="computedStyles">
-    <div
-      class="x-form-col-wrapper"
-      :style="computedWrapperStyles"
-    >
-      <slot></slot>
-    </div>
-  </a-col>
-</template>
-
-<script>
-const BREAKPOINTS = {
-  xs: 576,
-  sm: 768,
-  md: 992,
-  lg: 1200,
-  xl: 1600,
-}
-
-const defaultFlex = {
-  xs: 24,
-  sm: 24,
-  md: 8,
-  lg: 8,
-  xl: 6,
-  xxl: 6,
-}
-
-function debounce (fn, delay) {
-  let timeout = null
-  return function (...args) {
-    if (timeout) clearTimeout(timeout)
-    timeout = setTimeout(() => {
-      fn.apply(this, args)
-    }, delay)
-  }
-}
-
-export default {
-  name: 'XFormCol',
-  props: {
-    flex: {
-      type: Object,
-      default: () => ({
-        xs: 24,
-        sm: 24,
-        md: 8,
-        lg: 6,
-        xl: 6,
-        xxl: 6,
-      }),
-    },
-    occupyCol: {
-      type: Number,
-      default: 1,
-    },
-    layout: {
-      type: String,
-      default: 'horizontal',
-    },
-    labelCol: {
-      type: Object,
-      default: () => { return { span: 8 } }
-    }
-  },
-  computed: {
-    computedFlex () {
-      const parentWidth = this.parentWidth
-      return this.getFlex(parentWidth, this.flex)
-    },
-    computedWrapperStyles () {
-      const realFlex = this.flex.fullWidth ? this.getFlex(this.parentWidth) : this.computedFlex
-      // 1. 计算列数
-      const columnsCount = 24 / realFlex
-      // 2. 计算基准列宽
-      const baseColumnWidth = (this.parentWidth / columnsCount) - ((columnsCount - 1) * 16)
-      // 3. 计算label宽度
-      const labelWidth = Math.max(baseColumnWidth / (24 / this.labelCol.span), 80)
-      // 计算左右偏移量
-      const offset = this.labelCol.offset ? (this.labelCol.offset / 24) * 100 : 0
-      if (this.layout === 'vertical') {
-        return {
-          '--form-label-width': '',
-          '--form-offset': '',
-        }
-      }
-      return {
-        '--form-label-width': `${labelWidth}px`,
-        '--form-offset': `${offset}%`,
-      }
-    },
-    computedStyles () {
-      const realFlex = Math.min(this.computedFlex * this.occupyCol, 24)
-      const flexValue = (realFlex / 24) * 100
-
-      return {
-        flex: `0 0 ${flexValue}%`,
-        maxWidth: `${flexValue}%`,
-      }
-    },
-  },
-  data () {
-    return {
-      parentWidth: 0,
-    }
-  },
-  methods: {
-    getFlex (parentWidth, flex = defaultFlex) {
-      if (parentWidth === 0) {
-        return flex.xs
-      }
-      if (parentWidth < BREAKPOINTS.xs) return flex.xs
-      if (parentWidth < BREAKPOINTS.sm) return flex.sm
-      if (parentWidth < BREAKPOINTS.md) return flex.md
-      if (parentWidth < BREAKPOINTS.lg) return flex.lg
-      if (parentWidth < BREAKPOINTS.xl) return flex.xl
-      return flex.xxl
-    },
-  },
-  mounted () {
-    // 根据父容器宽度响应式
-    this.$nextTick(() => {
-      const container = this.$el.parentNode
-      this.parentWidth = container.offsetWidth
-      const updateWidth = debounce((width) => {
-        this.parentWidth = width
-      }, 100)
-
-      this.resizeObserver = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          updateWidth(entry.contentRect.width)
-        }
-      })
-      this.resizeObserver.observe(container)
-    })
-  },
-  beforeUnmount () {
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect()
-    }
-  },
-}
-</script>
-
-<style lang="less" scoped>
-.x-form-col-wrapper {
-  :deep(.ant-form-item) {
-    .ant-form-item-label {
-      max-width: var(--form-label-width);
-    }
-    .ant-form-item-control-wrapper {
-      width: calc(100% - var(--form-label-width) - var(--form-offset) - var(--form-offset));
-    }
-  }
-}
-</style>
+<template>
+  <a-col :style="computedStyles">
+    <div
+      class="x-form-col-wrapper"
+      :style="computedWrapperStyles"
+    >
+      <slot></slot>
+    </div>
+  </a-col>
+</template>
+
+<script>
+const BREAKPOINTS = {
+  xs: 576,
+  sm: 768,
+  md: 992,
+  lg: 1200,
+  xl: 1600,
+}
+
+const defaultFlex = {
+  xs: 24,
+  sm: 24,
+  md: 8,
+  lg: 8,
+  xl: 6,
+  xxl: 6,
+}
+
+function debounce (fn, delay) {
+  let timeout = null
+  return function (...args) {
+    if (timeout) clearTimeout(timeout)
+    timeout = setTimeout(() => {
+      fn.apply(this, args)
+    }, delay)
+  }
+}
+
+export default {
+  name: 'XFormCol',
+  props: {
+    flex: {
+      type: Object,
+      default: () => ({
+        xs: 24,
+        sm: 24,
+        md: 8,
+        lg: 6,
+        xl: 6,
+        xxl: 6,
+      }),
+    },
+    occupyCol: {
+      type: Number,
+      default: 1,
+    },
+    layout: {
+      type: String,
+      default: 'horizontal',
+    },
+    labelCol: {
+      type: Object,
+      default: () => { return { span: 8 } }
+    }
+  },
+  computed: {
+    computedFlex () {
+      const parentWidth = this.parentWidth
+      return this.getFlex(parentWidth, this.flex)
+    },
+    computedWrapperStyles () {
+      const realFlex = this.flex.fullWidth ? this.getFlex(this.parentWidth) : this.computedFlex
+      // 1. 计算列数
+      const columnsCount = 24 / realFlex
+      // 2. 计算基准列宽
+      const baseColumnWidth = (this.parentWidth / columnsCount) - ((columnsCount - 1) * 16)
+      // 3. 计算label宽度
+      const labelWidth = Math.max(baseColumnWidth / (24 / this.labelCol.span), 80)
+      // 计算左右偏移量
+      const offset = this.labelCol.offset ? (this.labelCol.offset / 24) * 100 : 0
+      if (this.layout === 'vertical') {
+        return {
+          '--form-label-width': '',
+          '--form-offset': '',
+        }
+      }
+      return {
+        '--form-label-width': `${labelWidth}px`,
+        '--form-offset': `${offset}%`,
+      }
+    },
+    computedStyles () {
+      const realFlex = Math.min(this.computedFlex * this.occupyCol, 24)
+      const flexValue = (realFlex / 24) * 100
+
+      return {
+        flex: `0 0 ${flexValue}%`,
+        maxWidth: `${flexValue}%`,
+      }
+    },
+  },
+  data () {
+    return {
+      parentWidth: 0,
+    }
+  },
+  methods: {
+    getFlex (parentWidth, flex = defaultFlex) {
+      if (parentWidth === 0) {
+        return flex.xs
+      }
+      if (parentWidth < BREAKPOINTS.xs) return flex.xs
+      if (parentWidth < BREAKPOINTS.sm) return flex.sm
+      if (parentWidth < BREAKPOINTS.md) return flex.md
+      if (parentWidth < BREAKPOINTS.lg) return flex.lg
+      if (parentWidth < BREAKPOINTS.xl) return flex.xl
+      return flex.xxl
+    },
+  },
+  mounted () {
+    // 根据父容器宽度响应式
+    this.$nextTick(() => {
+      const container = this.$el.parentNode
+      this.parentWidth = container.offsetWidth
+      const updateWidth = debounce((width) => {
+        this.parentWidth = width
+      }, 100)
+
+      this.resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          updateWidth(entry.contentRect.width)
+        }
+      })
+      this.resizeObserver.observe(container)
+    })
+  },
+  beforeUnmount () {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.x-form-col-wrapper {
+  :deep(.ant-form-item) {
+    .ant-form-item-label {
+      max-width: var(--form-label-width);
+    }
+    .ant-form-item-control-wrapper {
+      width: calc(100% - var(--form-label-width) - var(--form-offset) - var(--form-offset));
+    }
+  }
+}
+</style>