drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Tabs: Increase the left and right scroll distance

Browse source
This commit is contained in:
梁灏 2019-09-06 10:32:34 +08:00
parent ec3eea6803
commit 849eedd3bd
2 changed files with 23 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
examples/routers/tabs.vue
View file

@ -1,75 +1,19 @@
<!--<template>-->
<!-- <Tabs :animated="false" value="name1">-->
<!-- <Tab-pane label="标签一" name="name1">-->
<!-- <Table :columns="columns1"></Table>-->
<!-- </Tab-pane>-->
<!-- <Tab-pane label="标签二" name="name2">-->
<!-- <Table :columns="columns1"></Table>-->
<!-- </Tab-pane>-->
<!-- <Tab-pane label="标签三" name="name3">-->
<!-- <Table :columns="columns1" ></Table>-->
<!-- </Tab-pane>-->
<!-- </Tabs>-->
<!--</template>-->
<!--<script>-->
<!-- export default {-->
<!-- data() {-->
<!-- return {-->
<!-- columns1: [-->
<!-- {-->
<!-- title: '姓名',-->
<!-- key: 'name'-->
<!-- },-->
<!-- {-->
<!-- title: '年龄',-->
<!-- key: 'age'-->
<!-- },-->
<!-- {-->
<!-- title: '地址',-->
<!-- key: 'address'-->
<!-- }-->
<!-- ],-->
<!-- data1: [-->
<!-- {-->
<!-- name: '王小明',-->
<!-- age: 18,-->
<!-- address: '北京市朝阳区芍药居'-->
<!-- },-->
<!-- {-->
<!-- name: '张小刚',-->
<!-- age: 25,-->
<!-- address: '北京市海淀区西二旗'-->
<!-- },-->
<!-- {-->
<!-- name: '李小红',-->
<!-- age: 30,-->
<!-- address: '上海市浦东新区世纪大道'-->
<!-- },-->
<!-- {-->
<!-- name: '周小伟',-->
<!-- age: 26,-->
<!-- address: '深圳市南山区深南大道'-->
<!-- }-->
<!-- ]-->
<!-- }-->
<!-- }-->
<!-- }-->
<!--</script>-->
<template> <template>
<div> <Tabs type="card">
<Button @click="showSecond = !showSecond">change</Button> <TabPane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</TabPane>
<Tabs value="name1"> <Button @click="handleTabsAdd" size="small" slot="extra">增加</Button>
<TabPane label="标签一" name="name1" :index="1">标签一的内容</TabPane> </Tabs>
<TabPane label="标签二" name="name2" :index="2" v-if="showSecond">标签二的内容</TabPane>
<TabPane label="标签三" name="name3" :index="3">标签三的内容</TabPane>
</Tabs>
</div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
showSecond: false tabs: 20
}
},
methods: {
handleTabsAdd () {
this.tabs ++;
} }
} }
} }

21
src/styles/components/tabs.less
View file

@ -66,22 +66,27 @@
margin-left: 5px; margin-left: 5px;
} }
&-nav-prev{ &-nav-prev, &-nav-next{
position:absolute; width: 32px;
text-align: center;
position: absolute;
line-height: 32px; line-height: 32px;
cursor: pointer; cursor: pointer;
left:0; i{
font-size: 16px;
}
}
&-nav-prev{
left: 0;
} }
&-nav-next{ &-nav-next{
position:absolute; right: 0;
line-height: 32px;
cursor: pointer;
right:0;
} }
&-nav-scrollable{ &-nav-scrollable{
padding: 0 12px; padding: 0 32px;
} }
&-nav-scroll-disabled{ &-nav-scroll-disabled{