Parcourir la Source

菜单管理,图标超出范围添加滚动条

daxiongYang 6 ans auparavant
Parent
commit
f4dd16e85c
1 fichiers modifiés avec 19 ajouts et 10 suppressions
  1. 19 10
      src/views/modules/sys/menu-add-or-update.vue

+ 19 - 10
src/views/modules/sys/menu-add-or-update.vue

47
              placement="bottom-start"
47
              placement="bottom-start"
48
              trigger="click"
48
              trigger="click"
49
              popper-class="mod-menu__icon-popover">
49
              popper-class="mod-menu__icon-popover">
50
              <div class="mod-menu__icon-list">
51
                <el-button
52
                  v-for="(item, index) in iconList"
53
                  :key="index"
54
                  @click="iconActiveHandle(item)"
55
                  :class="{ 'is-active': item === dataForm.icon }">
56
                  <icon-svg :name="item"></icon-svg>
57
                </el-button>
50
              <div class="mod-menu__icon-inner">
51
                <div class="mod-menu__icon-list">
52
                  <el-button
53
                    v-for="(item, index) in iconList"
54
                    :key="index"
55
                    @click="iconActiveHandle(item)"
56
                    :class="{ 'is-active': item === dataForm.icon }">
57
                    <icon-svg :name="item"></icon-svg>
58
                  </el-button>
59
                </div>
58
              </div>
60
              </div>
59
            </el-popover>
61
            </el-popover>
60
            <el-input v-model="dataForm.icon" v-popover:iconListPopover :readonly="true" placeholder="菜单图标名称" class="icon-list__input"></el-input>
62
            <el-input v-model="dataForm.icon" v-popover:iconListPopover :readonly="true" placeholder="菜单图标名称" class="icon-list__input"></el-input>
223
      }
225
      }
224
    }
226
    }
225
    &__icon-popover {
227
    &__icon-popover {
226
      max-width: 370px;
228
      width: 458px;
229
      overflow: hidden;
230
    }
231
    &__icon-inner {
232
      width: 478px;
233
      max-height: 258px;
234
      overflow-x: hidden;
235
      overflow-y: auto;
227
    }
236
    }
228
    &__icon-list {
237
    &__icon-list {
229
      max-height: 180px;
238
      width: 458px;
230
      padding: 0;
239
      padding: 0;
231
      margin: -8px 0 0 -8px;
240
      margin: -8px 0 0 -8px;
232
      > .el-button {
241
      > .el-button {