优化 d2-icon-select d2-icon-svg-select

Former-commit-id: 23048d4149234e89b004c3e372329c6f98761758 [formerly 23048d4149234e89b004c3e372329c6f98761758 [formerly 23048d4149234e89b004c3e372329c6f98761758 [formerly 23048d4149234e89b004c3e372329c6f98761758 [formerly 275123feb74c1c623162bbc40297f0aa7bc86fe0 [formerly 61a358238bfa2687b4af53abb16f97ed66000360]]]]]
Former-commit-id: 49fe5afc42637c517173105f33df8c8870d7fe88
Former-commit-id: 9f9153a76016993bdedfd6e6f7732e668b2047ea
Former-commit-id: cf1a0a4bf0e33deb3167c3583a4b98b18dc3246e [formerly 9612610849efccc456868c65de8f6d78fe1eb690]
Former-commit-id: 57967a2dcda29767e87196b4d82e433e4246e653
Former-commit-id: 85c96b419d24a43117c75a34fcc8454b57f72336
Former-commit-id: e58a7e88a7925b5e0761f919fa2f2160a350b681
Former-commit-id: 94635a1b758e730f362bf40949676cc2b320bf55
Former-commit-id: 6f412615cab141a24d32e1c259f949c13f78c6b9

src/components/d2-icon-select/index.vue

@@ -6,8 +6,15 @@
       :placement="placement"
       width="300"
       trigger="click">
-      <div class="header d2-clearfix d2-mb-10" v-if="clearable">
-        <el-button type="danger" icon="el-icon-delete" size="mini" class="d2-fr" @click="selectIcon()">清空</el-button>
+      <div class="d2-clearfix d2-mb-10" v-if="clearable">
+        <el-button
+          type="danger"
+          icon="el-icon-delete"
+          size="mini"
+          class="d2-fr"
+          @click="selectIcon()">
+          清空
+        </el-button>
       </div>
       <el-input
         v-model="searchText"
@@ -15,20 +22,20 @@
         placeholder="搜索 比如 'plus'"
         prefix-icon="el-icon-search">
       </el-input>
-      <el-collapse v-if="!searchMode" class="group" v-model="collapseActive">
-        <el-collapse-item v-for="(item, index) in icon" :key="index" :title="item.title" :name="index" class="class">
-          <el-row class="class-row">
-            <el-col class="class-col" v-for="(iconName, iconIndex) in item.icon" :key="iconIndex" :span="4" @click.native="selectIcon(iconName)">
+      <el-collapse v-if="!searchMode" class="d2-icon-select--group" v-model="collapseActive">
+        <el-collapse-item v-for="(item, index) in icon" :key="index" :title="item.title" :name="index" class="d2-icon-select--class">
+          <el-row class="d2-icon-select--class-row">
+            <el-col class="d2-icon-select--class-col" v-for="(iconName, iconIndex) in item.icon" :key="iconIndex" :span="4" @click.native="selectIcon(iconName)">
               <i :class="'fa fa-' + iconName"></i>
             </el-col>
           </el-row>
         </el-collapse-item>
       </el-collapse>
-      <div v-if="searchMode" class="group">
-        <div class="class" v-for="(item, index) in iconFilted" :key="index">
-          <div class="class-title">{{item.title}}</div>
-          <el-row class="class-row">
-            <el-col class="class-col" v-for="(iconName, iconIndex) in item.icon" :key="iconIndex" :span="4" @click.native="selectIcon(iconName)">
+      <div v-if="searchMode" class="d2-icon-select--group">
+        <div class="d2-icon-select--class" v-for="(item, index) in iconFilted" :key="index">
+          <div class="d2-icon-select--class-title">{{item.title}}</div>
+          <el-row class="d2-icon-select--class-row">
+            <el-col class="d2-icon-select--class-col" v-for="(iconName, iconIndex) in item.icon" :key="iconIndex" :span="4" @click.native="selectIcon(iconName)">
               <i :class="'fa fa-' + iconName"></i>
             </el-col>
           </el-row>
@@ -159,22 +166,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.group {
+.d2-icon-select--group {
   max-height: 400px;
   overflow-x: hidden;
   overflow-y: scroll;
   border-top: none;
   border-bottom: none;
-  .class {
-    .class-title {
+  .d2-icon-select--class {
+    .d2-icon-select--class-title {
       line-height: 30px;
       text-align: center;
       background-color: $color-bg;
       border-radius: 4px;
       margin: 10px 0px;
     }
-    .class-row {
-      .class-col {
+    .d2-icon-select--class-row {
+      .d2-icon-select--class-col {
         line-height: 40px;
         text-align: center;
         color: $color-text-sub;

src/components/d2-icon-svg-select/data/index.js.REMOVED.git-id

@@ -1 +0,0 @@
-3283c245146c8130af1352a64561e780a3f585c5

src/components/d2-icon-svg-select/index.vue

@@ -6,8 +6,17 @@
       :placement="placement"
       width="300"
       trigger="click">
-      <div class="header d2-clearfix d2-mb-10" v-if="clearable">
-        <el-button type="danger" icon="el-icon-delete" size="mini" class="d2-fr" @click="selectIcon()">清空</el-button>
+      <div
+        class="d2-clearfix d2-mb-10"
+        v-if="clearable">
+        <el-button
+          type="danger"
+          icon="el-icon-delete"
+          size="mini"
+          class="d2-fr"
+          @click="selectIcon()">
+          清空
+        </el-button>
       </div>
       <el-input
         v-model="searchText"
@@ -15,18 +24,16 @@
         placeholder="搜索 比如 'plus'"
         prefix-icon="el-icon-search">
       </el-input>
-      <div class="group">
-        <el-row>
-          <el-col
-            v-for="(item, index) in iconFilted"
-            :key="index"
-            class="icon-item"
-            :span="4"
-            @click.native="selectIcon(item)">
-            <d2-icon-svg :name="item"/>
-          </el-col>
-        </el-row>
-      </div>
+      <el-row class="d2-icon-svg-select--group">
+        <el-col
+          v-for="(item, index) in iconFilted"
+          :key="index"
+          class="d2-icon-svg-select--item"
+          :span="4"
+          @click.native="selectIcon(item)">
+          <d2-icon-svg :name="item"/>
+        </el-col>
+      </el-row>
     </el-popover>
     <!-- 允许用户输入 -->
     <el-input
@@ -35,7 +42,9 @@
       v-bind="bind"
       style="max-width: 240px;">
       <template v-if="value" slot="prepend">
-        <d2-icon-svg class="d2-icon-svg--input-preview" :name="value"/>
+        <d2-icon-svg
+          class="d2-icon-svg-select--input-preview"
+          :name="value"/>
       </template>
       <el-button v-popover:pop slot="append">
         <i class="fa fa-list"></i>
@@ -44,7 +53,10 @@
     <!-- 不允许用户输入 -->
     <el-button v-popover:pop v-if="!userInput">
       <span flex="dir:left main:center cross:center">
-        <d2-icon-svg v-if="value" class="d2-icon-svg--input-preview d2-mr-10" :name="value"/>
+        <d2-icon-svg
+          v-if="value"
+          class="d2-icon-svg-select--input-preview d2-mr-10"
+          :name="value"/>
         <span>{{value ? value : placeholder}}</span>
       </span>
     </el-button>
@@ -52,9 +64,8 @@
 </template>
 
 <script>
-import icon from './data/index'
 export default {
-  name: 'd2-icon-select',
+  name: 'd2-icon-svg-select',
   props: {
     // 值
     value: {
@@ -97,14 +108,10 @@ export default {
     return {
       // 绑定弹出框
       pop: false,
-      // 所有图标
-      icon,
       // 组件内输入框的值
       currentValue: '',
       // 搜索的文字
-      searchText: '',
-      // 不是搜索的时候显示的折叠面板绑定的展开数据
-      collapseActive: []
+      searchText: ''
     }
   },
   computed: {
@@ -148,32 +155,32 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.d2-icon-svg--input-preview {
+.d2-icon-svg-select--input-preview {
   height: 14px;
   width: 14px;
   display: block;
 }
-.group {
+.d2-icon-svg-select--group {
   max-height: 400px;
   overflow-x: hidden;
   overflow-y: scroll;
   margin-top: 10px;
-  .icon-item {
-    height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: $color-text-sub;
-    svg {
-      height: 20px;
-      width: 20px;
-    }
-    &:hover {
-      color: $color-text-main;
-      background-color: $color-bg;
-      border-radius: 4px;
-      box-shadow: inset 0px 0px 0px 1px $color-border-1;
-    }
+}
+.d2-icon-svg-select--item {
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: $color-text-sub;
+  svg {
+    height: 20px;
+    width: 20px;
+  }
+  &:hover {
+    color: $color-text-main;
+    background-color: $color-bg;
+    border-radius: 4px;
+    box-shadow: inset 0px 0px 0px 1px $color-border-1;
   }
 }
 </style>