组件+

src/components/Menu/index.vue

@@ -1,3 +1,19 @@
+<template>
+  <ul
+    :class="`${namespace}-menu`"
+    :style="{ flexDirection: direction === 'horizontal' ? 'row' : 'column' }"
+  >
+    <li
+      :class="[`${namespace}-menu-item`, active === value && 'is-active']"
+      v-for="{ label, value } in items"
+      :key="value"
+      @click="handleItemClick(value)"
+    >
+      {{ label }}
+    </li>
+  </ul>
+</template>
+
 <script setup lang="ts">
 import { inject, ref } from 'vue'
 import { $config, $configInit } from '@/config'
@@ -12,26 +28,16 @@ withDefaults(
   { placeholder: '请输入文本', direction: 'horizontal' }
 )
 
+const emits = defineEmits<{
+  change: [key: string]
+}>()
+
 const { namespace } = inject($config, $configInit)!
 
 const active = ref()
 
 const handleItemClick = (key) => {
   active.value = key
+  emits('change', key)
 }
 </script>
-
-<template>
-  <ul
-    :class="`${namespace}-menu`"
-    :style="{ flexDirection: direction === 'horizontal' ? 'row' : 'column' }"
-  >
-    <li
-      :class="[`${namespace}-menu-item`, active === value && 'is-active']"
-      v-for="{ label, value } in items"
-      @click="handleItemClick(value)"
-    >
-      {{ label }}
-    </li>
-  </ul>
-</template>

src/components/Popover/index.vue

@@ -2,9 +2,9 @@
   <div ref="reference" @click="handleClick" style="display: contents"><slot /></div>
   <Teleport to="body">
     <div
-      v-if="visible"
+      v-show="visible"
       ref="floating"
-      :style="{ ...floatingStyles, width: referenceSlot.clientWidth + 'px' }"
+      :style="{ ...floatingStyles, width: referenceSlot?.clientWidth + 'px' }"
       :class="ns('popover')"
     >
       <slot v-if="$slots.content" name="content" />
@@ -27,7 +27,7 @@ const reference = ref()
 const referenceSlot = computed(() => reference.value?.children[0])
 const floating = ref()
 const { floatingStyles } = useFloating(referenceSlot, floating, {
-  strategy: 'fixed',
+  // strategy: 'fixed',
   middleware: []
 })
 
@@ -43,6 +43,8 @@ const updatePosition = async () => {
     placement: props.placement // 指定初始化浮动位置
   })
 
+  console.log(x, y)
+
   Object.assign(floating.value.style, {
     transform: `translate(${x}px, ${y}px)`
   })
@@ -76,13 +78,18 @@ const dismiss = (event: MouseEvent) => {
 }
 
 onMounted(() => {
-  // console.dir(referenceSlot.value)
   window.addEventListener('click', dismiss)
 })
 
 onUnmounted(() => {
   window.removeEventListener('click', dismiss)
 })
 
-defineExpose({ visible })
+defineExpose({
+  visible,
+  referenceSlot,
+  close: () => {
+    visible.value = false
+  }
+})
 </script>

src/components/Select/index.vue

@@ -1,3 +1,18 @@
+<template>
+  <e-popover ref="popover">
+    <div :class="[`${namespace}-select`, popover?.visible && 'is-focus']" v-bind="$attrs">
+      <div v-if="!value" :class="ns('select-placeholder')">{{ placeholder }}</div>
+      <div v-else :class="ns('select-value')">
+        {{ options.find((item) => item.value === value).label }}
+      </div>
+    </div>
+
+    <template #content>
+      <e-menu :items="options" direction="vertical" @change="handleSelect" />
+    </template>
+  </e-popover>
+</template>
+
 <script setup lang="ts">
 import { inject, ref } from 'vue'
 import { $config, $configInit } from '@/config'
@@ -11,18 +26,13 @@ withDefaults(
   { placeholder: '请选择' }
 )
 
-const { namespace } = inject($config, $configInit)!
+const { namespace, ns } = inject($config, $configInit)!
 
 const value = defineModel()
 const popover = ref()
-</script>
 
-<template>
-  <e-popover ref="popover">
-    <div :class="[`${namespace}-select`, popover?.visible && 'is-focus']" v-bind="$attrs">
-      <div :class="`${namespace}-select-placeholder`" v-if="!value">{{ placeholder }}</div>
-    </div>
-
-    <template #content> </template>
-  </e-popover>
-</template>
+const handleSelect = (key) => {
+  value.value = key
+  popover.value.close()
+}
+</script>

src/globalComponents.d.ts

@@ -9,6 +9,7 @@ declare module 'vue' {
     ECheckbox: (typeof import('@/components'))['ECheckbox']
     ECheckboxGroup: (typeof import('@/components'))['ECheckboxGroup']
     EPopover: (typeof import('@/components'))['EPopover']
+    EMenu: (typeof import('@/components'))['EMenu']
   }
 }
 

src/style/button.scss

@@ -1,7 +1,7 @@
 $buttonClass: '#{$namespace}-button-';
 
 @include ns(button) {
-  border-radius: $border-radius;
+  border-radius: getVar('border', 'radius');
   height: 40px;
   padding: 15px;
   display: inline-flex;
@@ -14,7 +14,7 @@ $buttonClass: '#{$namespace}-button-';
   transition-duration: 0.2s;
   border: 1px solid getVar('button', 'border', 'color');
   color: getVar('button', 'text-color');
-  font-size: 14px;
+  font-size: getVar('font-size-base');
   vertical-align: middle;
 
   &:hover:not(.is-disabled, .is-text) {
@@ -28,7 +28,6 @@ $buttonClass: '#{$namespace}-button-';
     transform: scale(0.95);
   }
 
-
   &.is-text {
     background-color: transparent;
     border: none;

src/style/dialog.scss

@@ -13,7 +13,7 @@
   margin: getVar('dialog', 'top') auto 0;
   background-color: getVar('bg', 'color');
   padding: 25px;
-  border-radius: $border-radius;
+  border-radius: getVar('border', 'radius');
   display: flex;
   flex-direction: column;
   gap: 15px;

src/style/menu.scss

@@ -9,6 +9,7 @@
   &-item {
     padding: 10px 12px;
     cursor: pointer;
+    font-size: getVar('font-size-base');
     &:hover {
       background-color: getVar('primary-color-8');
       border-radius: getVar('border', 'radius');

src/style/popover.scss

@@ -3,7 +3,8 @@
   border-radius: getVar('border', 'radius');
   box-shadow: getVar('box-shadow');
   min-width: 200px;
-  padding: 15px;
+  padding: 10px;
   z-index: 200;
   border: 1px solid getVar('border', 'color', 'lighter');
+  animation: fadeIn 0.3s;
 }

src/style/select.scss

@@ -5,9 +5,8 @@
   position: relative;
   min-height: 36px;
   cursor: pointer;
-
+  font-size: getVar('font-size-base');
   &-placeholder {
-    font-size: 14px;
     color: getVar('text', 'color', 'placeholder');
   }
 

src/style/table.scss

@@ -5,7 +5,7 @@
     .is-fixed {
       position: sticky;
       z-index: 20;
-      background-color: getVar('bg','color');
+      background-color: getVar('bg', 'color');
       &::after {
         content: '';
         position: absolute;
@@ -49,15 +49,15 @@
 
   &-tr {
     //padding: 10px;
-    border-bottom: 1px solid getVar('border', 'color','lighter');
+    border-bottom: 1px solid getVar('border', 'color', 'lighter');
     overflow: auto;
     position: relative;
   }
 
   &-td {
     padding: 12px 16px;
     position: relative;
-    font-size: 14px;
+    font-size: getVar('font-size-base');
   }
 
   &-cell {

src/style/var.scss

@@ -44,6 +44,7 @@ $darks: (
 
 :root {
   @include setVar('border-radius', 7px);
+  @include setVar('font-size-base', 14px);
 
   @include generate-colors($themeColor, light);
   @include generate-var-map($lights);
@@ -52,7 +53,3 @@ $darks: (
     @include generate-var-map($darks);
   }
 }
-
-$border-radius: 7px;
-$border-color: #dcdfe6;
-$text-color: #303133;