ow

WebVue/src/components/basic/icons-select/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <Popover v-model:open="visible" placement="bottomLeft" trigger="focus">
+    <template #content>
+      <div class="select-box">
+        <template v-for="iconItem in glyphs" :key="iconItem.font_class">
+          <div :title="iconItem.name" class="select-box-item"
+            :class="{ active: modelValue?.replace('icon-', '') == iconItem.font_class }" @click="selectIcon(iconItem)">
+            <cust-icon-font :type="iconItem.font_class" size="20" />
+          </div>
+        </template>
+      </div>
+    </template>
+    <a-input :disabled="disabled" v-model:value="modelValue" :placeholder="placeholder">
+      <template v-if="modelValue" #prefix>
+        <cust-icon-font :type="modelValue" size="22" />
+      </template>
+    </a-input>
+  </Popover>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { useVModel } from '@vueuse/core';
+import { Popover } from 'ant-design-vue';
+import icons from './icons.json';
+import { CustIconFont } from '@/components/basic/iconfont';
+
+const { glyphs } = icons;
+
+interface Props {
+  value: string;
+  placeholder?: string;
+  disabled:boolean;
+}
+
+interface Emits {
+  (e: 'update:value', val: string): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: '',
+  placeholder: '请选择',
+});
+
+const emit = defineEmits<Emits>();
+
+const visible = ref(false);
+const modelValue = useVModel(props, 'value', emit);
+
+const selectIcon = (iconItem: (typeof glyphs)[number]) => {
+  modelValue.value = iconItem.font_class;
+  visible.value = false;
+};
+</script>
+<style lang="less" scoped>
+.select-box {
+  display: grid;
+  grid-template-columns: repeat(9,minmax(0,1fr));
+  height: 300px;
+  width: 600px;
+  overflow: auto;
+  justify-content:flex-start;
+
+  &-item {
+    display: flex;
+    margin: -2px;
+    padding: -6px;
+    height: 30px;
+    width: 30px;
+
+    border: 1px solid #e5e7eb;
+
+    &:hover,
+    &.active {
+      border: 1px solid #e5e7eb;
+    }
+  }
+}
+</style>