tianheng-ui 0.1.70 → 0.1.71

package/packages/Icons/index.vue

@@ -1,37 +1,51 @@
 <template>
-  <div>
+  <div class="th-icons">
     <el-popover
-      placement="bottom-start"
-      :title="title"
+      popper-class="th-icons-popover"
       :width="width"
+      placement="bottom-start"
       trigger="click"
     >
       <el-input
-        :value="value"
+        :value="icon"
         slot="reference"
         placeholder="请选择图标"
         clearable
         @clear="handleInputClear"
       >
-        <div v-if="value" class="input-prefix" slot="prefix">
-          <i :class="value" class="icon" />
+        <div v-if="icon" class="input-prefix" slot="prefix">
+          <i :class="icon" class="icon" />
         </div>
       </el-input>
 
-      <div class="th-icons">
-        <i
-          v-for="(icon, index) in icons"
-          class="icon"
-          :class="icon"
-          :key="index"
-          @click="handleIconClick(icon)"
-        />
-      </div>
+      <el-tabs v-model="tabsActiveName" type="border-card">
+        <el-tab-pane label="Tianheng图标库" name="tianheng"> </el-tab-pane>
+        <el-tab-pane label="Element图标库" name="element"> </el-tab-pane>
+        <div v-if="tabsActiveName === 'tianheng'" class="th-icons-content">
+          <i
+            v-for="(icon, index) in tianhengIcons"
+            class="icon"
+            :class="icon"
+            :key="index"
+            @click="handleIconClick(icon)"
+          />
+        </div>
+        <div v-if="tabsActiveName === 'element'" class="th-icons-content">
+          <i
+            v-for="(icon, index) in elementIcons"
+            class="icon"
+            :class="icon"
+            :key="index"
+            @click="handleIconClick(icon)"
+          />
+        </div>
+      </el-tabs>
     </el-popover>
   </div>
 </template>
 
 <script>
+import { tianhengIcons, elementIcons } from "./index";
 export default {
   name: "ThIcons",
   model: {
@@ -39,10 +53,6 @@ export default {
     prop: "value"
   },
   props: {
-    title: {
-      type: String,
-      default: "Element图标库"
-    },
     value: {
       type: String,
       default: ""
@@ -54,303 +64,34 @@ export default {
   },
   data() {
     return {
-      icons: [
-        "el-icon-platform-eleme",
-        "el-icon-eleme",
-        "el-icon-delete-solid",
-        "el-icon-delete",
-        "el-icon-s-tools",
-        "el-icon-setting",
-        "el-icon-user-solid",
-        "el-icon-user",
-        "el-icon-phone",
-        "el-icon-phone-outline",
-        "el-icon-more",
-        "el-icon-more-outline",
-        "el-icon-star-on",
-        "el-icon-star-off",
-        "el-icon-s-goods",
-        "el-icon-goods",
-        "el-icon-warning",
-        "el-icon-warning-outline",
-        "el-icon-question",
-        "el-icon-info",
-        "el-icon-remove",
-        "el-icon-circle-plus",
-        "el-icon-success",
-        "el-icon-error",
-        "el-icon-zoom-in",
-        "el-icon-zoom-out",
-        "el-icon-remove-outline",
-        "el-icon-circle-plus-outline",
-        "el-icon-circle-check",
-        "el-icon-circle-close",
-        "el-icon-s-help",
-        "el-icon-help",
-        "el-icon-minus",
-        "el-icon-plus",
-        "el-icon-check",
-        "el-icon-close",
-        "el-icon-picture",
-        "el-icon-picture-outline",
-        "el-icon-picture-outline-round",
-        "el-icon-upload",
-        "el-icon-upload2",
-        "el-icon-download",
-        "el-icon-camera-solid",
-        "el-icon-camera",
-        "el-icon-video-camera-solid",
-        "el-icon-video-camera",
-        "el-icon-message-solid",
-        "el-icon-bell",
-        "el-icon-s-cooperation",
-        "el-icon-s-order",
-        "el-icon-s-platform",
-        "el-icon-s-fold",
-        "el-icon-s-unfold",
-        "el-icon-s-operation",
-        "el-icon-s-promotion",
-        "el-icon-s-home",
-        "el-icon-s-release",
-        "el-icon-s-ticket",
-        "el-icon-s-management",
-        "el-icon-s-open",
-        "el-icon-s-shop",
-        "el-icon-s-marketing",
-        "el-icon-s-flag",
-        "el-icon-s-comment",
-        "el-icon-s-finance",
-        "el-icon-s-claim",
-        "el-icon-s-custom",
-        "el-icon-s-opportunity",
-        "el-icon-s-data",
-        "el-icon-s-check",
-        "el-icon-s-grid",
-        "el-icon-menu",
-        "el-icon-share",
-        "el-icon-d-caret",
-        "el-icon-caret-left",
-        "el-icon-caret-right",
-        "el-icon-caret-bottom",
-        "el-icon-caret-top",
-        "el-icon-bottom-left",
-        "el-icon-bottom-right",
-        "el-icon-back",
-        "el-icon-right",
-        "el-icon-bottom",
-        "el-icon-top",
-        "el-icon-top-left",
-        "el-icon-top-right",
-        "el-icon-arrow-left",
-        "el-icon-arrow-right",
-        "el-icon-arrow-down",
-        "el-icon-arrow-up",
-        "el-icon-d-arrow-left",
-        "el-icon-d-arrow-right",
-        "el-icon-video-pause",
-        "el-icon-video-play",
-        "el-icon-refresh",
-        "el-icon-refresh-right",
-        "el-icon-refresh-left",
-        "el-icon-finished",
-        "el-icon-sort",
-        "el-icon-sort-up",
-        "el-icon-sort-down",
-        "el-icon-rank",
-        "el-icon-loading",
-        "el-icon-view",
-        "el-icon-c-scale-to-original",
-        "el-icon-date",
-        "el-icon-edit",
-        "el-icon-edit-outline",
-        "el-icon-folder",
-        "el-icon-folder-opened",
-        "el-icon-folder-add",
-        "el-icon-folder-remove",
-        "el-icon-folder-delete",
-        "el-icon-folder-checked",
-        "el-icon-tickets",
-        "el-icon-document-remove",
-        "el-icon-document-delete",
-        "el-icon-document-copy",
-        "el-icon-document-checked",
-        "el-icon-document",
-        "el-icon-document-add",
-        "el-icon-printer",
-        "el-icon-paperclip",
-        "el-icon-takeaway-box",
-        "el-icon-search",
-        "el-icon-monitor",
-        "el-icon-attract",
-        "el-icon-mobile",
-        "el-icon-scissors",
-        "el-icon-umbrella",
-        "el-icon-headset",
-        "el-icon-brush",
-        "el-icon-mouse",
-        "el-icon-coordinate",
-        "el-icon-magic-stick",
-        "el-icon-reading",
-        "el-icon-data-line",
-        "el-icon-data-board",
-        "el-icon-pie-chart",
-        "el-icon-data-analysis",
-        "el-icon-collection-tag",
-        "el-icon-film",
-        "el-icon-suitcase",
-        "el-icon-suitcase-1",
-        "el-icon-receiving",
-        "el-icon-collection",
-        "el-icon-files",
-        "el-icon-notebook-1",
-        "el-icon-notebook-2",
-        "el-icon-toilet-paper",
-        "el-icon-office-building",
-        "el-icon-school",
-        "el-icon-table-lamp",
-        "el-icon-house",
-        "el-icon-no-smoking",
-        "el-icon-smoking",
-        "el-icon-shopping-cart-full",
-        "el-icon-shopping-cart-1",
-        "el-icon-shopping-cart-2",
-        "el-icon-shopping-bag-1",
-        "el-icon-shopping-bag-2",
-        "el-icon-sold-out",
-        "el-icon-sell",
-        "el-icon-present",
-        "el-icon-box",
-        "el-icon-bank-card",
-        "el-icon-money",
-        "el-icon-coin",
-        "el-icon-wallet",
-        "el-icon-discount",
-        "el-icon-price-tag",
-        "el-icon-news",
-        "el-icon-guide",
-        "el-icon-male",
-        "el-icon-female",
-        "el-icon-thumb",
-        "el-icon-cpu",
-        "el-icon-link",
-        "el-icon-connection",
-        "el-icon-open",
-        "el-icon-turn-off",
-        "el-icon-set-up",
-        "el-icon-chat-round",
-        "el-icon-chat-line-round",
-        "el-icon-chat-square",
-        "el-icon-chat-dot-round",
-        "el-icon-chat-dot-square",
-        "el-icon-chat-line-square",
-        "el-icon-message",
-        "el-icon-postcard",
-        "el-icon-position",
-        "el-icon-turn-off-microphone",
-        "el-icon-microphone",
-        "el-icon-close-notification",
-        "el-icon-bangzhu",
-        "el-icon-time",
-        "el-icon-odometer",
-        "el-icon-crop",
-        "el-icon-aim",
-        "el-icon-switch-button",
-        "el-icon-full-screen",
-        "el-icon-copy-document",
-        "el-icon-mic",
-        "el-icon-stopwatch",
-        "el-icon-medal-1",
-        "el-icon-medal",
-        "el-icon-trophy",
-        "el-icon-trophy-1",
-        "el-icon-first-aid-kit",
-        "el-icon-discover",
-        "el-icon-place",
-        "el-icon-location",
-        "el-icon-location-outline",
-        "el-icon-location-information",
-        "el-icon-add-location",
-        "el-icon-delete-location",
-        "el-icon-map-location",
-        "el-icon-alarm-clock",
-        "el-icon-timer",
-        "el-icon-watch-1",
-        "el-icon-watch",
-        "el-icon-lock",
-        "el-icon-unlock",
-        "el-icon-key",
-        "el-icon-service",
-        "el-icon-mobile-phone",
-        "el-icon-bicycle",
-        "el-icon-truck",
-        "el-icon-ship",
-        "el-icon-basketball",
-        "el-icon-football",
-        "el-icon-soccer",
-        "el-icon-baseball",
-        "el-icon-wind-power",
-        "el-icon-light-rain",
-        "el-icon-lightning",
-        "el-icon-heavy-rain",
-        "el-icon-sunrise",
-        "el-icon-sunrise-1",
-        "el-icon-sunset",
-        "el-icon-sunny",
-        "el-icon-cloudy",
-        "el-icon-partly-cloudy",
-        "el-icon-cloudy-and-sunny",
-        "el-icon-moon",
-        "el-icon-moon-night",
-        "el-icon-dish",
-        "el-icon-dish-1",
-        "el-icon-food",
-        "el-icon-chicken",
-        "el-icon-fork-spoon",
-        "el-icon-knife-fork",
-        "el-icon-burger",
-        "el-icon-tableware",
-        "el-icon-sugar",
-        "el-icon-dessert",
-        "el-icon-ice-cream",
-        "el-icon-hot-water",
-        "el-icon-water-cup",
-        "el-icon-coffee-cup",
-        "el-icon-cold-drink",
-        "el-icon-goblet",
-        "el-icon-goblet-full",
-        "el-icon-goblet-square",
-        "el-icon-goblet-square-full",
-        "el-icon-refrigerator",
-        "el-icon-grape",
-        "el-icon-watermelon",
-        "el-icon-cherry",
-        "el-icon-apple",
-        "el-icon-pear",
-        "el-icon-orange",
-        "el-icon-coffee",
-        "el-icon-ice-tea",
-        "el-icon-ice-drink",
-        "el-icon-milk-tea",
-        "el-icon-potato-strips",
-        "el-icon-lollipop",
-        "el-icon-ice-cream-square",
-        "el-icon-ice-cream-round"
-      ]
+      icon: this.value,
+      tabsActiveName: "tianheng",
+      tianhengIcons: tianhengIcons,
+      elementIcons: elementIcons
     };
   },
+  watch: {
+    icon(val) {
+      this.$emit("input", val);
+      this.$emit("update:value", val);
+    },
+    value(val) {
+      this.icon = val;
+    }
+  },
   created() {},
   methods: {
     handleIconClick(icon) {
-      this.$emit("input", icon);
+      this.icon = icon;
     },
     handleInputClear() {
-      this.$emit("input", "");
+      this.icon = "";
     }
   }
 };
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .input-prefix {
   height: 100%;
   width: 32px;
@@ -360,18 +101,24 @@ export default {
     font-size: 20px;
   }
 }
-.th-icons {
+.th-icons-content {
   height: 300px;
   overflow-y: scroll;
   .icon {
     padding: 8px;
     font-size: 20px;
     border-radius: 2px;
+    transition: 0.25s;
   }
   .icon:hover {
     cursor: pointer;
     background-color: #f2f2f2;
-    // transition: .3s;
   }
 }
 </style>
+
+<style lang="scss">
+.th-icons-popover {
+  padding: 0 !important;
+}
+</style>