src/components/Icon/src/IconSelect.vue

@@ -11,6 +11,10 @@
  modelValue: {
    require: false,
    type: String
  },
  clearable: {
    require: false,
    type: Boolean
  }
})
const emit = defineEmits<{ (e: 'update:modelValue', v: string) }>()
@@ -92,6 +96,12 @@
  currentPage.value = page
}

function clearIcon() {
  icon.value = ''
  emit('update:modelValue', '')
  visible.value = false
}

watch(
  () => {
    return props.modelValue
@@ -115,14 +125,14 @@

<template>
  <div class="selector">
    <ElInput v-model="inputValue" @click="visible = !visible">
    <ElInput v-model="inputValue" @click="visible = !visible" :clearable="props.clearable" @clear="clearIcon">
      <template #append>
        <ElPopover
          :popper-options="{
            placement: 'auto'
          }"
          :visible="visible"
          :width="350"
          :width="355"
          popper-class="pure-popper"
          trigger="click"
        >
@@ -147,7 +157,7 @@
            >
              <ElDivider border-style="dashed" class="tab-divider" />
              <ElScrollbar height="220px">
                <ul class="ml-2 flex flex-wrap px-2">
                <ul class="ml-2 flex flex-wrap">
                  <li
                    v-for="(item, key) in pageList"
                    :key="key"
@@ -171,7 +181,7 @@
            background
            class="h-10 flex items-center justify-center"
            layout="prev, pager, next"
            small
            size="small"
            @current-change="onCurrentChange"
          />
        </ElPopover>