hjq/PixelAI-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'admin-21.03.04:新增图标选择器、优化图标自动载入逻辑等'

Browse Source
This commit is contained in:
lyt-Top 2021-03-04 21:57:25 +08:00
parent f3643271a7
commit c7c5bb7b94
7 changed files with 271 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/components/iconSelector/index.vue Normal file
View File

@ -0,0 +1,95 @@
<template>
<div class="icon-selector">
<el-popover placement="bottom" :width="fontIconWidth" v-model:visible="fontIconVisible"
popper-class="icon-selector-popper">
<template #reference>
<el-input v-model="fontIcon" placeholder="请点击选择图标" clearable size="small" ref="inputWidthRef"
:prefix-icon="fontIconPrefix" @clear="onClearFontIcon"></el-input>
</template>
<transition name="el-zoom-in-top">
<div class="icon-selector-warp" v-show="fontIconVisible">
<div class="icon-selector-warp-title">请选择一个图标</div>
<el-row class="icon-selector-warp-row">
<el-col :xs="4" :sm="2" :md="2" :lg="2" :xl="2" v-for="(v,k) in sheetsIconList" :key="k"
@click="onColClick(v)">
<div class="icon-selector-warp-item">
<div class="flex-margin">
<div class="icon-selector-warp-item-value">
<i :class="v" class="iconfont fa"></i>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</transition>
</el-popover>
</div>
</template>
<script lang="ts">
import { ref, toRefs, reactive, onMounted, nextTick } from "vue";
import initIconfont from "/@/utils/getStyleSheets.ts";
import { stat } from "node:fs";
export default {
name: "iconSelector",
props: {
isAllOn: {
type: Boolean,
default: () => false,
},
},
setup(props, { emit }) {
console.log(props);
const inputWidthRef = ref();
const state = reactive({
fontIcon: "",
fontIconPrefix: "",
fontIconVisible: false,
fontIconWidth: 0,
sheetsIconList: [],
});
// 获取 input 的宽度
const getInputWidth = () => {
nextTick(() => {
state.fontIconWidth = inputWidthRef.value.$el.offsetWidth;
});
};
// 监听页面宽度改变
const initResize = () => {
window.addEventListener("resize", () => {
getInputWidth();
});
};
// 初始化数据
const initFontIconData = () => {
initIconfont.ali().then((res) => {
state.sheetsIconList = res;
});
};
// 当前项点击
const onColClick = (v) => {
state.fontIcon = v;
state.fontIconPrefix = `iconfont fa ${v}`;
state.fontIconVisible = false;
emit("get", state.fontIconPrefix);
};
// input 点击清除按钮时
const onClearFontIcon = () => {
state.fontIconPrefix = "";
};
// 页面加载时
onMounted(() => {
initFontIconData();
initResize();
getInputWidth();
});
return {
inputWidthRef,
onColClick,
onClearFontIcon,
...toRefs(state),
};
},
};
</script>

41
src/theme/element.scss
View File

@ -957,3 +957,44 @@
height: 100%;
overflow: auto;
}
/* Popover 弹出框
------------------------------- */
.icon-selector-popper {
padding: 0 !important;
.icon-selector-warp-title {
height: 40px;
line-height: 40px;
padding: 0 15px;
}
.icon-selector-warp {
.icon-selector-warp-row {
border-top: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
max-height: 260px;
overflow-y: auto;
.icon-selector-warp-item {
display: flex;
border-right: 1px solid #ebeef5;
border-bottom: 1px solid #ebeef5;
padding: 10px;
.icon-selector-warp-item-value {
transition: all 0.3s ease;
i {
font-size: 20px;
color: #606266;
}
}
&:hover {
cursor: pointer;
.icon-selector-warp-item-value {
i {
color: var(--color-primary);
transition: all 0.3s ease;
}
}
}
}
}
}
}

111
src/utils/getStyleSheets.ts Normal file
View File

@ -0,0 +1,111 @@
import { nextTick } from "vue"
// 获取阿里字体图标
const getAlicdnIconfont = () => {
return new Promise((resolve, reject) => {
nextTick(() => {
const styles: any = document.styleSheets
let sheetsList = []
let sheetsIconList = []
for (let i = 0; i < styles.length; i++) {
if (styles[i].href && styles[i].href.indexOf("at.alicdn.com") > -1) {
sheetsList.push(styles[i])
}
}
for (let i = 0; i < sheetsList.length; i++) {
for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
if (
sheetsList[i].cssRules[j].selectorText &&
sheetsList[i].cssRules[j].selectorText.indexOf(".icon-") > -1
) {
sheetsIconList.push(
`${sheetsList[i].cssRules[j].selectorText
.substring(1, sheetsList[i].cssRules[j].selectorText.length)
.replace(/\:\:before/gi, "")}`
)
}
}
}
if (sheetsIconList.length > 0) resolve(sheetsIconList)
else reject('未获取到值，请刷新重试')
})
})
}
// 初始化获取 css 样式，获取 element plus 自带图标
const elementPlusIconfont = () => {
return new Promise((resolve, reject) => {
nextTick(() => {
const styles: any = document.styleSheets
let sheetsIconList = []
for (let i = 0; i < styles.length; i++) {
for (let j = 0; j < styles[i].cssRules.length; j++) {
if (
styles[i].cssRules[j].selectorText &&
styles[i].cssRules[j].selectorText.indexOf(".el-icon-") === 0
) {
sheetsIconList.push(
`${styles[i].cssRules[j].selectorText
.substring(1, styles[i].cssRules[j].selectorText.length)
.replace(/\:\:before/gi, "")}`
)
}
}
}
if (sheetsIconList.length > 0) resolve(sheetsIconList)
else reject('未获取到值，请刷新重试')
})
})
}
// 初始化获取 css 样式，这里使用 fontawesome 的图标
const awesomeIconfont = () => {
return new Promise((resolve, reject) => {
nextTick(() => {
const styles: any = document.styleSheets
let sheetsList = []
let sheetsIconList = []
for (let i = 0; i < styles.length; i++) {
if (
styles[i].href &&
styles[i].href.indexOf("netdna.bootstrapcdn.com") > -1
) {
sheetsList.push(styles[i])
}
}
for (let i = 0; i < sheetsList.length; i++) {
for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
if (
sheetsList[i].cssRules[j].selectorText &&
sheetsList[i].cssRules[j].selectorText.indexOf(".fa-") === 0 &&
sheetsList[i].cssRules[j].selectorText.indexOf(",") === -1
) {
sheetsIconList.push(
`${sheetsList[i].cssRules[j].selectorText
.substring(1, sheetsList[i].cssRules[j].selectorText.length)
.replace(/\:\:before/gi, "")}`
)
}
}
}
if (sheetsIconList.length > 0) resolve(sheetsIconList)
else reject('未获取到值，请刷新重试')
})
})
}
// 定义导出方法集合
const initIconfont = {
ali: () => {
return getAlicdnIconfont()
},
ele: () => {
return elementPlusIconfont()
},
awe: () => {
return awesomeIconfont()
}
}
// 导出方法
export default initIconfont

14
src/views/fun/selector/index.vue
View File

@ -1,14 +1,26 @@
<template>
<div class="selector-container"></div>
<div class="selector-container">
<el-card shadow="hover" header="1、图标选择器：简单版本">
<IconSelector @get="ongetCurrentIcon" />
</el-card>
<el-card shadow="hover" header="2、图标选择器：高级版本" class="mt15"></el-card>
</div>
</template>
<script lang="ts">
import { toRefs, reactive } from "vue";
import IconSelector from "/@/components/iconSelector/index.vue";
export default {
name: "selector",
components: { IconSelector },
setup() {
const state = reactive({});
// 获取当前点击的 icon 图标
const ongetCurrentIcon = (v) => {
console.log(v);
};
return {
ongetCurrentIcon,
...toRefs(state),
};
},

33
src/views/pages/awesome/index.vue
View File

@ -20,42 +20,17 @@
</template>
<script lang="ts">
import { toRefs, reactive, nextTick, onMounted } from "vue";
import { toRefs, reactive, onMounted } from "vue";
import initIconfont from "/@/utils/getStyleSheets.ts";
export default {
name: "awesome",
setup() {
const state = reactive({
sheetsIconList: [],
});
// 初始化获取 css 样式，这里使用阿里的图标(记得加上前缀 `iconfont`)，其它第三方请自行做判断
// 初始化获取 css 样式，这里使用fontawesome的图标(记得加上前缀 `fa`)，其它第三方请自行做判断
const initGetStyleSheets = () => {
nextTick(() => {
const styles = document.styleSheets;
let sheetsList = [];
for (let i = 0; i < styles.length; i++) {
if (
styles[i].href &&
styles[i].href.indexOf("netdna.bootstrapcdn.com") > -1
) {
sheetsList.push(styles[i]);
}
}
for (let i = 0; i < sheetsList.length; i++) {
for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
if (
sheetsList[i].cssRules[j].selectorText &&
sheetsList[i].cssRules[j].selectorText.indexOf(".fa-") === 0 &&
sheetsList[i].cssRules[j].selectorText.indexOf(",") === -1
) {
state.sheetsIconList.push(
`${sheetsList[i].cssRules[j].selectorText
.substring(1, sheetsList[i].cssRules[j].selectorText.length)
.replace(/\:\:before/gi, "")}`
);
}
}
}
});
initIconfont.awe().then((res) => (state.sheetsIconList = res));
};
// 页面加载时
onMounted(() => {

23
src/views/pages/element/index.vue
View File

@ -20,32 +20,17 @@
</template>
<script lang="ts">
import { toRefs, reactive, nextTick, onMounted } from "vue";
import { toRefs, reactive, onMounted } from "vue";
import initIconfont from "/@/utils/getStyleSheets.ts";
export default {
name: "element",
setup() {
const state = reactive({
sheetsIconList: [],
});
// 初始化获取 css 样式，这里使用阿里的图标(记得加上前缀 `iconfont`)，其它第三方请自行做判断
// 初始化获取 css 样式，获取 element plus 自带图标
const initGetStyleSheets = () => {
nextTick(() => {
const styles = document.styleSheets;
for (let i = 0; i < styles.length; i++) {
for (let j = 0; j < styles[i].cssRules.length; j++) {
if (
styles[i].cssRules[j].selectorText &&
styles[i].cssRules[j].selectorText.indexOf(".el-icon-") === 0
) {
state.sheetsIconList.push(
`${styles[i].cssRules[j].selectorText
.substring(1, styles[i].cssRules[j].selectorText.length)
.replace(/\:\:before/gi, "")}`
);
}
}
}
});
initIconfont.ele().then((res) => (state.sheetsIconList = res));
};
// 页面加载时
onMounted(() => {

27
src/views/pages/iocnfont/index.vue
View File

@ -18,7 +18,8 @@
</template>
<script lang="ts">
import { toRefs, reactive, nextTick, onMounted } from "vue";
import { toRefs, reactive, onMounted } from "vue";
import initIconfont from "/@/utils/getStyleSheets.ts";
export default {
name: "iconfont",
setup() {
@ -27,29 +28,7 @@ export default {
});
// 初始化获取 css 样式，这里使用阿里的图标(记得加上前缀 `iconfont`)，其它第三方请自行做判断
const initGetStyleSheets = () => {
nextTick(() => {
const styles = document.styleSheets;
let sheetsList = [];
for (let i = 0; i < styles.length; i++) {
if (styles[i].href && styles[i].href.indexOf("at.alicdn.com") > -1) {
sheetsList.push(styles[i]);
}
}
for (let i = 0; i < sheetsList.length; i++) {
for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
if (
sheetsList[i].cssRules[j].selectorText &&
sheetsList[i].cssRules[j].selectorText.indexOf(".icon-") > -1
) {
state.sheetsIconList.push(
`${sheetsList[i].cssRules[j].selectorText
.substring(1, sheetsList[i].cssRules[j].selectorText.length)
.replace(/\:\:before/gi, "")}`
);
}
}
}
});
initIconfont.ali().then((res) => (state.sheetsIconList = res));
};
// 页面加载时
onMounted(() => {