select-svg 基本完成

Former-commit-id: 8e7f1a63631ec0370683eadb16a9203b835f293d [formerly 8e7f1a63631ec0370683eadb16a9203b835f293d [formerly 8e7f1a63631ec0370683eadb16a9203b835f293d [formerly 8e7f1a63631ec0370683eadb16a9203b835f293d [formerly 8e6796da5ea041da9ed2fcbf89e84c91e2b7b230 [formerly 226e52a0e20b8a9cd011e2a2b0b0da2c25b9db4b]]]]]
Former-commit-id: 4fd47532611745f6cefcbbb3f9f9409c6cbb978c
Former-commit-id: 4a9f59b88aa4d6a164010e2cf80a20a6ad704efb
Former-commit-id: 8b2408f7205cf68a8920e6287ad7cdc6da541d13 [formerly 50abaafae7d85ed49404b471297543a95c773e68]
Former-commit-id: e9c5c24e393c7cc06f275b8249a1ff10e5aea3e2
Former-commit-id: 133e32b20973babb6cb2815c5f88f925e1d68cf2
Former-commit-id: 5b4528bd6e10f53f5ca19948af5fbe40a18ae4d3
Former-commit-id: 429cc57574024a3d073657f7c773104ec29ced39
Former-commit-id: b78065290d0d26c7fe4c6b2fd41288fb115686df

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <span>
     <el-popover
       ref="pop"
       v-model="pop"
@@ -55,7 +55,7 @@
       </template>
       {{value ? value : placeholder}}
     </el-button>
-  </div>
+  </span>
 </template>
 
 <script>

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

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

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

@@ -0,0 +1,179 @@
+<template>
+  <span>
+    <el-popover
+      ref="pop"
+      v-model="pop"
+      :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>
+      <el-input
+        v-model="searchText"
+        :clearable="true"
+        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-popover>
+    <!-- 允许用户输入 -->
+    <el-input
+      v-if="userInput"
+      v-model="currentValue"
+      v-bind="bind"
+      style="max-width: 240px;">
+      <template v-if="value" slot="prepend">
+        <d2-icon-svg class="d2-icon-svg--input-preview" :name="value"/>
+      </template>
+      <el-button v-popover:pop slot="append">
+        <i class="fa fa-list"></i>
+      </el-button>
+    </el-input>
+    <!-- 不允许用户输入 -->
+    <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"/>
+        <span>{{value ? value : placeholder}}</span>
+      </span>
+    </el-button>
+  </span>
+</template>
+
+<script>
+import icon from './data/index'
+export default {
+  name: 'd2-icon-select',
+  props: {
+    // 值
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    // 占位符
+    placeholder: {
+      type: String,
+      required: false,
+      default: '请选择'
+    },
+    // 弹出界面的方向
+    placement: {
+      type: String,
+      required: false,
+      default: 'right'
+    },
+    // 是否可清空
+    clearable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    // 是否允许用户输入
+    userInput: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 是否在选择后自动关闭
+    autoClose: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  data () {
+    return {
+      // 绑定弹出框
+      pop: false,
+      // 所有图标
+      icon,
+      // 组件内输入框的值
+      currentValue: '',
+      // 搜索的文字
+      searchText: '',
+      // 不是搜索的时候显示的折叠面板绑定的展开数据
+      collapseActive: []
+    }
+  },
+  computed: {
+    // 输入框上绑定的设置
+    bind () {
+      return {
+        placeholder: this.placeholder,
+        clearable: this.clearable,
+        ...this.$attrs
+      }
+    },
+    // 是否在搜索
+    searchMode () {
+      return !!this.searchText
+    },
+    // 过滤后的图标
+    iconFilted () {
+      return this.$IconSvg.filter(icon => icon.indexOf(this.searchText) >= 0)
+    }
+  },
+  watch: {
+    value (value) {
+      this.currentValue = value
+    },
+    currentValue (value) {
+      this.selectIcon(value)
+    }
+  },
+  created () {
+    this.currentValue = this.value
+  },
+  methods: {
+    selectIcon (iconName = '') {
+      this.$emit('input', iconName)
+      if (iconName && this.autoClose) {
+        this.pop = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.d2-icon-svg--input-preview {
+  height: 14px;
+  width: 14px;
+  display: block;
+}
+.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;
+    }
+  }
+}
+</style>

src/components/index.js

@@ -12,8 +12,9 @@ Vue.component('d2-page-cover', () => import('./d2-page-cover'))
 Vue.component('d2-count-up', () => import('./d2-count-up'))
 Vue.component('d2-highlight', () => import('./d2-highlight'))
 Vue.component('d2-icon', () => import('./d2-icon'))
-Vue.component('d2-icon-select', () => import('./d2-icon-select/index.vue'))
 Vue.component('d2-icon-svg', () => import('./d2-icon-svg/index.vue'))
+Vue.component('d2-icon-select', () => import('./d2-icon-select/index.vue'))
+Vue.component('d2-icon-svg-select', () => import('./d2-icon-svg-select/index.vue'))
 Vue.component('d2-markdown', () => import('./d2-markdown'))
 Vue.component('d2-mde', () => import('./d2-mde'))
 Vue.component('d2-module-index-banner', () => import('./d2-module-index-banner'))