去除element滚动条
This commit is contained in:
		
							parent
							
								
									b4f2a4f7dd
								
							
						
					
					
						commit
						6a18e06339
					
				@ -5,16 +5,14 @@
 | 
			
		||||
      <i slot="suffix" class="el-icon-search el-input__icon" />
 | 
			
		||||
    </el-input>
 | 
			
		||||
    <div class="icon-list">
 | 
			
		||||
      <el-scrollbar>
 | 
			
		||||
        <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: 30px;width: 16px;" />
 | 
			
		||||
              <span :title="item">{{ item }}</span>
 | 
			
		||||
            </div>
 | 
			
		||||
      <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>
 | 
			
		||||
      </el-scrollbar>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
@ -63,27 +61,21 @@ export default {
 | 
			
		||||
    }
 | 
			
		||||
    .icon-list {
 | 
			
		||||
      height: 200px;
 | 
			
		||||
      ::v-deep .el-scrollbar {
 | 
			
		||||
        height: 100%;
 | 
			
		||||
        .el-scrollbar__wrap {
 | 
			
		||||
          overflow-x: hidden;
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
      overflow: auto;
 | 
			
		||||
      .list-container {
 | 
			
		||||
        display: flex;
 | 
			
		||||
        flex-wrap: wrap;
 | 
			
		||||
        .icon-item-wrapper {
 | 
			
		||||
          width: calc(100% / 3);
 | 
			
		||||
          height: 30px;
 | 
			
		||||
          line-height: 30px;
 | 
			
		||||
          margin-bottom: -5px;
 | 
			
		||||
          height: 25px;
 | 
			
		||||
          line-height: 25px;
 | 
			
		||||
          cursor: pointer;
 | 
			
		||||
          display: flex;
 | 
			
		||||
          .icon-item {
 | 
			
		||||
            display: flex;
 | 
			
		||||
            max-width: 100%;
 | 
			
		||||
            height: 100%;
 | 
			
		||||
            padding: 0 2px;
 | 
			
		||||
            padding: 0 5px;
 | 
			
		||||
            &:hover {
 | 
			
		||||
              background: #ececec;
 | 
			
		||||
              border-radius: 5px;
 | 
			
		||||
 | 
			
		||||
@ -87,7 +87,7 @@ export default {
 | 
			
		||||
      bottom: 0px;
 | 
			
		||||
    }
 | 
			
		||||
    .el-scrollbar__wrap {
 | 
			
		||||
      height: 49px;
 | 
			
		||||
      height: 39px;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user