新增：图标选择器
This commit is contained in:
jmal
parent
094ae8aeec
commit
5173421bfe
@ -5,7 +5,7 @@
|
||||
|
||||
import { Icon } from 'ant-design-vue'
|
||||
const IconFont = Icon.createFromIconfontCN({
|
||||
scriptUrl: '//at.alicdn.com/t/font_2024484_85344xmpzhm.js'
|
||||
scriptUrl: '//at.alicdn.com/t/font_2024484_3jr9049cc2f.js'
|
||||
})
|
||||
|
||||
export default {
|
||||
|
||||
125
src/components/select/icon.vue
Normal file
125
src/components/select/icon.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<el-popover
|
||||
ref="popover"
|
||||
placement="bottom-start"
|
||||
popper-class="al-icon-picker-popper"
|
||||
width="400"
|
||||
trigger="click"
|
||||
@show="showPopover"
|
||||
@hide="hidePopover"
|
||||
>
|
||||
<el-tabs v-model="activeName" @tab-click="handleTabClick">
|
||||
<el-tab-pane label="本地" name="first" >
|
||||
<icon-list :icon-list="iconList" :select="select"></icon-list>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="iconfont" name="second">
|
||||
<icon-list :icon-list="iconfontList" :select="select"></icon-list>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="其他" name="third">
|
||||
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div slot="reference" :class="{'al-icon-picker': true, 'al-icon-picker-open': pickerOpen}"
|
||||
@mouseenter="hovering = true"
|
||||
@mouseleave="hovering = false">
|
||||
<el-input
|
||||
type="text"
|
||||
clearable
|
||||
readonly
|
||||
v-model="currentValue"
|
||||
placeholder="请选择图标"
|
||||
>
|
||||
<span slot="prefix" class="el-input__prefix-inner">
|
||||
<svg-icon :icon-class="currentValue"></svg-icon>
|
||||
</span>
|
||||
<span slot="suffix" class="el-input__suffix-inner">
|
||||
<i v-if="hovering && currentValue.length > 0"
|
||||
class="el-input__icon el-icon-circle-close el-input__clear"
|
||||
@mousedown.prevent
|
||||
@click.stop.prevent="handleClear"
|
||||
></i>
|
||||
<i v-else class="el-select__caret el-input__icon el-icon-arrow-down"></i>
|
||||
</span>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import icons from './requireIcons'
|
||||
import {icon} from '@/utils/iconfont-find'
|
||||
import NewComponent from "@/components/select/iconList";
|
||||
import IconList from "@/components/select/iconList";
|
||||
|
||||
export default {
|
||||
name: 'IconSelect',
|
||||
components: {IconList, NewComponent},
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: 'sdfsd'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
iconList: icons,
|
||||
iconfontList: icon.list,
|
||||
currentValue: this.value,
|
||||
hasValue: true,
|
||||
pickerOpen: false,
|
||||
hovering: false,
|
||||
activeName: 'first'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(val){
|
||||
this.currentValue = val
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
showPopover() {
|
||||
this.pickerOpen = true
|
||||
},
|
||||
hidePopover() {
|
||||
this.pickerOpen = false
|
||||
},
|
||||
select(icon){
|
||||
this.currentValue = icon
|
||||
this.$emit('input', icon)
|
||||
this.$refs.popover.doClose()
|
||||
},
|
||||
handleClear() {
|
||||
this.currentValue = ''
|
||||
this.$emit('input', '')
|
||||
},
|
||||
handleTabClick() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.al-icon-picker {
|
||||
/deep/ .el-input:not(.is-disabled) {
|
||||
cursor: pointer;
|
||||
.el-input__inner {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
/deep/ .el-input__suffix {
|
||||
.el-icon-arrow-down {
|
||||
transition: transform .3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.al-icon-picker-open {
|
||||
/deep/ .el-input__suffix {
|
||||
.el-icon-arrow-down {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
29
src/components/select/iconList.vue
Normal file
29
src/components/select/iconList.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<el-scrollbar style="height: 280px">
|
||||
<el-row>
|
||||
<el-col :span="4" v-for="(item, index) in iconList" :key="index">
|
||||
<el-card shadow="hover" class="al-card-border" :title="item">
|
||||
<div class="al-icon-picker-item" @click="select(item)">
|
||||
<svg-icon :icon-class="item"></svg-icon>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'IconList',
|
||||
props: {
|
||||
iconList: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
select(item) {
|
||||
this.$emit('select', item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
10
src/components/select/requireIcons.js
Normal file
10
src/components/select/requireIcons.js
Normal file
@ -0,0 +1,10 @@
|
||||
const req = require.context('../../icons/svg', false, /\.svg$/)
|
||||
const requireAll = requireContext => requireContext.keys()
|
||||
|
||||
const re = /\.\/(.*)\.svg/
|
||||
|
||||
const icons = requireAll(req).map(i => {
|
||||
return i.match(re)[1]
|
||||
})
|
||||
|
||||
export default icons
|
||||
@ -102,3 +102,49 @@ div:focus {
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
.al-icon-picker-popper.el-popover {
|
||||
max-width: 100%;
|
||||
padding: 4px 3px 15px 15px;
|
||||
}
|
||||
.al-icon-picker-popper {
|
||||
.popper__arrow {
|
||||
left: 35px!important;
|
||||
}
|
||||
.el-card {
|
||||
margin: 10px 12px 0 0;
|
||||
}
|
||||
.el-scrollbar__wrap {
|
||||
overflow-x: hidden;
|
||||
margin-right: 0!important;
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
.el-scrollbar__bar.is-vertical{
|
||||
width: 6px!important;
|
||||
}
|
||||
.el-tabs .el-tabs__header {
|
||||
margin: 0;
|
||||
}
|
||||
.el-card__body {
|
||||
padding: 0;
|
||||
}
|
||||
.el-tabs .el-tabs__item {
|
||||
padding: 0 12px!important;
|
||||
}
|
||||
.al-icon-picker-item {
|
||||
display: block;
|
||||
padding: 8px 0;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
transition: transform .1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.al-icon-picker-item:hover {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
.al-card-border {
|
||||
border: 1px solid #ededed;
|
||||
}
|
||||
|
||||
@ -31,6 +31,9 @@ a:hover {
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.el-dialog__headerbtn {
|
||||
top: unset;
|
||||
}
|
||||
/deep/.el-card__body {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
11
src/utils/iconfont-find.js
Normal file
11
src/utils/iconfont-find.js
Normal file
@ -0,0 +1,11 @@
|
||||
// 把此段代码贴到iconfont项目页面的控制台中, 以获取图标列表
|
||||
|
||||
const nodeArray = Array.from(document.querySelectorAll('.block-icon-list .icon-item .icon-code.icon-code-show'));
|
||||
const iconNames = nodeArray.map(item => item.outerText.replace('icon-',''))
|
||||
console.log(iconNames.slice(0,80))
|
||||
console.log(iconNames.slice(80,130))
|
||||
|
||||
export const icon = {
|
||||
list: ["emoji-a", "emoji-bizui", "emoji-baiyan", "emoji-aixin", "emoji-dajing", "emoji-ziya", "emoji-daxiao", "emoji-esi", "emoji-fadai", "emoji-fankun", "emoji-ganga", "emoji-fennu", "emoji-hanyan", "emoji-jingkong", "emoji-haochi", "emoji-emo", "emoji-jingsong", "emoji-jingya", "emoji-kaixin", "emoji-lengku", "emoji-danao", "emoji-liukoushui", "emoji-liulei", "emoji-mengbi", "mianwubiaoqing", "nanguo", "shuizhuo", "taoyan", "tanchi", "siliao", "tiaopi", "xiaochulei", "wuliao", "xingxingyan", "xieyan", "xiasi", "xiaolian", "ku", "shengqi", "yousiliao", "en", "bushufu", "bianbian", "fankun1", "feiwen", "ganmao", "huaixiao", "liuhan", "outu", "keshui", "renzhe", "santiaoxian", "guaiwu", "shoushang", "tianshi", "shuai", "xianwen", "xiaodiaodaya", "xiong", "yiwen", "yun", "liubixie", "shimo", "dianzan", "biti", "fendou", "huqi", "heng", "kulou", "leng", "taoyan1", "shuixing", "aini", "aixin1", "zhadan", "xinsui", "maren", "zhutou", "qie", "youling",
|
||||
"apple-fill", "attachment", "android-fill", "apple", "download", "arrow-up-circle", "arrow-right-circle", "arrow-down", "ashbin", "add", "file_music", "menu", "role", "jiaoseguanli", "yemianshezhi", "drop_down", "yuandian", "tag", "service-directory", "fabu", "wailian", "bianji-", "WEBSITE", "wangzhanguanli", "Up", "up", "fenlei", "guanlizhuanjiawenzhang", "pifu", "tuichudenglu", "shezhi", "wangzhan", "huaban", "yunshezhi", "UserSettings", "blogger", "biaoqian", "myself", "guidang", "quxiaoyulan1-copy", "yulan-copy", "quxiaoyulan1", "yulan"]
|
||||
}
|
||||
@ -17,8 +17,11 @@
|
||||
<el-form-item label="菜单名称:" prop="name">
|
||||
<el-input placeholder="请输入菜单名称" v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="菜单图片:" prop="icon">
|
||||
<el-input placeholder="请输入菜单图片" v-model="form.icon" />
|
||||
<!-- <el-form-item label="菜单图标:" prop="icon">-->
|
||||
<!-- <el-input placeholder="请输入菜单图标" v-model="form.icon" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="菜单图标:" prop="icon">
|
||||
<icon-select v-model="form.icon"></icon-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="路由地址:" prop="path">
|
||||
<el-input placeholder="请输入路由地址" v-model="form.path" />
|
||||
@ -107,9 +110,11 @@
|
||||
import menuApi from '@/api/menu'
|
||||
import TableList from "@/components/table/TableList";
|
||||
import TreeSelect from "@/components/select/tree";
|
||||
import IconSelect from "@/components/select/icon";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconSelect,
|
||||
TreeSelect,
|
||||
TableList
|
||||
},
|
||||
|
||||
@ -234,11 +234,18 @@ export default {
|
||||
},
|
||||
// 保存分配权限
|
||||
saveAuth() {
|
||||
|
||||
const nodeArray = Array.from(document.querySelectorAll('.block-icon-list .icon-item .icon-code.icon-code-show'));
|
||||
const names = nodeArray.map(item => item.outerText)
|
||||
console.log(names)
|
||||
|
||||
this.form.menuIds = this.$refs.authTree.getCheckedKeys()
|
||||
this.updateRole(this.setFormData())
|
||||
},
|
||||
// 分配权限
|
||||
authorization(roleId) {
|
||||
const req = require.context('@/icons/svg', false, /\.svg$/)
|
||||
console.log(req)
|
||||
this.dialogAuthVisible = true
|
||||
const findIndex = this.dataList.findIndex(data => data.id === roleId)
|
||||
const role = this.dataList[findIndex]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user