a

src/components/DateRangePicker/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <el-form-item :label="label" :required="required" :style="outerStyle">
+    <el-row :gutter="20">
+      <el-col :span="11">
+        <el-form-item :prop="startProp">
+          <slot name="startDatePicker">
+          </slot>
+        </el-form-item>
+      </el-col>
+      <el-col :span="2" class="time-separator">
+        <slot name="separator">
+          <span>{{ separator }}</span>
+        </slot>
+      </el-col>
+      <el-col :span="11">
+        <el-form-item :prop="endProp">
+          <slot name="endDatePicker">
+          </slot>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form-item>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  label: string
+  startProp: string
+  endProp: string
+  startValue: string
+  endValue: string
+  required?: boolean
+  separator?: string
+  startPlaceholder?: string
+  endPlaceholder?: string
+  outerStyle?: string | Record<string, string>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  required: false,
+  separator: '至',
+  outerStyle: () => ({})
+})
+
+// 将 outerStyle 字符串或对象转换为样式对象
+const outerStyle = computed(() => {
+  if (typeof props.outerStyle === 'object' && !Array.isArray(props.outerStyle)) {
+    return props.outerStyle
+  }
+  if (typeof props.outerStyle === 'string' && props.outerStyle) {
+    const style: Record<string, string> = {}
+    props.outerStyle.split(';').forEach((rule) => {
+      const [key, value] = rule.split(':').map(s => s.trim())
+      if (key && value) {
+        // 将 kebab-case 转换为 camelCase
+        const camelKey = key.replace(/-([a-z])/g, (g) => g[1].toUpperCase())
+        style[camelKey] = value
+      }
+    })
+    return style
+  }
+  return {}
+})
+</script>
+
+<style lang="scss" scoped>
+.time-separator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 32px;
+  
+  span {
+    color: #909399;
+    font-size: 14px;
+    line-height: 1;
+    display: inline-block;
+  }
+}
+</style>