Commit f3a7db02 authored by Nature's avatar Nature

stab分割线问题

parent b6f84ab8
...@@ -461,14 +461,14 @@ showActionSheetButton() { ...@@ -461,14 +461,14 @@ showActionSheetButton() {
### s-tab 切换 ### s-tab 切换
```html ```html
<div class="local-region"> <div class="local-region">
<s-tab @tabClick="stabClick" :show-divider="true"> <s-tab @tabClick="stabClick" :show-divider="true" has-border="true">
<tab-item>测试</tab-item> <tab-item>测试</tab-item>
<tab-item>你好</tab-item> <tab-item>你好</tab-item>
<tab-item>再见</tab-item> <tab-item>再见</tab-item>
<tab-item>按钮</tab-item> <tab-item>按钮</tab-item>
</s-tab> </s-tab>
<s-tab @tabClick="stabClick" position="bottom" cusClass='class' :default-active="2"> <s-tab @tabClick="stabClick" cusClass='class' :default-active="2">
<tab-item><img src="../assets/image/myInfo/about@2x.png"></tab-item> <tab-item><img src="../assets/image/myInfo/about@2x.png"></tab-item>
<tab-item><img src="../assets/image/myInfo/version@2x.png"></tab-item> <tab-item><img src="../assets/image/myInfo/version@2x.png"></tab-item>
<tab-item><img src="../assets/image/myInfo/setting@2x.png"></tab-item> <tab-item><img src="../assets/image/myInfo/setting@2x.png"></tab-item>
...@@ -530,3 +530,9 @@ showActionSheetButton() { ...@@ -530,3 +530,9 @@ showActionSheetButton() {
}, },
``` ```
### Note
hls-easy-ui#0.0.2.1
添加ios下content的has-footer样式用于content高度在100%是滑动不到底部的问题
修复 s-tab分割线以及活跃状态下底部边线的样式
{ {
"name": "hls-easy-ui", "name": "hls-easy-ui",
"version": "0.0.2", "version": "0.0.2.1",
"description": "A Vue components project", "description": "A Vue components project",
"author": "JingChao <jingchao.wu@hand-china.com>", "author": "JingChao <jingchao.wu@hand-china.com>",
"private": false, "private": false,
......
<template> <template>
<section :class="[c(),tabCss, cusClass,overFlow]" > <section :class="[c(),cusClass,overFlow]" >
<section :style="transform" class="tab-content"> <section :style="transform" class="tab-content">
<slot/> <slot/>
</section> </section>
...@@ -34,6 +34,10 @@ export default { ...@@ -34,6 +34,10 @@ export default {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
hasBorder: {
type: Boolean,
default: false,
},
}, },
data () { data () {
return { return {
...@@ -47,12 +51,9 @@ export default { ...@@ -47,12 +51,9 @@ export default {
overFlow () { overFlow () {
return this.overflowX ? 'auto-overflow-x' : '' return this.overflowX ? 'auto-overflow-x' : ''
}, },
tabCss () {
return this.position === 'top' ? this.c('top') : this.c('bottom')
},
count () { count () {
this.length = this.items.length this.length = this.items.length
return this.items.length return this.length
}, },
current () { current () {
let vm = this let vm = this
...@@ -118,7 +119,7 @@ export default { ...@@ -118,7 +119,7 @@ export default {
.hls-switch-tab { .hls-switch-tab {
width: 100%; width: 100%;
// position: absolute; position: relative;
z-index: 1; z-index: 1;
display: flex; display: flex;
// justify-content: space-around; // justify-content: space-around;
......
<template> <template>
<section class="h-tab-item" @click="titleClick"> <section :class="[tabClass]" class="h-tab-item" @click="titleClick">
<div class="h-item"> <div class="h-item">
<slot/> <slot/>
<div class="bottom-border"/> <div class="bottom-border"/>
...@@ -21,6 +21,11 @@ export default { ...@@ -21,6 +21,11 @@ export default {
showDivider () { showDivider () {
return this.$parent.showDivider return this.$parent.showDivider
}, },
tabClass () {
if (this.$parent.hasBorder) {
return this.$parent.position === 'top' ? 'vue-1px-b' : 'vue-1px-t'
}
},
}, },
mounted () { mounted () {
this.$parent && this.$parent.items.push(this) this.$parent && this.$parent.items.push(this)
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
操作 操作
</div> </div>
</h-header> </h-header>
<!-- <s-tab :overflowX="true" :showDivider="true" class="has-header" :defaultActive="6"> <s-tab :overflowX="true" :showDivider="true" :defaultActive="6" has-border="true">
<tab-item>工商资料</tab-item> <tab-item>工商资料</tab-item>
<tab-item>股东成员</tab-item> <tab-item>股东成员</tab-item>
<tab-item>对外投资</tab-item> <tab-item>对外投资</tab-item>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<tab-item>失信记录</tab-item> <tab-item>失信记录</tab-item>
<tab-item>涉诉公告</tab-item> <tab-item>涉诉公告</tab-item>
<tab-item>司法协助</tab-item> <tab-item>司法协助</tab-item>
</s-tab>--> </s-tab>
<h-content class="has-footer"> <h-content class="has-footer">
<h-button class="button-class" type="primary" @click.native="showLoading">showLoading</h-button> <h-button class="button-class" type="primary" @click.native="showLoading">showLoading</h-button>
<h-button class="button-class" type="primary" @click.native="hideLoading">hideLoading</h-button> <h-button class="button-class" type="primary" @click.native="hideLoading">hideLoading</h-button>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment