mirror of
https://gitee.com/log4j/pig-ui.git
synced 2025-01-03 23:42:23 +08:00
'admin-21.03.20:修复浏览器离开时菜单高亮bug、工具栏左偏bug、新增步骤条演示界面'
This commit is contained in:
lyt-Top
parent
64e6cc0164
commit
400e8add88
@ -452,21 +452,6 @@ export const dynamicRoutes = [
|
||||
icon: 'iconfont icon-ditu',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/fun/rollNotice',
|
||||
name: 'rollNotice',
|
||||
component: () => import('/@/views/fun/rollNotice/index.vue'),
|
||||
meta: {
|
||||
title: 'notice 滚动通知',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'iconfont icon-tongzhi',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -620,6 +605,21 @@ export const dynamicRoutes = [
|
||||
icon: 'iconfont icon-chazhaobiaodanliebiao',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/pages/steps',
|
||||
name: 'steps',
|
||||
component: () => import('/@/views/pages/steps/index.vue'),
|
||||
meta: {
|
||||
title: '步骤条',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'iconfont icon-step',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -765,7 +765,7 @@
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
.add-is-active {
|
||||
#add-is-active {
|
||||
@extend .el-active-extend;
|
||||
&:hover {
|
||||
@extend .el-active-extend;
|
||||
@ -803,6 +803,10 @@
|
||||
.el-submenu [class^='el-icon-'] {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
// 去掉离开浏览器时，菜单的默认高亮
|
||||
.el-menu-item:focus {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Tabs 标签页
|
||||
------------------------------- */
|
||||
@ -866,6 +870,13 @@
|
||||
.el-step__head.is-error {
|
||||
border-color: set-color(danger);
|
||||
}
|
||||
.el-step__icon-inner {
|
||||
font-size: 30px !important;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
.el-step__title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Dialog 对话框
|
||||
------------------------------- */
|
||||
@ -954,3 +965,15 @@
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.el-drawer-fade-enter-active .el-drawer.rtl {
|
||||
animation: rtl-drawer-animation 0.3s ease-in reverse !important;
|
||||
}
|
||||
.el-drawer-fade-leave-active .el-drawer.rtl {
|
||||
animation: rtl-drawer-animation 0.3s ease !important;
|
||||
}
|
||||
.el-drawer-fade-enter-active .el-drawer.ltr {
|
||||
animation: ltr-drawer-animation 0.3s ease-in reverse !important;
|
||||
}
|
||||
.el-drawer-fade-leave-active .el-drawer.ltr {
|
||||
animation: ltr-drawer-animation 0.3s ease !important;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// 字体图标 url
|
||||
const cssCdnUrlList: Array<string> = [
|
||||
'//at.alicdn.com/t/font_2298093_ets0yznyu8g.css',
|
||||
'//at.alicdn.com/t/font_2298093_1pnb6uhuq4e.css',
|
||||
'//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
|
||||
];
|
||||
// 第三方 js url
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
<template>
|
||||
<div class="roll-notice-container">
|
||||
<el-card shadow="hover" header="滚动通知演示"> </el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive } from 'vue';
|
||||
export default {
|
||||
name: 'rollNotice',
|
||||
setup() {
|
||||
const state = reactive({});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -406,11 +406,10 @@ export default defineComponent({
|
||||
setTimeout(() => {
|
||||
let els = document.querySelector('.el-menu-item.is-active');
|
||||
if (!els) return false;
|
||||
let attr = 'el-menu-item is-active';
|
||||
if (getThemeConfig.value.isMenuBarColorHighlight) els.setAttribute('class', `${attr} add-is-active`);
|
||||
else els.setAttribute('class', `${attr}`);
|
||||
if (getThemeConfig.value.isMenuBarColorHighlight) els.setAttribute('id', `add-is-active`);
|
||||
else els.setAttribute('id', ``);
|
||||
setLocalThemeConfig();
|
||||
setLocal('menuBarHighlightClass', els.getAttribute('class'));
|
||||
setLocal('menuBarHighlightId', els.getAttribute('id'));
|
||||
}, 0);
|
||||
});
|
||||
};
|
||||
@ -610,10 +609,10 @@ export default defineComponent({
|
||||
asideEl.style.cssText = getLocal('asideBgStyle');
|
||||
}
|
||||
// 菜单字体背景高亮
|
||||
if (getLocal('menuBarHighlightClass')) {
|
||||
if (getLocal('menuBarHighlightId')) {
|
||||
let els = document.querySelector('.el-menu-item.is-active');
|
||||
if (!els) return false;
|
||||
els.setAttribute('class', getLocal('menuBarHighlightClass'));
|
||||
els.setAttribute('id', getLocal('menuBarHighlightId'));
|
||||
}
|
||||
// 灰色模式/色弱模式
|
||||
if (getLocal('appFilterStyle')) {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="layout-navbars-breadcrumb-user" :style="{ flex: setFlexAutoStyle }">
|
||||
<div class="layout-navbars-breadcrumb-user">
|
||||
<div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
|
||||
<i class="el-icon-search" title="菜单搜索"></i>
|
||||
</div>
|
||||
@ -63,11 +63,6 @@ export default {
|
||||
isScreenfull: false,
|
||||
isShowUserNewsPopover: false,
|
||||
});
|
||||
// 设置布局
|
||||
const setFlexAutoStyle = computed(() => {
|
||||
let { isBreadcrumb, layout, isClassicSplitMenu } = store.state.themeConfig.themeConfig;
|
||||
return !isBreadcrumb && layout !== 'transverse' && isClassicSplitMenu ? 1 : '';
|
||||
});
|
||||
// 获取用户信息 vuex
|
||||
const getUserInfos = computed(() => {
|
||||
return store.state.userInfos.userInfos;
|
||||
@ -129,7 +124,6 @@ export default {
|
||||
searchRef.value.openSearch();
|
||||
};
|
||||
return {
|
||||
setFlexAutoStyle,
|
||||
getUserInfos,
|
||||
onLayoutSetingClick,
|
||||
onHandleCommandClick,
|
||||
@ -147,6 +141,7 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex: 1;
|
||||
&-link {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
@ -250,7 +250,7 @@ export default {
|
||||
} else {
|
||||
// 非头/尾部
|
||||
if (liIndex === 0) beforePrevL = liFirst.offsetLeft - 5;
|
||||
else beforePrevL = liPrevTag.offsetLeft - 5;
|
||||
else beforePrevL = liPrevTag?.offsetLeft - 5;
|
||||
if (liIndex === liLength) afterNextL = liLast.offsetLeft + liLast.offsetWidth + 5;
|
||||
else afterNextL = liNextTag.offsetLeft + liNextTag.offsetWidth + 5;
|
||||
if (afterNextL > scrollL + offsetW) {
|
||||
|
||||
32
src/views/pages/steps/index.vue
Normal file
32
src/views/pages/steps/index.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="steps-container">
|
||||
<el-card shadow="hover" header="element-plus 步骤条">
|
||||
<el-steps :active="stepsActive">
|
||||
<el-step title="第一步" icon="iconfont icon-0_round_solid"></el-step>
|
||||
<el-step title="第二步" icon="iconfont icon-2_round_solid"></el-step>
|
||||
<el-step title="第三步" icon="iconfont icon-3_round_solid"></el-step>
|
||||
</el-steps>
|
||||
<el-button @click="onNextSteps" size="small" class="mt15" type="primary">下一步</el-button>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive } from 'vue';
|
||||
export default {
|
||||
name: 'steps',
|
||||
setup() {
|
||||
const state = reactive({
|
||||
stepsActive: 1,
|
||||
});
|
||||
// 下一步点击
|
||||
const onNextSteps = () => {
|
||||
if (state.stepsActive++ > 2) state.stepsActive = 1;
|
||||
};
|
||||
return {
|
||||
onNextSteps,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user