You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.5 KiB
Vue
66 lines
1.5 KiB
Vue
<template>
|
|
<div>
|
|
<!-- <component is="Edit" style="width: 2rem; margin-left: 2rem" v-for="(name,index) in iconList.icons"></component> -->
|
|
<div style="display: flex;flex-wrap: wrap">
|
|
<div v-for="(name,index) in iconList.icons" @click="click(name)" class="k">
|
|
<component :is="name" style="width: 2rem;" :index="index" :key="index"></component>
|
|
<div class="name">{{name}}</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
|
import {
|
|
reactive,
|
|
ref,
|
|
toRefs
|
|
} from 'vue'
|
|
const getData = () => {
|
|
let icons = []
|
|
for (const name in ElementPlusIconsVue) {
|
|
// console.error(name)
|
|
icons.push(name)
|
|
}
|
|
return icons
|
|
}
|
|
const iconsData = reactive(getData())
|
|
const iconList = reactive({
|
|
icons: iconsData
|
|
})
|
|
const data = toRefs(iconList)
|
|
const emit = defineEmits(['changeMenu'])
|
|
const click=(name)=>{
|
|
emit('changeMenu', name)
|
|
}
|
|
// console.log(iconList)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.k {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 1px solid var(--color-border1);
|
|
text-align: center;
|
|
color: var(--el-text-color-regular);
|
|
height: 90px;
|
|
width: 102px;
|
|
font-size: 13px;
|
|
border-right: 1px solid var(--el-border-color);
|
|
border-bottom: 1px solid var(--el-border-color);
|
|
transition: background-color var(--el-transition-duration);
|
|
cursor:pointer
|
|
|
|
}
|
|
.k:hover{
|
|
border: 2px solid #ccc;
|
|
}
|
|
|
|
.name {}
|
|
</style> |