smartai2dian0/src/modules/intelligent/ModalSelectIcon.vue

<template>
  <a-modal
    v-model:visible="showModal"
    :align-center="false"
    top="15vh"
    @cancel="handleCancel"
    @before-ok="handleBeforeOk"
  >
    <template #title>替换图标</template>
    <div class="section">
      <div class="labels">全部图标</div>
      <div class="icons">
        <div
          class="icon-border"
          v-for="icon in icons"
          :key="icon.icon"
          :class="{ 'icon-border-active': icon.id === target_icon }"
          @click="changeItem(icon.id)"
        >
          <img class="icon" :src="icon.icon" alt="" />
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, computed } from 'vue';
import intellFrame1 from '../../assets/image/management/intellFrame1.png';
import intellFrame2 from '../../assets/image/management/intellFrame2.png';
import intellFrame3 from '../../assets/image/management/intellFrame3.png';
import intellFrame4 from '../../assets/image/management/intellFrame4.png';
import intellFrame5 from '../../assets/image/management/intellFrame5.png';
import intellFrame6 from '../../assets/image/management/intellFrame6.png';

const props = defineProps({
  show_select_icon: {
    type: Boolean,
    default: false
  }
});
const icons = ref([
  {
    id: 1,
    icon: intellFrame1
  },
  {
    id: 2,
    icon: intellFrame2
  },
  {
    id: 3,
    icon: intellFrame3
  },
  {
    id: 4,
    icon: intellFrame4
  },
  {
    id: 5,
    icon: intellFrame5
  },
  {
    id: 6,
    icon: intellFrame6
  }
]);

const target_icon = ref(icons.value[0].id);
const emit = defineEmits(['update:show_model_item', 'sendIcon']);

const showModal = computed(() => props.show_select_icon);

const changeItem = (id) => {
  target_icon.value = id;
};
const handleBeforeOk = (done) => {
  emit('sendIcon', icons.value.filter((icon) => icon.id === target_icon.value)[0].icon);
  emit('update:show_select_icon', false);
  done();
};
const handleCancel = () => {
  emit('update:show_select_icon', false);
};
</script>
<style scoped lang="css">
.section {
  height: 200px;
  padding: 0 20px;
}
.icons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.icons .icon-border {
  /* width: 50px;
  height: 50px; */
  padding: 5px 10px;
  cursor: pointer;
}
.icon-border:hover {
  border: 1px solid var(--color-neutral-4);
  border-radius: 5px;
}
.icon-border .icon {
  width: 44px;
  height: 44px;
}
.icon-border-active {
  border: 1px solid var(--color-neutral-4);
  border-radius: 5px;
}
.arco-input-wrapper {
  height: 32px;
  background-color: var(--color-neutral-3);
}
</style>