no message

Former-commit-id: e45c769a59a33087d5ec164a03909a8118c9d2ae
Former-commit-id: b429872909e18b5cbb4f960e65154417b968fc7f
Former-commit-id: d3165644ec6164a07b69ad57aa539bcdccf7bb28

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
+      }
     }
   }
 }

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>