兰宝车间质量管理系统-前端
疯狂的狮子Li
2023-04-03 97187b246b94dd58cb585ebaed7e8644d2f00119
src/components/IconSelect/index.vue
@@ -1,48 +1,3 @@
<script setup lang="ts">
import icons from '@/components/IconSelect/requireIcons';
const props = defineProps({
  modelValue: {
    type: String,
    require: true
  },
  width: {
    type: String,
    require: false,
    default: '400px'
  }
});
const emit = defineEmits(['update:modelValue']);
const visible = ref(false);
const { modelValue, width } = toRefs(props);
const iconNames = ref<string[]>(icons);
const filterValue = ref('');
/**
 * 筛选图标
 */
const filterIcons = () => {
  if (filterValue.value) {
    iconNames.value = icons.filter(iconName =>
      iconName.includes(filterValue.value)
    );
  } else {
    iconNames.value = icons;
  }
}
/**
 * 选择图标
 * @param iconName 选择的图标名称
 */
const selectedIcon = (iconName: string) => {
  emit('update:modelValue', iconName);
  visible.value = false;
}
</script>
<template>
  <div class="relative" :style="{ width: width }">
    <el-input v-model="modelValue" readonly @click="visible = !visible" placeholder="点击选择图标">
@@ -74,6 +29,51 @@
  </div>
</template>
<script setup lang="ts">
import icons from '@/components/IconSelect/requireIcons';
const props = defineProps({
    modelValue: {
        type: String,
        require: true
    },
    width: {
        type: String,
        require: false,
        default: '400px'
    }
});
const emit = defineEmits(['update:modelValue']);
const visible = ref(false);
const { modelValue, width } = toRefs(props);
const iconNames = ref<string[]>(icons);
const filterValue = ref('');
/**
 * 筛选图标
 */
const filterIcons = () => {
    if (filterValue.value) {
        iconNames.value = icons.filter(iconName =>
            iconName.includes(filterValue.value)
        );
    } else {
        iconNames.value = icons;
    }
}
/**
 * 选择图标
 * @param iconName 选择的图标名称
 */
const selectedIcon = (iconName: string) => {
    emit('update:modelValue', iconName);
    visible.value = false;
}
</script>
<style scoped lang="scss">
.el-divider--horizontal {
  margin: 10px auto !important;