vue2 element ui 实现图标下拉选择-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue2 element ui 实现图标下拉选择。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue2 element ui 实现图标下拉选择

1.展示效果
vue2 element ui 实现图标下拉选择,vue,ui,vue,elementui,图标选择器
代码展示：
（1）封装icon.js

export const elementIcons = ["platform-eleme", "eleme", "delete-solid", "delete", "s-tools", "setting", "user-solid", "user", "phone", "phone-outline", "more", 
"more-outline", "star-on", "star-off", "s-goods", "goods", "warning", "warning-outline", "question", "info", "remove", "circle-plus", "success", "error", "zoom-in",
 "zoom-out", "remove-outline", "circle-plus-outline", "circle-check", "circle-close", "s-help", "help", "minus", "plus", "check", "close", "picture", "picture-outline",
  "picture-outline-round", "upload", "upload2", "download", "camera-solid", "camera", "video-camera-solid", "video-camera", "message-solid", "bell", "s-cooperation",
   "s-order", "s-platform", "s-fold", "s-unfold", "s-operation", "s-promotion", "s-home", "s-release", "s-ticket", "s-management", "s-open", "s-shop", "s-marketing",
    "s-flag", "s-comment", "s-finance", "s-claim", "s-custom", "s-opportunity", "s-data", "s-check", "s-grid", "menu", "share", "d-caret", "caret-left", "caret-right",
     "caret-bottom", "caret-top", "bottom-left", "bottom-right", "back", "right", "bottom", "top", "top-left", "top-right", "arrow-left", "arrow-right", "arrow-down", 
     "arrow-up", "d-arrow-left", "d-arrow-right", "video-pause", "video-play", "refresh", "refresh-right", "refresh-left", "finished", "sort", "sort-up", "sort-down", 
     "rank", "loading", "view", "c-scale-to-original", "date", "edit", "edit-outline", "folder", "folder-opened", "folder-add", "folder-remove", "folder-delete", 
     "folder-checked", "tickets", "document-remove", "document-delete", "document-copy", "document-checked", "document", "document-add", "printer", "paperclip", "takeaway-box",
      "search", "monitor", "attract", "mobile", "scissors", "umbrella", "headset", "brush", "mouse", "coordinate", "magic-stick", "reading", "data-line", "data-board", 
      "pie-chart", "data-analysis", "collection-tag", "film", "suitcase", "suitcase-1", "receiving", "collection", "files", "notebook-1", "notebook-2", "toilet-paper",
       "office-building", "school", "table-lamp", "house", "no-smoking", "smoking", "shopping-cart-full", "shopping-cart-1", "shopping-cart-2", "shopping-bag-1", 
       "shopping-bag-2", "sold-out", "sell", "present", "box", "bank-card", "money", "coin", "wallet", "discount", "price-tag", "news", "guide", "male", "female",
        "thumb", "cpu", "link", "connection", "open", "turn-off", "set-up", "chat-round", "chat-line-round", "chat-square", "chat-dot-round", "chat-dot-square",
         "chat-line-square", "message", "postcard", "position", "turn-off-microphone", "microphone", "close-notification", "bangzhu", "time", "odometer", "crop",
          "aim", "switch-button", "full-screen", "copy-document", "mic", "stopwatch", "medal-1", "medal", "trophy", "trophy-1", "first-aid-kit", "discover", 
          "place", "location", "location-outline", "location-information", "add-location", "delete-location", "map-location", "alarm-clock", "timer", "watch-1", 
          "watch", "lock", "unlock", "key", "service", "mobile-phone", "bicycle", "truck", "ship", "basketball", "football", "soccer", "baseball", "wind-power",
           "light-rain", "lightning", "heavy-rain", "sunrise", "sunrise-1", "sunset", "sunny", "cloudy", "partly-cloudy", "cloudy-and-sunny", "moon",
            "moon-night", "dish", "dish-1", "food", "chicken", "fork-spoon", "knife-fork", "burger", "tableware", "sugar", "dessert", "ice-cream", "hot-water",
             "water-cup", "coffee-cup", "cold-drink", "goblet", "goblet-full", "goblet-square", "goblet-square-full", "refrigerator", "grape", "watermelon", "cherry",
              "apple", "pear", "orange", "coffee", "ice-tea", "ice-drink", "milk-tea", "potato-strips", "lollipop", "ice-cream-square",
               "ice-cream-round"].map(s => "el-icon-" + s);

(2) 在需要使用的页面复制进去

import {elementIcons} from '@/utils/icon'

//created里使用
this.iconList=elementIcons

（3）在自己需要使用的地方复制进去

 <div class="chooseIcons">
        
            <el-popover placement="top-start" :append-to-body="false" width="30vw" trigger="click">
              <div slot="reference"   class="iconDiv">
                <i :class="userChooseIcon"></i>
                <div class="iconName">{{ chooseIcons}}</div>
              </div>
              <div class="iconList">
                <i
                  v-for="item in iconList"
                  :key="item"
                  :class="[item, 'icon']"
                  @click="setIcon(item)"
                  style="font-size: 20px"
                ></i>
              </div>
            </el-popover>
          </div>

（4）css样式部分


.chooseIcons {
  width: 100%;

}
.iconList {
  width: 30vw;
  height: 300px;
  overflow-y: scroll;
  overflow-x: hidden;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.icon {
  display: inline-block;
  width: 60px;
  height: 45px;
  color: #000000;
  font-size: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  line-height: 45px;
  margin: 5px;

}
.icon:hover {
  color: red;
  border-color: red;
}
.iconDiv {
  width: 100%;
  height: 50%;

  display: flex;
  flex-direction: row;
  align-items: center;
}
.iconName {
  width: 50%;
  height: 45px;
  text-align: center;
  border: 1px solid #eee;
}

（5）初始化数据文章来源地址https://www.toymoban.com/news/detail-692276.html

export default {
  data() {
    return {
        userChooseIcon:"",
        chooseIcons:"",
        iconList:[]
    }
  },
  methods: {
      //给icon绑定的点击事件
setIcon(icon){
    console.log(icon)
    this.userChooseIcon=icon;//将i的样式设为选中的样式el-icon-xxx
    this.chooseIcons=""
}
  }  
   
}