Files
mes-ui-d2/src/pages/demo/components/icon/list.vue
liyang 0894798515 no message
Former-commit-id: fc287cc8f6ab2052af26400abf0893008c9a21d3
Former-commit-id: 976fdd8400a9c855446ec171549fb3d489fda9f5
Former-commit-id: 69af7ddb348f8f80321bec6a5f7c636c5cc85487
2018-06-11 14:53:47 +08:00

47 lines
1.1 KiB
Vue

<template>
<d2-container>
<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="d2-m-10" style="width: auto;"/>
<el-col v-for="(iconItem, iconIndex) in iconShow.icon" :key="iconIndex" :span="6" class="d2-p-10">
<d2-icon-cell :icon="iconItem"/>
</el-col>
</el-row>
</d2-container>
</template>
<script>
import icon from '@/assets/library/font-awesome-4.7.0-icon/icon.js'
export default {
components: {
'd2-icon-cell': () => import('./components/d2-icon-cell')
},
data () {
return {
icon,
showIndex: 12
}
},
computed: {
iconShow () {
return this.icon[this.showIndex]
},
radioOptions () {
return this.icon.map((e, index) => ({
label: e.title,
value: index
}))
}
}
}
</script>