Files
mes-ui-d2/src/pages/demo/plugins/font-awesome/list.vue
李杨 b6102a6198 no message
Former-commit-id: 10c06ef856fd1e1b65ed763899f76a4f9a170c12
Former-commit-id: e5c0e4ccf2a01c8b5a400cd6001f5ce883db1c7e
Former-commit-id: a618014bf4081050709432146eebbca364e3d105
2018-01-17 16:01:46 +08:00

55 lines
1.2 KiB
Vue

<template>
<Container type="ghost">
<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-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>
</el-row>
</el-card>
</Container>
</template>
<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,
showIndex: 0
}
},
computed: {
iconShow () {
return this.icon[this.showIndex]
},
radioOptions () {
return this.icon.map((e, index) => ({
label: e.title,
value: index
}))
}
}
}
</script>