zq
5 months ago
26 changed files with 756 additions and 149 deletions
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 771 B |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 662 B |
|
After Width: | Height: | Size: 49 KiB |
@ -0,0 +1,287 @@ |
|||||
|
|
||||
|
<template> |
||||
|
<transition :name="customize ? '' : 'menu-collapse'"> |
||||
|
<el-menu v-if="!customize" class="el-menu-vertical-demo custom-menu" @open="handleOpen" |
||||
|
:default-active="currentMenuItem?.index" |
||||
|
@close="handleClose" @select="handleSelect" :collapse="isCollapse" :collapse-transition="true" |
||||
|
> |
||||
|
<div style="height: 100%;padding: 0 0 20px;box-sizing: border-box;"> |
||||
|
<div class="menu-top"> |
||||
|
<span v-show="!isCollapse"> |
||||
|
导航 |
||||
|
</span> |
||||
|
<GuipToolTip :content="isCollapse ? '展开' : '收起'"> |
||||
|
<img v-if="!isCollapse" class="point" src="../assets/menu-close.svg" @click="changeMenuStatus(true)" alt=""> |
||||
|
<img v-else class="point" src="../assets/menu-open.svg" @click="changeMenuStatus(false)" alt=""> |
||||
|
</GuipToolTip> |
||||
|
</div> |
||||
|
<template v-for="item in menuData" > |
||||
|
<el-submenu v-if="item.children" :key="item.index" :index="item.index"> |
||||
|
<template slot="title"> |
||||
|
<SvgIcon1 :iconPath="require(`@/assets/menu/${item.icon}.svg`)" defaultColor="#8A9099" |
||||
|
activeColor="#006AFF" :isActive="item.index == currentMenuItem?.index?.substring(0,1) && isCollapse" /> |
||||
|
<span class="title_text" >{{ item.title }}</span> |
||||
|
</template> |
||||
|
<el-menu-item style="padding: 0 22px 0 32px;" v-for="subItem in item.children" :key="subItem.index" |
||||
|
:index="subItem.index" @click="handleSelect(subItem.index, [item.index, subItem.index], subItem)"> |
||||
|
{{ subItem.title }} |
||||
|
</el-menu-item> |
||||
|
</el-submenu> |
||||
|
<el-menu-item v-else :index="item.index" :key="item.index" @click="handleSelect(item.index, [item.index], item)"> |
||||
|
<div class="flex"> |
||||
|
<SvgIcon1 :iconPath="require(`@/assets/menu/${item.icon}.svg`)" defaultColor="#8A9099" |
||||
|
activeColor="#006AFF" :isActive="item.index == currentMenuItem?.index" /> |
||||
|
<span class="title_text" slot="title">{{ item.title }}</span> |
||||
|
</div> |
||||
|
</el-menu-item> |
||||
|
</template> |
||||
|
</div> |
||||
|
</el-menu> |
||||
|
|
||||
|
<SetLeftMenu v-else :menuList="menuData"/> |
||||
|
</transition> |
||||
|
|
||||
|
</template> |
||||
|
<script> |
||||
|
import SetLeftMenu from '@/components/SetLeftMenu.vue' |
||||
|
import SvgIcon1 from '@/components/SvgIcon1.vue'; |
||||
|
import GuipToolTip from '@/components/GuipToolTip.vue'; |
||||
|
export default { |
||||
|
name: 'SliderMenu', |
||||
|
components: { |
||||
|
SvgIcon1, |
||||
|
GuipToolTip, |
||||
|
SetLeftMenu |
||||
|
}, |
||||
|
props: { |
||||
|
menuData: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
}, |
||||
|
customize:{ |
||||
|
type:Boolean, |
||||
|
default:false |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
isCollapse: false, |
||||
|
routerList: [], |
||||
|
currentMenuItem:'', |
||||
|
currentMenuParent:'' |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
"$route.path"() { |
||||
|
if(this.customize)return |
||||
|
this.updateCurrentMenu(); |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
changeMenuStatus(flag) { |
||||
|
this.isCollapse = flag; |
||||
|
}, |
||||
|
handleOpen(key, keyPath) { |
||||
|
console.log(key, keyPath); |
||||
|
}, |
||||
|
handleClose(key, keyPath) { |
||||
|
console.log(key, keyPath); |
||||
|
}, |
||||
|
// handleSelect(index,indexPath) { |
||||
|
// this.activeMenu = index; |
||||
|
// console.log(index,indexPath, '---index'); |
||||
|
// // 找到被点击的 menu 项对应的 path |
||||
|
// const allItems = this.menuData.flatMap(menu => menu.children); |
||||
|
// const targetItem = allItems.find(item => item.index === index); |
||||
|
|
||||
|
// if (targetItem && this.$route.path !== targetItem.path) { |
||||
|
// this.$router.push(targetItem.path); |
||||
|
// } |
||||
|
// }, |
||||
|
handleSelect(index, indexPath, menuItem) { |
||||
|
if (menuItem.path && this.$route.path !== menuItem.path) { |
||||
|
this.$router.push(menuItem.path); |
||||
|
} |
||||
|
}, |
||||
|
updateCurrentMenu() { |
||||
|
const result = this.findMenuItemByPath(this.menuData, this.$route.path); |
||||
|
this.currentMenuItem = result?.item; |
||||
|
}, |
||||
|
findMenuItemByPath(menuItems, targetPath, parent = null) { |
||||
|
for (const item of menuItems) { |
||||
|
if (item.path === targetPath) return { item, parent }; |
||||
|
if (item.children?.length) { |
||||
|
const found = this.findMenuItemByPath(item.children, targetPath, item); |
||||
|
if (found) return found; |
||||
|
} |
||||
|
} |
||||
|
return null; |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
// console.log(this.$route.path,'this.$route.path----'); |
||||
|
// const allItems = this.menuData.flatMap(menu =>menu.children ? menu.children?.map(child => ({ ...child, parentIndex: menu.index })) : menu.children); |
||||
|
// console.log(allItems,'====='); |
||||
|
// const current = allItems.find(item => item.path === this.$route.path); |
||||
|
// this.activeMenu = current ? current.index : ''; |
||||
|
// this.defaultOpeneds = current ? [current.parentIndex] : []; |
||||
|
|
||||
|
// this.routerList = this.$router.options.router;//配置路由 |
||||
|
// console.log(this.$route.path, this.$router.options.router, 'this.$route.path==='); |
||||
|
// // 初始化时设置默认激活的菜单项 |
||||
|
// this.activeMenu = this.$route.path; |
||||
|
this.updateCurrentMenu(); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.menu-collapse-leave-active, |
||||
|
.menu-collapse-enter-active { |
||||
|
transition: all 0.5s; |
||||
|
} |
||||
|
|
||||
|
.menu-collapse-enter, |
||||
|
.menu-collapse-leave-to { |
||||
|
opacity: 0; |
||||
|
transform: translateX(-30px); |
||||
|
} |
||||
|
|
||||
|
.el-menu--vertical { |
||||
|
.el-menu-item { |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.el-menu-item.is-active { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.title_img { |
||||
|
width: 16px; |
||||
|
margin-right: 4px; |
||||
|
} |
||||
|
|
||||
|
.title_text { |
||||
|
margin-left: 4px; |
||||
|
font-size: 14px; |
||||
|
font-weight: bold; |
||||
|
display: block; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.el-menu--collapse .title_text { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.el-menu--collapse ::v-deep .el-submenu__icon-arrow { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.el-menu-vertical-demo:not(.el-menu--collapse) { |
||||
|
width: 158px; |
||||
|
min-width: 158px; |
||||
|
min-height: calc(100vh - 62px); |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
.el-menu-item { |
||||
|
padding: 0 22px; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.menu-top { |
||||
|
background: #FFFFFF; |
||||
|
box-sizing: border-box; |
||||
|
/* middle/middle_line_1 */ |
||||
|
border-width: 0px 0px 1px 0px; |
||||
|
border-style: solid; |
||||
|
border-color: #DFE2E6; |
||||
|
padding: 15px 0px; |
||||
|
margin: 0 22px; |
||||
|
display: flex; |
||||
|
font-size: 14px; |
||||
|
color: #1E2226; |
||||
|
font-weight: bold; |
||||
|
line-height: normal; |
||||
|
letter-spacing: 0.08em; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
|
||||
|
img { |
||||
|
width: 14px; |
||||
|
height: 14px; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-submenu { |
||||
|
// width: 16px; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-submenu .el-menu-item { |
||||
|
min-width: 138px; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-submenu__title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-submenu__title:hover { |
||||
|
background-color: transparent; |
||||
|
// cursor: not-allowed; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-submenu__title .el-submenu__icon-arrow.el-icon-arrow-down { |
||||
|
// display: none; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-submenu .el-menu-item { |
||||
|
padding: 0 22px; |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-submenu .el-menu-item { |
||||
|
height: 36px; |
||||
|
} |
||||
|
|
||||
|
::v-deep.el-submenu .el-menu-item { |
||||
|
height: 36px; |
||||
|
line-height: 36px; |
||||
|
color: #8A9099; |
||||
|
letter-spacing: 0.08em; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-menu-item:hover { |
||||
|
background: #F6F7FA; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-menu-item.is-active { |
||||
|
color: #006AFF; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
// .el-submenu .el-menu { |
||||
|
// transition: all 0.3s ease; |
||||
|
// } |
||||
|
|
||||
|
// .el-menu--collapse .el-submenu > .el-menu { |
||||
|
// display: block !important; |
||||
|
// overflow: hidden; |
||||
|
// transition: all 0.3s ease; |
||||
|
// opacity: 0; |
||||
|
// height: 0; |
||||
|
// transform: translateY(-10px); |
||||
|
// } |
||||
|
|
||||
|
// .el-menu--collapse .el-submenu.is-opened > .el-menu { |
||||
|
// opacity: 0; |
||||
|
// height: 0; |
||||
|
// } |
||||
|
</style> |
||||
@ -0,0 +1,7 @@ |
|||||
|
import GuipSwitch from './src/index.vue' |
||||
|
|
||||
|
GuipSwitch.install = function(Vue) { |
||||
|
Vue.component(GuipSwitch.name || 'GuipSwitch', GuipSwitch) |
||||
|
} |
||||
|
|
||||
|
export default GuipSwitch |
||||
@ -0,0 +1,109 @@ |
|||||
|
<template> |
||||
|
<el-form-item :prop="prop" :label="label" :rules="rules"> |
||||
|
<div class="guip_switchWrap"> |
||||
|
<span :class="['switchDesc', { 'fl': float == 'left' }, { 'fr': float == 'right' }]" |
||||
|
v-if="activeText || inactiveText"> |
||||
|
{{ internalValue === activeValue ? activeText : inactiveText |
||||
|
}}</span> |
||||
|
|
||||
|
<el-switch v-model="internalValue" :active-color="activeColor" :inactive-color="inactiveColor" |
||||
|
v-bind="$attrs" :disabled="disabled" :active-value="activeValue" :inactive-value="inactiveValue" |
||||
|
@change="handleChange"> |
||||
|
<!-- 自定义开启时的图标 --> |
||||
|
<template #active-icon> |
||||
|
</template> |
||||
|
<!-- 自定义关闭时的图标 --> |
||||
|
<template #inactive-icon> |
||||
|
</template> |
||||
|
</el-switch> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'GuipSwitch', |
||||
|
inheritAttrs: false, |
||||
|
props: { |
||||
|
// modelValue: { type: [Boolean, String, Number], default: undefined }, |
||||
|
value: { type: [Boolean, String, Number], default: undefined }, |
||||
|
prop: String, |
||||
|
label: String, |
||||
|
rules: Array, |
||||
|
labelWidth: String, |
||||
|
|
||||
|
activeText: { |
||||
|
type: String, |
||||
|
default: '', |
||||
|
}, |
||||
|
inactiveText: { |
||||
|
type: String, |
||||
|
default: '', |
||||
|
}, |
||||
|
activeValue: { |
||||
|
type: [Boolean, String, Number], |
||||
|
default: true, |
||||
|
}, |
||||
|
inactiveValue: { |
||||
|
type: [Boolean, String, Number], |
||||
|
default: false, |
||||
|
}, |
||||
|
activeColor: { |
||||
|
type: String, |
||||
|
default: '#00C261', |
||||
|
}, |
||||
|
inactiveColor: { |
||||
|
type: String, |
||||
|
default: '#BABDC2', |
||||
|
}, |
||||
|
float: { |
||||
|
type: String, |
||||
|
default: 'left', |
||||
|
}, |
||||
|
disabled: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
internalValue: this.value, |
||||
|
errorMsg: '' |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
// internalValue: { |
||||
|
// get() { |
||||
|
// return this.modelValue !== undefined ? this.modelValue : this.value |
||||
|
// }, |
||||
|
// set(val) { |
||||
|
// this.$emit('update:modelValue', val) |
||||
|
// this.$emit('input', val) |
||||
|
// } |
||||
|
// } |
||||
|
}, |
||||
|
watch: { |
||||
|
value(newVal) { |
||||
|
this.internalValue = newVal |
||||
|
}, |
||||
|
// modelValue(newVal) { |
||||
|
// this.internalValue = newVal |
||||
|
// }, |
||||
|
}, |
||||
|
methods: { |
||||
|
handleChange(val) { |
||||
|
// this.$emit('update:modelValue', val) |
||||
|
this.$emit('input', val) |
||||
|
this.$emit('change', val) |
||||
|
this.validateField() |
||||
|
}, |
||||
|
validateField() { |
||||
|
if (this.prop && this.$parent.validateField) { |
||||
|
this.$parent.validateField(this.prop, (error) => { |
||||
|
this.errorMsg = error || '' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue