no message

Former-commit-id: 8ff8a8111a9bd3f05c94c68d22954772767f2e92
Former-commit-id: b2b7fa01dd87535a3374180f365d3c4a96323434
Former-commit-id: 8b184918d2177a0b6262790a114cca89edc7f5b9

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

@@ -1,17 +1,19 @@
 <template>
   <Container type="ghost">
-    <el-card v-for="(item, index) in icon" :key="index" :class="index === icon.length - 1 ? '' : 'dd-mb'">
-      <template slot="header">{{item.title}}</template>
+    <el-card>
+      <template slot="header">
+        <el-radio-group v-model="showIndex" size="mini">
+          <el-radio-button
+            v-for="(item, index) in radioOptions"
+            :key="index"
+            :label="item.value">
+            {{item.label}}
+          </el-radio-button>
+        </el-radio-group>
+      </template>
       <el-row style="margin: -10px;">
-        <el-col
-          v-for="(iconItem, iconIndex) in item.icon"
-          :key="iconIndex"
-          :span="6"
-          class="dd-p-10">
-          <el-tag type="info">
-            <span :class="'fa fa-' + iconItem"></span>
-          </el-tag>
-          <span style="font-size: 10px;">{{iconItem}}</span>
+        <el-col v-for="(iconItem, iconIndex) in iconShow.icon" :key="iconIndex" :span="6" class="dd-p-10">
+          <IconCell :icon="iconItem"></IconCell>
         </el-col>
       </el-row>
     </el-card>
@@ -20,10 +22,26 @@
 
 <script>
 import icon from '@/assets/library/font-awesome-4.7.0-icon/icon.js'
+import IconCell from './components/IconCell'
 export default {
+  components: {
+    IconCell
+  },
   data () {
     return {
-      icon
+      icon,
+      showIndex: 0
+    }
+  },
+  computed: {
+    iconShow () {
+      return this.icon[this.showIndex]
+    },
+    radioOptions () {
+      return this.icon.map((e, index) => ({
+        label: e.title,
+        value: index
+      }))
     }
   }
 }