From 3af382c2b9ddf2a8210b6477bb46b0945ce26a64 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期五, 26 四月 2024 22:22:56 +0800
Subject: [PATCH] 调整
---
src/uni_modules/csr-tab/components/csr-tab/csr-tab.vue | 306 +++++++++++++++++++++++++++-----------------------
1 files changed, 167 insertions(+), 139 deletions(-)
diff --git a/src/uni_modules/csr-tab/components/csr-tab/csr-tab.vue b/src/uni_modules/csr-tab/components/csr-tab/csr-tab.vue
index b3a6d09..f2c2ed8 100644
--- a/src/uni_modules/csr-tab/components/csr-tab/csr-tab.vue
+++ b/src/uni_modules/csr-tab/components/csr-tab/csr-tab.vue
@@ -1,153 +1,181 @@
<template>
- <view :class="{'uni-scroll-tab': scroll === true }" class="uni-tab ">
-
- <view v-for="(tab,index) in tabList" :key="index"
- :class="{ 'uni-tab-active': index === value, 'uni-tab-scroll-item': scroll === true, ' uni-tab-scroll-active': index === value && scroll === true }"
- :style="[{color:index === value ? activeColor : defaultColor,backgroundColor: bgColor}]"
- @tap="itemClick(index,tab)" class="uni-tab-item">
- <span v-if="tab.icon != undefined" class="iconfont mr5" :class="tab.icon"></span>
+ <view :class="{ 'uni-scroll-tab': scroll === true }" class="uni-tab">
+ <view
+ v-for="(tab, index) in tabList"
+ :key="index"
+ :class="{
+ 'uni-tab-active': index === value,
+ 'uni-tab-scroll-item': scroll === true,
+ ' uni-tab-scroll-active': index === value && scroll === true
+ }"
+ :style="[
+ {
+ color: index === value ? activeColor : defaultColor,
+ backgroundColor: bgColor
+ }
+ ]"
+ style="cursor: pointer;"
+ @tap="itemClick(index, tab)"
+ class="uni-tab-item"
+ >
+ <span
+ v-if="tab.icon != undefined"
+ class="iconfont mr5"
+ :class="tab.icon"
+ ></span>
- <text>{{rangeKey == '' ? tab.TabControl : tab[rangeKey]}}</text>
- </view>
- <view v-if="!scroll" :style="[{ right: barRight + '%', left : barLeft + '%', borderColor: activeColor }]"
- class="uni-tab-bar" :class="back ? 'uni-tab-bar-backward' : 'uni-tab-bar-forward'"></view>
- </view>
+ <text>{{ rangeKey == "" ? tab.TabControl : tab[rangeKey] }}</text>
+ </view>
+ <view
+ v-if="!scroll"
+ :style="[
+ { right: barRight + '%', left: barLeft + '%', borderColor: activeColor }
+ ]"
+ class="uni-tab-bar"
+ :class="back ? 'uni-tab-bar-backward' : 'uni-tab-bar-forward'"
+ ></view>
+ </view>
</template>
<script>
- export default {
- name: 'uni-tab',
- data() {
- return {
- average: 0,
- back: false
- };
- },
- props: {
- value: {
- type: Number, //褰撳墠閫変腑涓嬫爣
- default () {
- return 0;
- }
- },
- tabList: {
- type: Array,
- default () {
- return [];
- }
- },
- bgColor: { //鑳屾櫙棰滆壊
- type: String,
- default () {
- return '#FFFFFF';
- }
- },
- defaultColor: { //榛樿鏈�変腑鏂囧瓧棰滆壊
- type: String,
- default () {
- return '#636363';
- }
- },
- activeColor: { //閫変腑鏃舵枃瀛楅鑹� 绾挎潯棰滆壊
- type: String,
- default () {
- return '#000000';
- }
- },
- rangeKey: { // 褰搕abList涓哄璞℃椂 鏄剧ず鎸囧畾涓嬫爣鍊�
- type: String,
- default () {
- return '';
- }
- },
- scroll: { //妯悜婊戝姩
- type: Boolean,
- default () {
- return false;
- }
- },
- },
- computed: {
- barLeft() {
- return this.value * this.average;
- },
- barRight() {
- let index = this.tabList.length - this.value - 1;
- console.log(this.tabList.length,index * this.average);
- return index * this.average;
- },
- },
- created() {
- this.average = 100 / this.tabList.length;
- },
- methods: {
- itemClick(index, tab) {
- if (this.value == index) return false;
- if (this.value > index) {
- this.back = true;
- } else {
- this.back = false;
- }
- // this.value = index;
- this.$emit('update:value', index);
- this.$emit('change', {
- tab: tab
- });
- }
- }
- };
+export default {
+ name: "uni-tab",
+ data() {
+ return {
+ average: 0,
+ back: false
+ };
+ },
+ props: {
+ value: {
+ type: Number, //褰撳墠閫変腑涓嬫爣
+ default() {
+ return 0;
+ }
+ },
+ tabList: {
+ type: Array,
+ default() {
+ return [];
+ }
+ },
+ bgColor: {
+ //鑳屾櫙棰滆壊
+ type: String,
+ default() {
+ return "#FFFFFF";
+ }
+ },
+ defaultColor: {
+ //榛樿鏈�変腑鏂囧瓧棰滆壊
+ type: String,
+ default() {
+ return "#636363";
+ }
+ },
+ activeColor: {
+ //閫変腑鏃舵枃瀛楅鑹� 绾挎潯棰滆壊
+ type: String,
+ default() {
+ return "#000000";
+ }
+ },
+ rangeKey: {
+ // 褰搕abList涓哄璞℃椂 鏄剧ず鎸囧畾涓嬫爣鍊�
+ type: String,
+ default() {
+ return "";
+ }
+ },
+ scroll: {
+ //妯悜婊戝姩
+ type: Boolean,
+ default() {
+ return false;
+ }
+ }
+ },
+ computed: {
+ barLeft() {
+ return this.value * this.average;
+ },
+ barRight() {
+ let index = this.tabList.length - this.value - 1;
+ return index * this.average;
+ }
+ },
+ created() {
+ this.average = 100 / this.tabList.length;
+ },
+ methods: {
+ itemClick(index, tab) {
+ if (this.value == index) return false;
+ if (this.value > index) {
+ this.back = true;
+ } else {
+ this.back = false;
+ }
+ // this.value = index;
+ this.$emit("update:value", index);
+ this.$emit("change", {
+ tab: tab
+ });
+ }
+ }
+};
</script>
<style lang="scss" scoped>
- @import "../../static/iconfont.css";
+@import "../../static/iconfont.css";
- .uni-tab {
- position: relative;
- display: flex;
- font-size: 14px;
- height: 44px;
- line-height: 44px;
- // sdsd
- // justify-content: center;
- .uni-tab-item {
- flex: 1;
- // width: 20% !important;
- height: 100%;
- text-align: center;
- box-sizing: border-box;
- overflow: hidden;
- }
+.uni-tab {
+ position: relative;
+ display: flex;
+ font-size: 14px;
+ height: 44px;
+ line-height: 44px;
+ // sdsd
+ // justify-content: center;
+ .uni-tab-item {
+ flex: 1;
+ // width: 20% !important;
+ height: 100%;
+ text-align: center;
+ box-sizing: border-box;
+ overflow: hidden;
+ }
- .uni-tab-scroll-item {
- flex: none;
- padding: 0px 12px;
- }
+ .uni-tab-scroll-item {
+ flex: none;
+ padding: 0px 12px;
+ }
- .uni-tab-active {
-
- color: #1e9fff;
- }
+ .uni-tab-active {
+ color: #1e9fff;
+ }
- .uni-tab-scroll-active {
- border-bottom: 3px solid #1e9fff;
- }
+ .uni-tab-scroll-active {
+ border-bottom: 3px solid #1e9fff;
+ }
- .uni-tab-bar {
- display: block;
- height: 3px;
- position: absolute;
- bottom: 0;
- border-bottom: 3px solid #1e9fff;
- }
+ .uni-tab-bar {
+ display: block;
+ height: 3px;
+ position: absolute;
+ bottom: 0;
+ border-bottom: 3px solid #1e9fff;
+ }
- .uni-tab-bar-forward {
- transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1), left 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s;
- }
+ .uni-tab-bar-forward {
+ transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1),
+ left 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s;
+ }
- .uni-tab-bar-backward {
- transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s, left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
- }
- }
+ .uni-tab-bar-backward {
+ transition: right 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s,
+ left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+ }
+}
- .uni-scroll-tab {
- overflow-x: scroll;
- }
-</style>
\ No newline at end of file
+.uni-scroll-tab {
+ overflow-x: scroll;
+}
+</style>
--
Gitblit v1.9.1