feat: 添加搜索下拉框

2025-04-15 02:20:00 +08:00 · 2024-08-25 15:55:53 +08:00 · 2024-08-25 15:55:53 +08:00 · 3d21bfd5c6
commit 3d21bfd5c6
parent ee9ddf4722
9 changed files with 69 additions and 12 deletions
--- a/src/components/Divider.vue
+++ b/src/components/Divider.vue
@ -1,7 +1,7 @@
 <template>
  <div :class="['divider', type]"
    :style="{
-      margin: type === 'horizontal' ? `${margin || 24}px 0` : `0 ${margin || 8}px`
+      margin: type === 'horizontal' ? `${margin >= 0 ? margin : 24}px 0` : `0 ${margin >= 0 ? margin : 8}px`
    }"
  ></div>
 </template>
@ -12,7 +12,7 @@ withDefaults(defineProps<{
  margin?: number
 }>(), {
  type: 'horizontal',
-  margin: 0,
+  margin: -1,
 })
 </script>

--- a/src/components/Input.vue
+++ b/src/components/Input.vue
@ -4,6 +4,7 @@
    :class="{
      'disabled': disabled,
      'focused': focused,
+      'simple': simple,
    }"
  >
    <span class="prefix">
@ -34,9 +35,11 @@ withDefaults(defineProps<{
  value: string
  disabled?: boolean
  placeholder?: string
+  simple?: boolean
 }>(), {
  disabled: false,
  placeholder: '',
+  simple: false,
 })

 const emit = defineEmits<{
@ -114,6 +117,10 @@ defineExpose({
    }
  }

+  &.simple {
+    border: 0;
+  }
+
  .prefix, .suffix {
    display: flex;
    justify-content: center;
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@ -21,13 +21,17 @@
    v-else
  >
    <template #content>
+      <template v-if="search">
+        <Input ref="searchInputRef" simple :placeholder="searchLabel" v-model:value="searchKey" :style="{ width: width + 2 + 'px' }" />
+        <Divider :margin="0" />
+      </template>
      <div class="options" :style="{ width: width + 2 + 'px' }">
        <div class="option" 
          :class="{
            'disabled': option.disabled,
            'selected': option.value === value,
          }"
-          v-for="option in options" 
+          v-for="option in showOptions" 
          :key="option.value"
          @click="handleSelect(option)"
        >{{ option.label }}</div>
@ -47,6 +51,11 @@
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import Popover from './Popover.vue'
+import Input from './Input.vue'
+import Divider from './Divider.vue'
+import { watch } from 'vue';
+import { nextTick } from 'vue';
+import { onBeforeUnmount } from 'vue';

 interface SelectOption {
  label: string
@ -58,12 +67,12 @@ const props = withDefaults(defineProps<{
  value: string | number
  options: SelectOption[]
  disabled?: boolean
+  search?: boolean
+  searchLabel?: string
 }>(), {
  disabled: false,
-})
-
-const showLabel = computed(() => {
-  return props.options.find(item => item.value === props.value)?.label || props.value
+  search: false,
+  searchLabel: '搜索',
 })

 const emit = defineEmits<{
@ -72,7 +81,34 @@ const emit = defineEmits<{

 const popoverVisible = ref(false)
 const selectRef = ref<HTMLElement>()
+const searchInputRef = ref<InstanceType<typeof Input>>()
 const width = ref(0)
+const searchKey = ref('')
+
+const showLabel = computed(() => {
+  return props.options.find(item => item.value === props.value)?.label || props.value
+})
+
+const showOptions = computed(() => {
+  if (!props.search) return props.options
+  if (!searchKey.value.trim()) return props.options
+  const opts = props.options.filter(item => {
+    return item.label.toLowerCase().indexOf(searchKey.value.toLowerCase()) !== -1
+  })
+  return opts.length ? opts : props.options
+})
+
+watch(popoverVisible, () => {
+  if (popoverVisible.value) {
+    nextTick(() => {
+      if (searchInputRef.value) searchInputRef.value.focus()
+    })
+  }
+  else searchKey.value = ''
+})
+onBeforeUnmount(() => {
+  searchKey.value = ''
+})

 const updateWidth = () => {
  if (!selectRef.value) return
--- a/src/views/Editor/Toolbar/ElementAnimationPanel.vue
+++ b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
@ -74,7 +74,7 @@
          </div>

          <div class="configs" v-if="handleElementAnimation[0]?.elId === element.elId">
-            <Divider style="margin: 16px 0;" />
+            <Divider :margin="16" />

            <div class="config-item">
              <div style="width: 35%;">持续时长：</div>
--- a/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
@ -54,6 +54,8 @@
      <Select
        style="width: 60%;;"
        :value="richTextAttrs.fontname"
+        search
+        searchLabel="搜索字体"
        @update:value="value => updateFontStyle('fontname', value as string)"
        :options="[
          ...availableFonts,
@ -67,6 +69,8 @@
      <Select
        style="width: 40%;"
        :value="richTextAttrs.fontsize"
+        search
+        searchLabel="搜索字号"
        @update:value="value => updateFontStyle('fontsize', value as string)"
        :options="fontSizeOptions.map(item => ({
          label: item, value: item
--- a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
@ -4,6 +4,8 @@
      <Select
        style="width: 50%;"
        :value="textAttrs.fontname"
+        search
+        searchLabel="搜索字体"
        @update:value="value => updateTextAttrs({ fontname: value as string })"
        :options="[
          ...availableFonts,
@ -17,6 +19,8 @@
      <Select
        style="width: 50%;"
        :value="textAttrs.fontsize"
+        search
+        searchLabel="搜索字号"
        @update:value="value => updateTextAttrs({ fontsize: value as string })"
        :options="fontSizeOptions.map(item => ({
          label: item, value: item
--- a/src/views/Editor/Toolbar/SlideDesignPanel.vue
+++ b/src/views/Editor/Toolbar/SlideDesignPanel.vue
@ -128,6 +128,8 @@
      <Select
        style="width: 60%;"
        :value="theme.fontName"
+        search
+        searchLabel="搜索字体"
        @update:value="value => updateTheme({ fontName: value as string })"
        :options="[
          ...availableFonts,
--- a/src/views/Editor/Toolbar/common/RichTextBase.vue
+++ b/src/views/Editor/Toolbar/common/RichTextBase.vue
@ -5,6 +5,8 @@
        class="font-select"
        style="width: 60%;"
        :value="richTextAttrs.fontname"
+        search
+        searchLabel="搜索字体"
        @update:value="value => emitRichTextCommand('fontname', value as string)"
        :options="[
          ...availableFonts,
@ -18,6 +20,8 @@
      <Select
        style="width: 40%;"
        :value="richTextAttrs.fontsize"
+        search
+        searchLabel="搜索字号"
        @update:value="value => emitRichTextCommand('fontsize', value as string)"
        :options="fontSizeOptions.map(item => ({
          label: item, value: item
--- a/src/views/Mobile/MobileEditor/ElementToolbar.vue
+++ b/src/views/Mobile/MobileEditor/ElementToolbar.vue
@ -46,7 +46,7 @@
          ><IconFontSize />-</Button>
        </ButtonGroup>
        
-        <Divider style="margin: 20px 0;" />
+        <Divider :margin="20" />

        <RadioGroup 
          class="row" 
@ -59,7 +59,7 @@
          <RadioButton value="right" style="flex: 1;"><IconAlignTextRight /></RadioButton>
        </RadioGroup>
        
-        <Divider style="margin: 20px 0;" />
+        <Divider :margin="20" />

        <div class="row-block">
          <div class="label">文字颜色：</div>
@ -93,7 +93,7 @@
          <Button style="flex: 1;" @click="deleteElement()"><IconDelete class="icon" /> 删除</Button>
        </ButtonGroup>
        
-        <Divider style="margin: 20px 0;" />
+        <Divider :margin="20" />

        <ButtonGroup class="row">
          <Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.TOP)"><IconSendToBack class="icon" /> 置顶</Button>
@ -102,7 +102,7 @@
          <Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.DOWN)"><IconSentToBack class="icon" /> 下移</Button>
        </ButtonGroup>
        
-        <Divider style="margin: 20px 0;" />
+        <Divider :margin="20" />

        <ButtonGroup class="row">
          <Button style="flex: 1;" @click="alignElementToCanvas(ElementAlignCommands.LEFT)"><IconAlignLeft class="icon" /> 左对齐</Button>