分页修改

chenrui

12 小时以前 ece2dfeb926d728b10db38038e4d12e9e9851c24

 src/components/IconSelect/index.vue

@@ -2,7 +2,7 @@
  <div class="icon-body">

    <el-input

      v-model="iconName"

      style="position: relative;"

      class="icon-search"

      clearable

      placeholder="请输入图标名称"

      @clear="filterIcons"

@@ -11,9 +11,13 @@
      <template #suffix><i class="el-icon-search el-input__icon" /></template>

    </el-input>

    <div class="icon-list">

      <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">

        <svg-icon :icon-class="item" style="height: 30px;width: 16px;" />

        <span>{{ item }}</span>

      <div class="list-container">

        <div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)">

          <div :class="['icon-item', { active: activeIcon === item }]">

            <svg-icon :icon-class="item" class-name="icon" style="height: 25px;width: 16px;"/>

            <span>{{ item }}</span>

          </div>

        </div>

      </div>

    </div>

  </div>

@@ -22,9 +26,15 @@
<script setup>

import icons from './requireIcons'



const iconName = ref('');

const iconList = ref(icons);

const emit = defineEmits(['selected']);

const props = defineProps({

  activeIcon: {

    type: String

  }

})



const iconName = ref('')

const iconList = ref(icons)

const emit = defineEmits(['selected'])



function filterIcons() {

  iconList.value = icons

@@ -49,26 +59,53 @@
</script>



<style lang='scss' scoped>

.icon-body {

  width: 100%;

  padding: 10px;

  .icon-list {

    height: 200px;

    overflow-y: scroll;

    div {

      height: 30px;

      line-height: 30px;

      margin-bottom: -5px;

      cursor: pointer;

      width: 33%;

      float: left;

   .icon-body {

    width: 100%;

    padding: 10px;

    .icon-search {

      position: relative;

      margin-bottom: 5px;

    }

    span {

      display: inline-block;

      vertical-align: -0.15em;

      fill: currentColor;

      overflow: hidden;

    .icon-list {

      height: 200px;

      overflow: auto;

      .list-container {

        display: flex;

        flex-wrap: wrap;

        .icon-item-wrapper {

          width: calc(100% / 3);

          height: 25px;

          line-height: 25px;

          cursor: pointer;

          display: flex;

          .icon-item {

            display: flex;

            max-width: 100%;

            height: 100%;

            padding: 0 5px;

            &:hover {

              background: #ececec;

              border-radius: 5px;

            }

            .icon {

              flex-shrink: 0;

            }

            span {

              display: inline-block;

              vertical-align: -0.15em;

              fill: currentColor;

              padding-left: 2px;

              overflow: hidden;

              text-overflow: ellipsis;

              white-space: nowrap;

            }

          }

          .icon-item.active {

            background: #ececec;

            border-radius: 5px;

          }

        }

      }

    }

  }

}

</style>