From ad3ba6614ea8b318d671d6922cd7ad668b2a0e37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=9D=A8?= <1711467488@qq.com>
Date: Thu, 18 Jan 2018 14:49:38 +0800
Subject: [PATCH] no message

Former-commit-id: e45c769a59a33087d5ec164a03909a8118c9d2ae
Former-commit-id: b429872909e18b5cbb4f960e65154417b968fc7f
Former-commit-id: d3165644ec6164a07b69ad57aa539bcdccf7bb28
---
 src/components/core/IconSelect/index.vue      | 11 +++
 .../demo/plugins/font-awesome/select.vue      | 88 +++++++++++++------
 .../article/图标选择组件使用方法.md           | 24 ++---
 static/markdownFiles/article/首页.md          |  2 +
 4 files changed, 80 insertions(+), 45 deletions(-)

diff --git a/src/components/core/IconSelect/index.vue b/src/components/core/IconSelect/index.vue
index 83407c72..d47d4595 100644
--- a/src/components/core/IconSelect/index.vue
+++ b/src/components/core/IconSelect/index.vue
@@ -2,6 +2,7 @@
   <div>
     <el-popover
       ref="pop"
+      v-model="pop"
       placement="bottom"
       width="300"
       trigger="click">
@@ -80,10 +81,17 @@ export default {
       type: Boolean,
       required: false,
       default: false
+    },
+    autoClose: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   data () {
     return {
+      // 绑定弹出框
+      pop: false,
       // 所有图标
       icon,
       // 组件内输入框的值
@@ -130,6 +138,9 @@ export default {
   methods: {
     selectIcon (iconName = '') {
       this.$emit('input', iconName)
+      if (iconName && this.autoClose) {
+        this.pop = false
+      }
     }
   }
 }
diff --git a/src/pages/demo/plugins/font-awesome/select.vue b/src/pages/demo/plugins/font-awesome/select.vue
index e012f392..f58c3c60 100644
--- a/src/pages/demo/plugins/font-awesome/select.vue
+++ b/src/pages/demo/plugins/font-awesome/select.vue
@@ -1,31 +1,47 @@
 <template>
-  <div>
-    <el-card class="dd-mb">
-      <p class="dd-mt-0">
-        禁止用户输入 可以清空 icon = {{icon || '未选择'}}
-        <i v-if="icon" :class="'fa fa-' + icon"></i>
-      </p>
-      <IconSelect v-model="icon"></IconSelect>
-      <p>
-        禁止用户输入 不可以清空 icon2 = {{icon2 || '未选择'}}
-        <i v-if="icon2" :class="'fa fa-' + icon2"></i>
-      </p>
-      <IconSelect v-model="icon2" :clearable="false"></IconSelect>
-      <p>
-        用户可以输入 可以清空 icon3 = {{icon3 || '未选择'}}
-        <i v-if="icon3" :class="'fa fa-' + icon3"></i>
-      </p>
-      <IconSelect v-model="icon3" :user-input="true"></IconSelect>
-      <p>
-        用户可以输入 不可以清空 icon4 = {{icon4 || '未选择'}}
-        <i v-if="icon4" :class="'fa fa-' + icon4"></i>
-      </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>
+  <el-row :gutter="10">
+    <el-col :span="8">
+      <el-card class="dd-mb">
+        <div class="title-group">
+          <p class="title">一般用法</p>
+          <p class="sub-title">
+            icon = {{icon || '未选择'}}
+            <i v-if="icon" :class="'fa fa-' + icon"></i>
+          </p>
+        </div>
+        <IconSelect v-model="icon"></IconSelect>
+        <div class="title-group">
+          <p class="title">不可以清空</p>
+          <p class="sub-title">
+            icon2 = {{icon2 || '未选择'}}
+            <i v-if="icon2" :class="'fa fa-' + icon2"></i>
+          </p>
+        </div>
+        <IconSelect v-model="icon2" :clearable="false"></IconSelect>
+        <div class="title-group">
+          <p class="title">不自动关闭</p>
+          <p class="sub-title">
+            icon3 = {{icon3 || '未选择'}}
+            <i v-if="icon3" :class="'fa fa-' + icon3"></i>
+          </p>
+        </div>
+        <IconSelect v-model="icon3" :auto-close="false"></IconSelect>
+        <div class="title-group">
+          <p class="title">用户可以输入</p>
+          <p class="sub-title">
+            icon4 = {{icon4 || '未选择'}}
+            <i v-if="icon4" :class="'fa fa-' + icon4"></i>
+          </p>
+        </div>
+        <IconSelect v-model="icon4" :user-input="true"></IconSelect>
+      </el-card>
+    </el-col>
+    <el-col :span="16">
+      <el-card>
+        <Markdown url="/static/markdownFiles/article/图标选择组件使用方法.md"></Markdown>
+      </el-card>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
@@ -41,3 +57,21 @@ export default {
 }
 </script>
 
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+.title-group {
+  margin-top: $margin;
+  margin-bottom: $margin / 2;
+  &:first-child {
+    margin-top: 0px;
+  }
+  .title {
+    margin: 0px;
+  }
+  .sub-title {
+    margin: 0px;
+    color: $color-text-sub;
+    font-size: 10px;
+  }
+}
+</style>
diff --git a/static/markdownFiles/article/图标选择组件使用方法.md b/static/markdownFiles/article/图标选择组件使用方法.md
index 5005a17b..be1d0c69 100644
--- a/static/markdownFiles/article/图标选择组件使用方法.md
+++ b/static/markdownFiles/article/图标选择组件使用方法.md
@@ -1,25 +1,13 @@
 ```
-<p class="dd-mt-0">
-  禁止用户输入 可以清空 icon = {{icon || '未选择'}}
-  <i v-if="icon" :class="'fa fa-' + icon"></i>
-</p>
+// 一般用法
 <IconSelect v-model="icon"></IconSelect>
 
-<p>
-  禁止用户输入 不可以清空 icon2 = {{icon2 || '未选择'}}
-  <i v-if="icon2" :class="'fa fa-' + icon2"></i>
-</p>
+// 不可以清空
 <IconSelect v-model="icon2" :clearable="false"></IconSelect>
 
-<p>
-  用户可以输入 可以清空 icon3 = {{icon3 || '未选择'}}
-  <i v-if="icon3" :class="'fa fa-' + icon3"></i>
-</p>
-<IconSelect v-model="icon3" :user-input="true"></IconSelect>
+// 不自动关闭
+<IconSelect v-model="icon3" :auto-close="false"></IconSelect>
 
-<p>
-  用户可以输入 不可以清空 icon4 = {{icon4 || '未选择'}}
-  <i v-if="icon4" :class="'fa fa-' + icon4"></i>
-</p>
-<IconSelect v-model="icon4" :user-input="true" :clearable="false"></IconSelect>
+// 用户可以输入
+<IconSelect v-model="icon4" :user-input="true"></IconSelect>
 ```
\ No newline at end of file
diff --git a/static/markdownFiles/article/首页.md b/static/markdownFiles/article/首页.md
index 83a2e0fb..a4c1e34d 100644
--- a/static/markdownFiles/article/首页.md
+++ b/static/markdownFiles/article/首页.md
@@ -24,6 +24,8 @@
 * 代码高亮显示
 * `HTML` 格式化输出显示
 * 模拟异步数据
+* 自动根据路由配置生成菜单
+* 图标选择器