fix: 用浮层替换dropdown

Author: chenxi24

devui/editable-select/index.ts

@@ -1,14 +1,14 @@
 import type { App } from 'vue'
 import EditableSelect from './src/editable-select'
 import EditableSelectOption from './src/components/option'
-import EditableSelectDropdown from './src/components/dropdown'
+
 EditableSelect.install = function (app: App): void {
  app.component(EditableSelect.name, EditableSelect)
  app.component(EditableSelectOption.name, EditableSelectOption)
- app.component(EditableSelectDropdown.name, EditableSelectDropdown)
+
 }
 
-export { EditableSelect, EditableSelectOption, EditableSelectDropdown }
+export { EditableSelect, EditableSelectOption }
 
 export default {
  title: 'EditableSelect 可输入下拉选择框',

devui/editable-select/src/components/dropdown/index.tsx

@@ -3,8 +3,8 @@ import { defineComponent } from 'vue';
 export default defineComponent({
  name: 'DEditableSelectOption',
  setup(props, ctx) {
+ const defaultSlot = ctx.slots.default && ctx.slots.default();
  return () => {
- const defaultSlot = ctx.slots.default && ctx.slots.default();
  return <li class="devui-dropdown-item">{defaultSlot}</li>;
  };
  },

devui/editable-select/src/components/option/index.tsx

@@ -4,6 +4,19 @@ export const editableSelectProps = {
  /* test: {
  type: Object as PropType<{ xxx: xxx }>
  } */
+ width: {
+ type: Number,
+ default: 450
+ },
+ appendToBody: {
+ type: Boolean,
+ default: true,
+ },
+ maxHeight: {
+ type: Number,
+ default: 300
+ }
+
 } as const
 
 export type EditableSelectProps = ExtractPropTypes<typeof editableSelectProps>

devui/editable-select/src/editable-select-types.ts

@@ -1,32 +1,70 @@
 import './editable-select.scss';
 
-import { defineComponent, Transition } from 'vue';
+import { defineComponent, ref, reactive, renderSlot } from 'vue';
 import {
  editableSelectProps,
  EditableSelectProps,
 } from './editable-select-types';
 import { Icon } from '../../icon';
-import Dropdown from './components/dropdown';
+
 export default defineComponent({
  name: 'DEditableSelect',
  props: editableSelectProps,
  emits: [],
  setup(props: EditableSelectProps, ctx) {
- return () => {
- const defaultSlot = ctx.slots.default && ctx.slots.default();
+ const origin = ref(null);
+ const visible = ref(false);
+ const position = reactive({
+ originX: 'left',
+ originY: 'bottom',
+ overlayX: 'left',
+ overlayY: 'top',
+ });
 
+ const toggleMenu = () => {
+ visible.value = !visible.value;
+ };
+
+ return () => {
  return (
- <div class="devui-form-group devui-has-feedback devui-select-open">
- <input type="text" class="devui-form-control devui-dropdown-origin" />
- <span class="devui-form-control-feedback">
- <span class="devui-select-chevron-icon">
- <Icon name="select-arrow" />
+ <>
+ <div
+ class="devui-form-group devui-has-feedback devui-select-open"
+ onClick={toggleMenu}
+ ref={origin}
+ >
+ <input
+ type="text"
+ class="devui-form-control devui-dropdown-origin"
+ />
+ <span class="devui-form-control-feedback">
+ <span class="devui-select-chevron-icon">
+ <Icon name="select-arrow" />
+ </span>
  </span>
- </span>
- <Transition name="fade">
- <Dropdown>{defaultSlot}</Dropdown>
- </Transition>
- </div>
+ </div>
+ <d-flexible-overlay
+ origin={origin}
+ v-model={[visible.value, 'visible']}
+ position={position}
+ >
+ <div
+ class="devui-dropdown-wrap"
+ style={{ width: props.width + 'px' }}
+ >
+ <div class="devui-dropdown-menu">
+ <ul
+ class="devui-list-unstyled scroll-height"
+ style={{
+ maxHeight: props.maxHeight + 'px',
+ }}
+ >
+ {renderSlot(ctx.slots, 'default')}
+ </ul>
+ </div>
+ </div>
+ </d-flexible-overlay>
+ </>
  );
  };
  },

devui/editable-select/src/editable-select.tsx

@@ -12,7 +12,7 @@ const sidebar = {
  { text: 'Search 搜索框', link: '/components/search/', status: '已完成' },
  { text: 'Status 状态', link: '/components/status/', status: '已完成' },
  { text: 'Sticky 便贴', link: '/components/sticky/' },
- { text: 'Overlay 浮层', link: '/components/overlay/'}
+ { text: 'Overlay 浮层', link: '/components/overlay/' }
  ]
  },
  {
@@ -53,7 +53,7 @@ const sidebar = {
  { text: 'Checkbox 复选框', link: '/components/checkbox/', status: '已完成' },
  { text: 'DatePicker 日期选择器', link: '/components/date-picker/', status: '开发中' },
  { text: 'DatePickerPro 日期选择器', link: '/components/date-picker-pro/' },
- { text: 'EditableSelect 可编辑下拉框', link: '/components/editable-select/' },
+ { text: 'EditableSelect 可编辑下拉框', link: '/components/editable-select/', status: '开发中' },
  { text: 'Form 表单', link: '/components/form/' },
  { text: 'Input 文本框', link: '/components/input/', status: '已完成' },
  { text: 'InputNumber 数字输入框', link: '/components/input-number/' },