Skip to content

iBiz-Vue-R7-Res
iBiz-Vue-R7-Res
提交 9f2c3b80 编写于 作者: tony001's avatar tony001
浏览文件
操作

调整分页栏

上级 f760fd9a
隐藏空白字符变更
内嵌 并排
正在显示 包含 160 行增加 和 35 行删除
src/components/tab-page-exp/tab-page-exp.less
浏览文件 @ 9f2c3b80
...@@ -87,28 +87,96 @@ ...@@ -87,28 +87,96 @@
// opacity: 0; // opacity: 0;
// } // }
.ibiz-page-tag { .ibiz-page-tag {
.el-tabs{ position: relative;
.el-tabs__nav{ .contextmenu {
padding:0px 10px; margin: 0;
border:none; background: #fff;
} z-index: 3000;
.el-tabs__item{ position: absolute;
color:#ccc; list-style-type: none;
border:none; padding: 5px 0;
} border-radius: 4px;
.el-tabs__item:hover{ font-size: 12px;
color:#409eff; font-weight: 400;
} color: #333;
.is-active{ box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
color:#409eff;
border-bottom:2px solid #409eff !important; li {
} margin: 0;
.el-tabs__nav-scroll{ padding: 7px 16px;
background-color: white; cursor: pointer;
&:hover {
background: #eee;
}
} }
}
.left{
.el-tabs__header{ .el-tabs__header{
box-shadow: 0 1px 2px 0 rgba(0,0,0,.15); padding-right:120px;
margin:0 0 1 0; }
}
.right{
position: absolute;
right:0px;
top:0px;
width:120px;
margin:5px 0px;
display: flex;
justify-content: center;
}
>.tag-tabs{
background-color: #F0F0F0 !important;
.el-tabs{
.el-tabs__nav-scroll{
}
.el-tabs__nav{
padding:0px 10px;
border:none;
}
.el-tabs__active-bar{
background-color: transparent !important;
}
.el-tabs__item{
height: 32px;
line-height: 32px;
border: 1px solid #e8eaec!important;
color: #515a6e!important;
background: #fff!important;
padding: 0 12px;
display: inline-block;
margin: 4px 4px 4px 0;
border-radius: 3px;
font-size: 12px;
vertical-align: middle;
opacity: 1;
overflow: hidden;
.ivu-tag-dot-inner{
display: inline-block;
width: 12px;
height: 12px;
margin-right: 8px;
border-radius: 50%;
background: #e8eaec;
position: relative;
top: 1px;
}
}
.el-tabs__item:hover{
color:#409eff;
}
.is-active{
color:#409eff;
.ivu-tag-dot-inner{
background-color:#409eff !important;
}
border-bottom:2px solid transparent !important;
}
.el-tabs__header{
box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
margin:0 0 1 0;
}
} }
} }
} }
\ No newline at end of file
src/components/tab-page-exp/tab-page-exp.vue
浏览文件 @ 9f2c3b80
<template> <template>
<div class="ibiz-page-tag"> <div class="ibiz-page-tag">
<el-tabs <div class="tag-tabs left">
type="card" <el-tabs
@tab-click="changePage" type="card"
v-model="editableTabsValue" @tab-click="changePage"
closable v-model="editableTabsValue"
@tab-remove="onClose" closable
@tab-remove="onClose"
@contextmenu.prevent.native="openMenu($event)"
>
<el-tab-pane
v-for="(meta, index) of $store.state.pageMetas"
:name="index+''"
:key="index+''"
>
<span slot="label"><span class="ivu-tag-dot-inner"></span>{{ getCaption(meta.caption, meta.info) }}</span>
</el-tab-pane>
</el-tabs>
</div>
<ul
v-show="visible"
:style="{left: left+'px', top: top+'px'}"
class="contextmenu"
> >
<el-tab-pane <li v-for="(item,index) in actions" @click="handlerClose(item)">
v-for="(meta, index) of $store.state.pageMetas" {{ $t(item.text) }}
:label="getCaption(meta.caption, meta.info)" </li>
:name="index+''" </ul>
:key="index+''" <div v-show="$store.state.pageMetas.length > 0" class="right">
></el-tab-pane> <el-dropdown @command="handlerClose">
</el-tabs> <el-button size="mini" type="primary">
更多<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="item" v-for="(item,index) in actions">{{ $t(item.text) }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div> </div>
</template> </template>
...@@ -23,16 +47,49 @@ import { Environment } from "../../environments/environment"; ...@@ -23,16 +47,49 @@ import { Environment } from "../../environments/environment";
@Component({}) @Component({})
export default class TabPageExp extends Vue { export default class TabPageExp extends Vue {
@Provide() @Provide()
public styleLeft: number = 0; public styleLeft: number = 0;
private visible = false; //右键菜单显示状态
private top = 0; //菜单距离顶部位置
private left = 0; //菜单距离左侧位置
@Provide() @Provide()
public actions: any[] = [ public actions: any[] = [
{ text: "app.tabpage.closeall", value: "closeAll" }, { text: "app.tabpage.closeall", value: "closeAll" },
{ text: "app.tabpage.closeother", value: "closeOther" } { text: "app.tabpage.closeother", value: "closeOther" }
]; ];
public editableTabsValue: any = ""; /**
* 关闭tab页方法
*/
public handlerClose(item: any){
this.visible = false;
this.doTagAction(item.value);
}
/**
* 打开右键菜单
*/
private openMenu(e: MouseEvent) {
const menuMinWidth = 105;
const offsetLeft = this.$el.getBoundingClientRect().left;
const offsetWidth = (this.$el as HTMLElement).offsetWidth;
const maxLeft = offsetWidth - menuMinWidth;
const left = e.clientX - offsetLeft - 15;
if (left > maxLeft) {
this.left = maxLeft;
} else {
this.left = left;
}
this.top = e.clientY - 45;
this.visible = true;
}
public editableTabsValue: any = ""; //tabs页绑定值
@Watch("$route") @Watch("$route")
public onRouteChange(newVal: any) { public onRouteChange(newVal: any) {
......
src/engine/view/edit-view-engine.ts
浏览文件 @ 9f2c3b80
...@@ -248,7 +248,7 @@ export default class EditViewEngine extends ViewEngine { ...@@ -248,7 +248,7 @@ export default class EditViewEngine extends ViewEngine {
public setTabCaption(info: string): void { public setTabCaption(info: string): void {
let viewdata: any = this.view.model; let viewdata: any = this.view.model;
if (viewdata && info && !Object.is(info, '') && this.view.$tabPageExp && (viewdata.srfTitle.indexOf(" - ") === -1)) { if (viewdata && info && !Object.is(info, '') && this.view.$tabPageExp && (viewdata.srfTitle.indexOf(" - ") === -1)) {
this.view.$tabPageExp.setCurPageCaption(viewdata.srfCaption, viewdata.srfTitle, info); this.view.$tabPageExp.setCurPageCaption(viewdata.srfTitle, viewdata.srfTitle, info);
this.view.model.srfTitle = `${this.view.$t(viewdata.srfTitle)} - ${viewdata.dataInfo}`; this.view.model.srfTitle = `${this.view.$t(viewdata.srfTitle)} - ${viewdata.dataInfo}`;
} }
} }
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或