svgicon组件新增ele图标
This commit is contained in:
不做码农
parent
6ae27ea49b
commit
ba8dca9e47
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="icon-body">
|
||||
<el-input v-model="iconName" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons">
|
||||
<el-input v-model="iconName" style="position: relative" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon">
|
||||
<search />
|
||||
@ -15,20 +15,32 @@
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="svg-icon" name="1">
|
||||
<div class="icon-list">
|
||||
<div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
|
||||
<svg-icon :icon-class="item" style="height: 30px;width: 16px;" />
|
||||
<span>{{ item }}</span>
|
||||
<div class="icon-item mb10" v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
|
||||
<svg-icon :icon-class="item" style="height: 30px; width: 16px" />
|
||||
<div class="name">{{ item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Element-UI Icons" name="2">
|
||||
<div class="icon-list">
|
||||
<div class="icon-item mb10" v-for="item of elementIcons" :key="item" @click="selectedIcon(item, 'ele-')">
|
||||
<svg-icon :icon-class="'ele-' + item" style="height: 30px; width: 16px" />
|
||||
<div class="name">{{ item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import icons from './requireIcons'
|
||||
import * as elIcons from '@element-plus/icons-vue'
|
||||
|
||||
const elementIcons = ref([])
|
||||
for (const key in elIcons) {
|
||||
elementIcons.value.push(key)
|
||||
}
|
||||
const iconName = ref('')
|
||||
const iconList = ref(icons)
|
||||
const activeName = ref('1')
|
||||
@ -41,8 +53,8 @@ function filterIcons() {
|
||||
}
|
||||
}
|
||||
|
||||
function selectedIcon(name) {
|
||||
emit('selected', name)
|
||||
function selectedIcon(name, prefix) {
|
||||
emit('selected', prefix != undefined ? prefix + name : name)
|
||||
document.body.click()
|
||||
}
|
||||
|
||||
@ -56,27 +68,32 @@ defineExpose({
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
<style lang="scss" scoped>
|
||||
.icon-body {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
.icon-list {
|
||||
height: 200px;
|
||||
overflow-y: scroll;
|
||||
div {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-bottom: -5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
height: 200px;
|
||||
|
||||
.icon-item {
|
||||
// height: 30px;
|
||||
// line-height: 30px;
|
||||
// margin-bottom: -5px;
|
||||
cursor: pointer;
|
||||
width: 33%;
|
||||
float: left;
|
||||
width: 19%;
|
||||
text-align: center;
|
||||
// float: left;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
.name {
|
||||
// display: inline-block;
|
||||
// vertical-align: -0.15em;
|
||||
// fill: currentColor;
|
||||
// overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<svg :class="svgClass" aria-hidden="true">
|
||||
<svg :class="svgClass" aria-hidden="true" v-if="iconType == 0">
|
||||
<use :xlink:href="iconName" :fill="color" />
|
||||
</svg>
|
||||
<el-icon v-else><component :is="iconName" /></el-icon>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -22,7 +23,20 @@ export default defineComponent({
|
||||
},
|
||||
setup(props) {
|
||||
return {
|
||||
iconName: computed(() => `#icon-${props.iconClass}`),
|
||||
iconType: computed(() => {
|
||||
if (props.iconClass.startsWith('ele')) {
|
||||
return 1
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
}),
|
||||
iconName: computed(() => {
|
||||
if (props.iconClass?.startsWith('ele-')) {
|
||||
return props.iconClass.replace('ele-', '')
|
||||
} else {
|
||||
return `#icon-${props.iconClass}`
|
||||
}
|
||||
}),
|
||||
svgClass: computed(() => {
|
||||
if (props.className) {
|
||||
return `svg-icon ${props.className}`
|
||||
|
||||
@ -17,8 +17,7 @@
|
||||
<span v-if="item.meta && item.meta.title">{{ item.meta.title }}</span>
|
||||
</template>
|
||||
|
||||
<sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path)"
|
||||
class="nest-menu" />
|
||||
<sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path)" class="nest-menu" />
|
||||
</el-sub-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -96,10 +96,12 @@
|
||||
<ul>
|
||||
<li>Vue3</li>
|
||||
<li>Vuex</li>
|
||||
<li>Element-ui</li>
|
||||
<li>Element plus</li>
|
||||
<li>Axios</li>
|
||||
<li>Sass</li>
|
||||
<li>Quill</li>
|
||||
<li>Wangeditor</li>
|
||||
<li>Vite</li>
|
||||
<li>Composition api</li>
|
||||
<li>...</li>
|
||||
</ul>
|
||||
</el-col>
|
||||
|
||||
@ -18,11 +18,11 @@
|
||||
{{ userInfo.welcomeMessage + ',' + userInfo.nickName + ' ,' + userInfo.welcomeContent }}
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24">
|
||||
<el-col :xs="24" :md="8" class="right-l-v">
|
||||
<el-col :xs="24" :lg="8" class="right-l-v">
|
||||
<div class="right-label">昵称：</div>
|
||||
<div class="right-value">{{ userInfo.nickName }}</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="16" class="right-l-v">
|
||||
<el-col :xs="24" :lg="16" class="right-l-v">
|
||||
<div class="right-label">身份：</div>
|
||||
<div class="right-value">
|
||||
<span v-for="item in userInfo.roles" :key="item.roleId">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user