cirry/simple-element-plus-template
1
0
Fork 0
mirror of https://github.com/fugary/simple-element-plus-template.git synced 2025-11-12 14:27:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

图标选择控件

Browse Source
This commit is contained in:
gary.fu
2024-01-02 18:13:13 +08:00
parent 7689b58b13
commit 8717b5f8c3
5 changed files with 128 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
package-lock.json generated
View File

@@ -11,6 +11,7 @@
"@element-plus/icons-vue": "^2.3.1",
"@vicons/material": "^0.12.0",
"@vueuse/core": "^10.7.0",
"axios": "^1.6.3",
"dayjs": "^1.11.10",
"element-plus": "^2.4.4",
"lodash": "^4.17.21",
@@ -751,6 +752,11 @@
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
"integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"node_modules/available-typed-arrays": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
@@ -763,6 +769,16 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/axios": {
"version": "1.6.3",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.3.tgz",
"integrity": "sha512-fWyNdeawGam70jXSVlKl+SUNVcL6j6W79CuSIPfi6HnDUmSCH6gyUys/HrqHeA/wU0Az41rRgean494d0Jb+ww==",
"dependencies": {
"follow-redirects": "^1.15.0",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -866,6 +882,17 @@
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/commander": {
"version": "11.1.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
@@ -970,6 +997,14 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/doctrine": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -1763,6 +1798,25 @@
"integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
"dev": true
},
"node_modules/follow-redirects": {
"version": "1.15.4",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
"integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/for-each": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -1772,6 +1826,19 @@
"is-callable": "^1.1.3"
}
},
"node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2452,6 +2519,25 @@
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
"integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/minimatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -2830,6 +2916,11 @@
"node": ">= 0.8.0"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/punycode": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",

1
package.json
View File

@@ -12,6 +12,7 @@
"@element-plus/icons-vue": "^2.3.1",
"@vicons/material": "^0.12.0",
"@vueuse/core": "^10.7.0",
"axios": "^1.6.3",
"dayjs": "^1.11.10",
"element-plus": "^2.4.4",
"lodash": "^4.17.21",

7
src/components/common-breadcrumb/index.vue
View File

@@ -1,11 +1,9 @@
<script setup>
import { computed } from 'vue'
import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
import { useTabsViewStore } from '@/stores/TabsViewStore'
import { useRoute } from 'vue-router'
import { useMenuInfo, useMenuName } from '@/components/utils'
const globalConfigStore = useGlobalConfigStore()
const tabsViewStore = useTabsViewStore()
const route = useRoute()
@@ -20,13 +18,11 @@ const breadcrumbs = computed(() => {
} else if (item.meta && item.meta.icon) {
icon = item.meta.icon
}
const result = {
return {
path: item.path,
menuName: useMenuName(item),
icon
}
console.info(item, menuInfo)
return result
}).filter(item => {
const notExist = !exists.includes(item.menuName)
if (notExist) {
@@ -39,7 +35,6 @@ const breadcrumbs = computed(() => {
<template>
<el-breadcrumb
v-if="globalConfigStore.isShowBreadcrumb"
v-bind="$attrs"
class="common-breadcrumb"
>

16
src/components/common-icon-select/index.vue
View File

@@ -129,15 +129,15 @@ const selectIcon = icon => {
class="text-center"
>
<a
class="el-button el-button--large is-text"
style="height:80px;"
class="el-button el-button--large is-text icon-a"
@click="selectIcon(icon)"
>
<div>
<common-icon
size="20"
:icon="icon"
/>
/><br>
<span class="icon-text">{{ icon }}</span>
</div>
</a>
</el-col>
@@ -167,4 +167,14 @@ const selectIcon = icon => {
.icon-area {
padding: 0;
}
.icon-a {
height:80px;
display: block;
width:100%;
overflow:hidden;
padding: 15px 10px;
}
.icon-a span {
font-size: 12px;
}
</style>

29
src/views/tools/Icons.vue
View File

@@ -13,15 +13,16 @@ const filterIcons = computed(() => {
const copyIcon = (icon) => {
const { copy, isSupported } = useClipboard()
const iconStr = `<common-icon icon="${icon}"/>`
if (isSupported) {
copy(icon)
copy(iconStr)
ElMessage({
message: `Copied: ${icon}`,
message: `Copied: ${iconStr}`,
type: 'success'
})
} else {
ElMessage({
message: `Copy Not supported: ${icon}`,
message: `Copy Not supported: ${iconStr}`,
type: 'error'
})
}
@@ -44,7 +45,7 @@ const copyIcon = (icon) => {
</el-form>
</el-header>
<el-main>
<RecycleScroller
<recycle-scroller
v-slot="{ item }"
class="scroller icon-list"
:items="filterIcons"
@@ -59,8 +60,7 @@ const copyIcon = (icon) => {
class="text-center"
>
<a
class="el-button el-button--large is-text"
style="height:80px;"
class="el-button el-button--large is-text icon-a"
@click="copyIcon(icon)"
>
<div>
@@ -68,11 +68,13 @@ const copyIcon = (icon) => {
size="20"
:icon="icon"
/>
<br>
<span class="icon-text">{{ icon }}</span>
</div>
</a>
</el-col>
</el-row>
</RecycleScroller>
</recycle-scroller>
</el-main>
</el-container>
</template>
@@ -81,4 +83,17 @@ const copyIcon = (icon) => {
.scroller, .icon-container {
height: 100%;
}
.icon-container .el-input {
width: 80%;
}
.icon-a {
height:80px;
display: block;
width:100%;
overflow:hidden;
padding: 15px 10px;
}
.icon-a span {
font-size: 12px;
}
</style>