Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
c82a6e54
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
c82a6e54
编写于
10月 12, 2020
作者:
xiaozhumaopao
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 修改tab组件宽度不一致的问题
上级
952c3ac8
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
23 addition
and
19 deletion
+23
-19
src/packages/tab/demo.vue
src/packages/tab/demo.vue
+3
-3
src/packages/tab/tab.vue
src/packages/tab/tab.vue
+20
-16
未找到文件。
src/packages/tab/demo.vue
浏览文件 @
c82a6e54
...
...
@@ -40,7 +40,7 @@
</nut-tab>
<h4>
纵向tab切换超出界面高度,设置tab区域高度
</h4>
<nut-tab
@
tab-switch=
"tabSwitch"
position-nav=
"left"
:is-scroll=
"true"
:wrapper-height=
"200"
>
<nut-tab
@
tab-switch=
"tabSwitch"
position-nav=
"left"
:is-scroll=
"true"
:wrapper-height=
"200"
:def-index=
"3"
>
<nut-tab-panel
v-for=
"value in editableTabs"
v-bind:key=
"value.tabTitle"
...
...
@@ -69,7 +69,7 @@
v-html=
"value.content"
></nut-tab-panel>
</nut-tab>
<div
style=
"width: 100%; text-align: center
;
"
>
<div
style=
"width: 100%; text-align: center"
>
<nut-button
@
click=
"resetHandler"
type=
"light"
>
重置Tab页面
</nut-button>
<nut-button
@
click=
"clickHandler"
>
更新Tab页面
</nut-button>
</div>
...
...
@@ -147,7 +147,7 @@ export default {
},
methods
:
{
tabSwitch
:
function
(
index
,
event
)
{
console
.
log
(
index
+
'
--
'
+
event
);
//
console.log(index + '--' + event);
//this.defIndex = index;
},
clickHandler
:
function
()
{
...
...
src/packages/tab/tab.vue
浏览文件 @
c82a6e54
...
...
@@ -150,27 +150,31 @@ export default {
}
}
this
.
$nextTick
(()
=>
{
let
tapWidth
;
if
(
this
.
positionNav
==
'
top
'
||
this
.
positionNav
==
'
bottom
'
)
{
this
.
navWidth
=
this
.
$refs
.
navlist
.
querySelector
(
'
.nut-title-nav
'
).
offsetWidth
;
tapWidth
=
this
.
$refs
.
navlist
.
offsetWidth
;
}
else
{
this
.
navWidth
=
this
.
$refs
.
navlist
.
querySelector
(
'
.nut-title-nav
'
).
offsetHeight
;
tapWidth
=
this
.
$refs
.
navlist
.
offsetHeight
;
}
this
.
initX
=
parseInt
(
this
.
navWidth
*
this
.
defIndex
);
this
.
tapWidth
=
tapWidth
/
2
-
this
.
navWidth
/
2
;
this
.
handleTab
(
this
.
defIndex
);
});
},
handleTab
(
index
)
{
const
currEle
=
this
.
$refs
.
navlist
.
querySelectorAll
(
'
.nut-title-nav
'
)[
index
];
if
(
this
.
positionNav
==
'
top
'
||
this
.
positionNav
==
'
bottom
'
)
{
const
currLeft
=
currEle
.
offsetLeft
;
const
currWidth
=
currEle
.
offsetWidth
;
const
tapWidth
=
this
.
$refs
.
navlist
.
offsetWidth
;
this
.
navWidth
=
currWidth
;
this
.
initX
=
currLeft
;
this
.
$refs
.
navlist
.
scroll
(
currLeft
-
tapWidth
/
2
+
currWidth
/
2
,
0
);
}
else
{
const
currTop
=
currEle
.
offsetTop
;
const
currHeight
=
currEle
.
offsetHeight
;
const
tapHeight
=
this
.
$refs
.
navlist
.
offsetHeight
;
this
.
navWidth
=
currHeight
;
this
.
initX
=
currTop
;
this
.
$refs
.
navlist
.
scroll
(
0
,
currTop
-
tapHeight
/
2
+
currHeight
/
2
);
}
},
switchTab
:
function
(
index
,
event
,
disable
)
{
if
(
!
disable
)
{
this
.
activeIndex
=
index
;
this
.
initX
=
parseInt
(
this
.
navWidth
*
index
);
if
(
this
.
positionNav
==
'
top
'
||
this
.
positionNav
==
'
bottom
'
)
{
this
.
$refs
.
navlist
.
scroll
(
this
.
initX
-
this
.
tapWidth
,
0
);
}
else
{
this
.
$refs
.
navlist
.
scroll
(
0
,
this
.
initX
-
this
.
tapWidth
);
}
this
.
handleTab
(
index
);
let
items
=
this
.
$refs
.
items
.
children
;
for
(
let
i
=
0
;
i
<
items
.
length
;
i
++
)
{
if
(
i
==
index
)
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录