Skip to content

H
hls-easy-ui
Commit 4b7de2b3 authored by Nature's avatar Nature
Browse files
Options

s-tab添加横向滚动支持

parent 47a7d413
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 52 deletions
packages/components/STab/index.vue
View file @ 4b7de2b3
<template>
<section :class="[c(),tabCss, cusClass]">
<slot/>
<section :class="[c(),tabCss, cusClass,overFlow]">
<section :style="transform" class="tab-content">
<slot/>
</section>
</section>
</template>
<script>
import {base} from '../../common/mixins'
import { base } from '../../common/mixins'
import stabItem from './tab-item'
export default {
name: 'SwitchTab',
mixins: [base],
component: {stabItem},
component: { stabItem },
props: {
position: {
type: String,
......@@ -28,15 +30,24 @@ export default {
type: Boolean,
default: false,
},
overflowX: {
type: Boolean,
default: false,
},
},
data () {
return {
items: [],
length: '',
activedIndex: '',
deviceWidth: window.innerWidth,
translate: 0,
}
},
computed: {
overFlow () {
return this.overflowX ? 'auto-overflow-x' : ''
},
tabCss () {
return this.position === 'top' ? this.c('top') : this.c('bottom')
},
......@@ -54,37 +65,72 @@ export default {
}
return vm.index
},
transform () {
return {
transform: 'translateX(' + this.translate + 'px' + ')',
}
},
},
mounted () {
let vm = this
this.items[vm.current].$el.classList.add('activated')
this.scrollToActiveTab(vm.current, this.items[vm.current].$el.clientWidth)
},
methods: {
actived (index) {
actived (index, clientWidth) {
this.activedIndex = index
this.$emit('tabClick', index)
this.scrollToActiveTab(index, clientWidth)
},
scrollToActiveTab (index, width) {
index += 1
let vm = this
let count = Math.floor(vm.deviceWidth / width)
let overFlowWinth = vm.deviceWidth - count * width
let num
if (index > count) {
num = index - count
} else {
num = 0
}
if (num === 0) {
vm.translate = -num * width
} else {
vm.translate = -num * width + overFlowWinth
}
},
},
}
</script>
<style lang="less">
.auto-overflow-x {
overflow-x: auto;
}
.hls-switch-tab {
width: 100%;
position: absolute;
z-index: 1;
display: flex;
justify-content: space-around;
// justify-content: space-around;
height: 40px;
background-color: #fff;
&-top {
top: 0;
&:after {
.setBottomLine();
}
}
&-bottom {
bottom: 0;
&:before {
.setTopLine();
}
......
packages/components/STab/tab-item.vue
View file @ 4b7de2b3
<template>
<section class="tab-content" @click="titleClick">
<section class="h-tab-item">
<div class="h-item">
<slot/>
</div>
</section>
<section class="h-tab-item" @click="titleClick">
<div class="h-item">
<slot/>
</div>
<div v-show="showDivider" class="tab-divider"/>
</section>
</template>
<script>
export default {
name: 'TabItem',
data () {
return {}
return {
}
},
computed: {
showDivider () {
......@@ -36,8 +37,10 @@ export default {
let clickIndex = Number(event.currentTarget.getAttribute('data-index'))
event.currentTarget.classList.remove('activated')
event.currentTarget.classList.add('activated')
vm.$parent.actived(clickIndex)
let clientWidth = event.currentTarget.clientWidth
vm.$parent.actived(clickIndex, clientWidth)
},
},
}
</script>
......@@ -48,7 +51,6 @@ export default {
.tab-content {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
.h-tab-item {
......@@ -57,6 +59,7 @@ export default {
display: flex;
align-items: center;
justify-content: center;
.h-item {
//width: 100%;
font-size: 14px;
......@@ -67,27 +70,25 @@ export default {
align-items: center;
justify-content: center;
padding: 0 3px;
border-bottom: 1px solid rgba(255,255,255,.0); /*no*/
border-bottom: 1px solid rgba(255, 255, 255, .0); /*no*/
}
}
.tab-divider {
width: 1px; /*no*/
height: 50%;
background-color: rgb(214, 217, 218);
}
&.activated {
.h-tab-item {
&.activated {
.h-item {
color: #1e8ceb;
border-bottom: 1px solid #1e8ceb; /*no*/
}
}
}
&:last-child {
.tab-divider {
width: 0px;
width: 1px; /*no*/
height: 50%;
background-color: rgb(214, 217, 218);
}
&:last-child {
.tab-divider {
width: 0px;
}
}
}
}
......
packages/components/Swipe/index.vue
View file @ 4b7de2b3
......@@ -90,6 +90,14 @@ export default {
type: Boolean,
default: true,
},
defaultWidth: {
type: Number,
default: 0,
},
defaultHeight: {
type: Number,
default: 0,
},
cusClass: {
type: String,
default: '',
......@@ -161,26 +169,31 @@ export default {
init () {
let vm = this
vm.clear()
if (vm.$el) {
vm.width = vm.$el.offsetWidth || document.documentElement.offsetWidth
vm.height = vm.$el.offsetHeight || document.documentElement.offsetHeight
if (vm.defaultWidth) {
vm.width = vm.defaultWidth
} else if (vm.defaultHeight) {
vm.hight = vm.defaultHeight
} else {
// 获取窗口宽度
if (window.innerWidth) { vm.width = window.innerWidth } else if ((document.body) && (document.body.clientWidth)) {
vm.width = document.body.clientWidth
if (vm.$el) {
vm.width = vm.$el.offsetWidth || document.documentElement.offsetWidth
vm.height = vm.$el.offsetHeight || document.documentElement.offsetHeight
} else {
// 获取窗口宽度
if (window.innerWidth) { vm.width = window.innerWidth } else if ((document.body) && (document.body.clientWidth)) {
vm.width = document.body.clientWidth
}
if (window.innerHeight) { vm.height = window.innerHeight } else if ((document.body) && (document.body.clientHeight)) { vm.height = document.body.clientHeight }
// 通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
vm.height = document.documentElement.clientHeight
vm.width = document.documentElement.clientWidth
}
}
if (window.innerHeight) { vm.height = window.innerHeight } else if ((document.body) && (document.body.clientHeight)) { vm.height = document.body.clientHeight }
// 通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
vm.height = document.documentElement.clientHeight
vm.width = document.documentElement.clientWidth
if (!vm.width) {
vm.width = 375
vm.height = 667
}
}
if (!vm.width) {
vm.width = 375
vm.height = 667
}
this.active = this.index
this.offset = this.count > 1 ? -this.size * this.active : 0
this.swipes.forEach(swipe => {
......
src/pages/hlsPopup.vue
View file @ 4b7de2b3
......@@ -9,12 +9,20 @@
操作
</div>
</h-header>
<!-- <s-tab @tabClick="stablick" cusClass="popup-tab">
<tab-item>测试</tab-item>
<tab-item>你好</tab-item>
<tab-item>再见</tab-item>
<tab-item>按钮</tab-item>
</s-tab>-->
<!-- <s-tab :overflowX="true" :showDivider="true" class="has-header" :defaultActive="6">
<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>
<tab-item>执行记录</tab-item>
<tab-item>失信记录</tab-item>
<tab-item>涉诉公告</tab-item>
<tab-item>司法协助</tab-item>
</s-tab>-->
<h-content
class="has-header has-footer">
<h-button class="button-class" type="primary" @click.native="showLoading">showLoading</h-button>
......@@ -72,7 +80,7 @@
<h-button class="button-class radius-small" disabled>基础按钮(禁用)</h-button>
<h2 class="item-title">Swip基础使用</h2>
<swipe :interval="5000" @start="start" @move="move" @change="change">
<swipe :interval="5000" @start="start" @move="move" @change="change" :defaultWidth="200">
<swipe-item>
<div :style="{'background': bgColor[0]}" class="item-bg">0</div>
</swipe-item>
......@@ -85,7 +93,7 @@
</swipe>
<h2 class="item-title">纵向滚动</h2>
<swipe :vertical="true" style="height: 200px">
<swipe :vertical="true" style="height: 200px">
<swipe-item v-for="key in count" :key="key" :style="{'background': bgColor[key-1]}">
<div class="item-bg">{{ key-1 }}</div>
</swipe-item>
......@@ -660,6 +668,13 @@ export default {
.hls-popup {
height: 100%;
width: 100%;
.hls-switch-tab {
.tab-content .h-tab-item .h-item{
width: 80px;
}
}
.vue-better-scroll__wrapper {
width: 100%;
}
......
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