no message

Former-commit-id: 10c06ef856fd1e1b65ed763899f76a4f9a170c12
Former-commit-id: e5c0e4ccf2a01c8b5a400cd6001f5ce883db1c7e
Former-commit-id: a618014bf4081050709432146eebbca364e3d105

src/assets/style/fixed/base.scss

@@ -11,7 +11,7 @@ html, body {
 
 pre {
   margin: 0px;
-  border-radius: $border-radius;
+  border-radius: 4px;
 }
 
 a {

src/assets/style/fixed/vue-grid-layout.scss

@@ -7,6 +7,6 @@
     border: 1px solid $color-border-1;
     background-color: rgba(#FFF, .3);
     opacity: 1;
-    border-radius: $border-radius;
+    border-radius: 4px;
   }
 }

src/assets/style/public.scss

@@ -14,7 +14,7 @@ $prefix: dd;
   border: 1px solid #dddee1;
   border-color: #e9eaec;
   background: #fff;
-  border-radius: $border-radius;
+  border-radius: 4px;
   font-size: 14px;
   position: relative;
 }

src/assets/style/unit/_size.scss

@@ -1,2 +1 @@
-$margin: 20px;
-$border-radius: 4px;
+$margin: 20px;

src/components/core/IconSelect/index.vue

@@ -0,0 +1,174 @@
+<template>
+  <div>
+    <el-popover
+      ref="pop"
+      placement="bottom"
+      width="300"
+      trigger="click">
+      <div class="header dd-clearfix dd-mb-10" v-if="clearable">
+        <el-button type="danger" icon="el-icon-delete" size="mini" class="dd-fr" @click="selectIcon()">清空</el-button>
+      </div>
+      <el-input
+        v-model="searchText"
+        :clearable="true"
+        placeholder="搜索"
+        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)">
+              <i :class="'fa fa-' + iconName"></i>
+            </el-col>
+          </el-row>
+        </el-collapse-item>
+      </el-collapse>
+      <div v-if="searchMode" class="group long">
+        <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)">
+              <i :class="'fa fa-' + iconName"></i>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+    </el-popover>
+    <!-- 允许用户输入 -->
+    <el-input
+      v-if="userInput"
+      v-model="currentValue"
+      v-bind="bind"
+      style="max-width: 240px;">
+      <template v-if="value" slot="prepend">
+        <i :class="'fa fa-' + value"></i>
+      </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">
+      <template v-if="value">
+        <i :class="'fa fa-' + value"></i>
+      </template>
+      {{value ? value : placeholder}}
+    </el-button>
+  </div>
+</template>
+
+<script>
+import icon from '@/assets/library/font-awesome-4.7.0-icon/icon.js'
+export default {
+  props: {
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      required: false,
+      default: '请选择'
+    },
+    clearable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    userInput: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data () {
+    return {
+      // 所有图标
+      icon,
+      // 组件内输入框的值
+      currentValue: '',
+      // 搜索的文字
+      searchText: '',
+      // 不是搜索的时候显示的折叠面板绑定的展开数据
+      collapseActive: []
+      // collapseActive: [...Array(icon.length)].map((e, i) => i)
+    }
+  },
+  computed: {
+    // 输入框上绑定的设置
+    bind () {
+      return {
+        placeholder: this.placeholder,
+        clearable: this.clearable,
+        ...this.$attrs
+      }
+    },
+    // 是否在搜索
+    searchMode () {
+      return !!this.searchText
+    },
+    // 过滤后的图标
+    iconFilted () {
+      return this.icon.map(iconClass => ({
+        title: iconClass.title,
+        icon: iconClass.icon.filter(icon => icon.indexOf(this.searchText) >= 0)
+      })).filter(iconClass => iconClass.icon.length > 0)
+    }
+  },
+  watch: {
+    value (value) {
+      this.currentValue = value
+    },
+    currentValue (value) {
+      this.selectIcon(value)
+    }
+  },
+  created () {
+    this.currentValue = this.value
+  },
+  methods: {
+    selectIcon (iconName = '') {
+      this.$emit('input', iconName)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+.group {
+  max-height: 400px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  border-top: none;
+  border-bottom: none;
+  &.long {
+    max-height: 600px;
+  }
+  .class {
+    .class-title {
+      line-height: 30px;
+      text-align: center;
+      background-color: $color-bg;
+      border-radius: 4px;
+      margin: 10px 0px;
+    }
+    .class-row {
+      .class-col {
+        line-height: 40px;
+        text-align: center;
+        color: $color-text-sub;
+        &:hover {
+          color: $color-text-main;
+          background-color: $color-bg;
+          border-radius: 4px;
+          font-size: 26px;
+          box-shadow: inset 0px 0px 0px 1px $color-border-1;
+        }
+      }
+    }
+  }
+}
+</style>
+

src/components/index.js

@@ -66,3 +66,9 @@ Vue.component('Highlight', resolve => {
 Vue.component('PageHeader', resolve => {
   require(['@/components/demo/PageHeader'], resolve)
 })
+
+// 名称：IconSelect
+// 用途：图标选择器
+Vue.component('IconSelect', resolve => {
+  require(['@/components/core/IconSelect/index.vue'], resolve)
+})

src/pages/demo/plugins/countup/demo.vue

@@ -94,7 +94,7 @@ export default {
         font-size: 60px;
         &.end {
           padding: 0px 20px;
-          border-radius: $border-radius;
+          border-radius: 4px;
           background-color: $color-success;
           color: #FFF;
         }

src/pages/demo/plugins/font-awesome/components/IconCell.vue

@@ -5,7 +5,7 @@
       placement="right"
       :title="icon"
       width="300"
-      trigger="hover">
+      trigger="click">
       <div class="icon-group">
         <i :class="'fa fa-' + icon"></i>
       </div>

src/pages/demo/plugins/font-awesome/list.vue

@@ -12,6 +12,12 @@
         </el-radio-group>
       </template>
       <el-row style="margin: -10px;">
+        <el-alert
+          title="点击图标复制代码"
+          type="info"
+          class="dd-m-10"
+          style="width: auto;">
+        </el-alert>
         <el-col v-for="(iconItem, iconIndex) in iconShow.icon" :key="iconIndex" :span="6" class="dd-p-10">
           <IconCell :icon="iconItem"></IconCell>
         </el-col>

src/pages/demo/plugins/font-awesome/select.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <el-card class="dd-mb">
+      <p class="dd-mt-0">禁止用户输入 可以清空 icon = {{icon}}</p>
+      <IconSelect v-model="icon"></IconSelect>
+      <p>禁止用户输入 不可以清空 icon2 = {{icon2}}</p>
+      <IconSelect v-model="icon2" :clearable="false"></IconSelect>
+      <p>用户可以输入 可以清空 icon3 = {{icon3}}</p>
+      <IconSelect v-model="icon3" :user-input="true"></IconSelect>
+      <p>用户可以输入 不可以清空 icon4 = {{icon4}}</p>
+      <IconSelect v-model="icon4" :user-input="true" :clearable="false"></IconSelect>
+    </el-card>
+    <el-card>
+      <Markdown url="/static/markdownFiles/article/图标选择组件使用方法.md"></Markdown>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      icon: '',
+      icon2: '',
+      icon3: '',
+      icon4: ''
+    }
+  }
+}
+</script>
+

src/pages/demo/plugins/mock/components/MockDemoCard.vue

@@ -47,7 +47,7 @@ export default {
 @import '~@/assets/style/public.scss';
 .col {
   padding: $margin;
-  border-radius: $border-radius;
+  border-radius: 4px;
   border-width: 1px;
   border-style: solid;
   font-size: 16px;

src/router/menu/_plugin.js

@@ -65,9 +65,16 @@ export const pluginMenu = {
         {
           title: '索引',
           icon: 'file-o',
-          path: 'font-awesome',
-          name: 'demo-font-awesome',
-          component: resolve => { require(['@/pages/demo/plugins/font-awesome/index.vue'], resolve) }
+          path: 'font-awesome/list',
+          name: 'demo-font-awesome-list',
+          component: resolve => { require(['@/pages/demo/plugins/font-awesome/list.vue'], resolve) }
+        },
+        {
+          title: '选择控件',
+          icon: 'file-o',
+          path: 'font-awesome/select',
+          name: 'demo-font-awesome-select',
+          component: resolve => { require(['@/pages/demo/plugins/font-awesome/select.vue'], resolve) }
         }
       ]
     },

static/markdownFiles/article/图标选择组件使用方法.md

@@ -0,0 +1,13 @@
+```
+<p class="dd-mt-0">禁止用户输入 可以清空 icon = {{icon}}</p>
+<IconSelect v-model="icon"></IconSelect>
+
+<p>禁止用户输入 不可以清空 icon2 = {{icon2}}</p>
+<IconSelect v-model="icon2" :clearable="false"></IconSelect>
+
+<p>用户可以输入 可以清空 icon3 = {{icon3}}</p>
+<IconSelect v-model="icon3" :user-input="true"></IconSelect>
+
+<p>用户可以输入 不可以清空 icon4 = {{icon4}}</p>
+<IconSelect v-model="icon4" :user-input="true" :clearable="false"></IconSelect>
+```