修改

Your Name

2022-08-11 988558aaa309068fd393cc654be537434b0a15ea

 src/components/iconSelector/index.vue

@@ -1,10 +1,31 @@
<template>
    <div class="icon-selector w100 h100">
        <el-popover placement="bottom" :width="fontIconWidth" trigger="click" transition="el-zoom-in-top" popper-class="icon-selector-popper" @show="onPopoverShow">
      <el-popover
         placement="bottom"
         :width="fontIconWidth"
         trigger="click"
         transition="el-zoom-in-top"
         popper-class="icon-selector-popper"
         @show="onPopoverShow"
      >
            <template #reference>
                <el-input v-model="fontIconSearch" :placeholder="fontIconPlaceholder" :clearable="clearable" :disabled="disabled" :size="size" ref="inputWidthRef" @clear="onClearFontIcon" @focus="onIconFocus" @blur="onIconBlur">
            <el-input
               v-model="fontIconSearch"
               :placeholder="fontIconPlaceholder"
               :clearable="clearable"
               :disabled="disabled"
               :size="size"
               ref="inputWidthRef"
               @clear="onClearFontIcon"
               @focus="onIconFocus"
               @blur="onIconBlur"
            >
                    <template #prepend>
                        <SvgIcon :name="fontIconPrefix === '' ? prepend : fontIconPrefix" class="font14" v-if="fontIconPrefix === '' ? prepend?.indexOf('ele-') > -1 : fontIconPrefix?.indexOf('ele-') > -1" />
                  <SvgIcon
                     :name="fontIconPrefix === '' ? prepend : fontIconPrefix"
                     class="font14"
                     v-if="fontIconPrefix === '' ? prepend?.indexOf('ele-') > -1 : fontIconPrefix?.indexOf('ele-') > -1"
                  />
                        <i v-else :class="fontIconPrefix === '' ? prepend : fontIconPrefix" class="font14"></i>
                    </template>
                </el-input>
@@ -52,47 +73,47 @@
        // 输入框前置内容
        prepend: {
            type: String,
            default: () => 'ele-Pointer'
         default: () => 'ele-Pointer',
        },
        // 输入框占位文本
        placeholder: {
            type: String,
            default: () => '请输入内容搜索图标或者选择图标'
         default: () => '请输入内容搜索图标或者选择图标',
        },
        // 输入框占位文本
        size: {
            type: String,
            default: () => 'default'
         default: () => 'default',
        },
        // 弹窗标题
        title: {
            type: String,
            default: () => '请选择图标'
         default: () => '请选择图标',
        },
        // icon 图标类型
        type: {
            type: String,
            default: () => 'ele'
         default: () => 'ele',
        },
        // 禁用
        disabled: {
            type: Boolean,
            default: () => false
         default: () => false,
        },
        // 是否可清空
        clearable: {
            type: Boolean,
            default: () => true
         default: () => true,
        },
        // 自定义空状态描述文字
        emptyDescription: {
            type: String,
            default: () => '无相关图标'
         default: () => '无相关图标',
        },
        // 双向绑定值，默认为 modelValue，
        // 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#%E8%BF%81%E7%A7%BB%E7%AD%96%E7%95%A5
        // 参考：https://v3.cn.vuejs.org/guide/component-custom-events.html#%E5%A4%9A%E4%B8%AA-v-model-%E7%BB%91%E5%AE%9A
        modelValue: String
      modelValue: String,
    },
    setup(props, { emit }) {
        const inputWidthRef = ref();
@@ -105,7 +126,7 @@
            fontIconSheetsList: [],
            fontIconPlaceholder: '',
            fontIconType: 'ali',
            fontIconShow: true
         fontIconShow: true,
        });
        // 处理 input 获取焦点时，modelValue 有值时，改变 input 的 placeholder 值
        const onIconFocus = () => {
@@ -224,8 +245,8 @@
            onIconFocus,
            onIconBlur,
            onPopoverShow,
            ...toRefs(state)
         ...toRefs(state),
        };
    }
   },
});
</script>