张雄 3 years ago
parent 70b69c1c54
commit b88a694abd

@ -11,6 +11,7 @@ import vLabelDivLight from "@/components/v-labelDivLight";
import vModal from "@/components/v-modal";
import vTable from "@/components/v-table";
import vTabGroup from "@/components/v-tab-group";
import vTabGroupLight from "@/components/v-tab-group-light";
import vTabGroupControl from "@/components/v-tab-group-control";
import vTabMode from "@/components/v-tab-mode";
import vEcharts from "@/components/v-echars";
@ -33,6 +34,7 @@ export default {
vModal,
vTable,
vTabGroup,
vTabGroupLight,
vTabGroupControl,
vTabMode,
vEcharts,

@ -0,0 +1,101 @@
<!--
* @Author: your name
* @Date: 2021-10-08 19:06:37
* @LastEditTime: 2021-10-28 11:11:13
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/components/v-tab-group/index.vue
-->
<template>
<div v-if="!getIsLight" class="l-t-g-container" ref="l-t-g">
<template v-for="(item,index) in btns">
<span v-if="activeInex === index" class="v-g-item v-g-item-active" :key="index" @click="handlerClick(index)">{{item}}</span>
<span v-else class="v-g-item" :key="index" @click="handlerClick(index)">{{item}}</span>
</template>
</div>
<div v-else class="l-light-container" ref="l-l-g">
<template v-for="(item,index) in btns">
<span v-if="activeInex === index" class="v-g-item v-g-item-active" :key="index" @click="handlerClick(index)">{{item}}</span>
<span v-else class="v-g-item" :key="index" @click="handlerClick(index)">{{item}}</span>
</template>
</div>
</template>
<script>
export default {
name: "v-tab-group",
props: {
value: {
type: Number,
default: 0
},
btns: {
type: Array,
default: () => []
},
},
watch: {
value: {
handler(val) {
this.activeInex = val
},
immediate: true
}
},
data() {
return {
activeInex: 0
}
},
methods: {
handlerClick(n) {
this.activeInex = n;
// this.$emit('update:value', this.activeInex)
this.$emit('change', this.activeInex);
}
}
}
</script>
<style lang="less" scoped>
.l-t-g-container {
display: inline-block;
background: #1B4163;
padding: 3px;
border-radius: 2px;
font-size: 14px;
.v-g-item {
display: inline-block;
padding: 2px 10px;
color: #63AECC;
text-align: center;
cursor: pointer;
border-radius: 2px;
}
.v-g-item-active {
background: linear-gradient(180deg, #00498C 0%, #002343 100%);
border: 1px solid #63AECC;
}
}
.l-light-container {
display: inline-block;
background: #FFF;
padding: 3px;
border-radius: 2px;
font-size: 14px;
border: 1px solid #1EC8FA;
.v-g-item {
display: inline-block;
padding: 2px 10px;
text-align: center;
color: #000;
cursor: pointer;
border-radius: 2px;
}
.v-g-item-active {
background: #E7F1FF;
border: 1px solid #63AECC;
color: #000
}
}
</style>

@ -7,13 +7,7 @@
* @FilePath: /data-show/src/components/v-tab-group/index.vue
-->
<template>
<div v-if="!getIsLight" class="v-t-g-container" ref="V-t-g">
<template v-for="(item,index) in btns">
<span v-if="activeInex === index" class="v-g-item v-g-item-active" :key="index" @click="handlerClick(index)">{{item}}</span>
<span v-else class="v-g-item" :key="index" @click="handlerClick(index)">{{item}}</span>
</template>
</div>
<div v-else class="v-light-container" ref="V-l-g">
<div class="v-t-g-container" ref="V-t-g">
<template v-for="(item,index) in btns">
<span v-if="activeInex === index" class="v-g-item v-g-item-active" :key="index" @click="handlerClick(index)">{{item}}</span>
<span v-else class="v-g-item" :key="index" @click="handlerClick(index)">{{item}}</span>

@ -4,7 +4,7 @@
<v-tab-group :value="tValue" :style="{ background: 'transparent' }" :btns="btnTimes" @change="handlerType"></v-tab-group>
</v-label-div>
<v-label-div-light v-else title="品牌销量排行榜TOP20">
<v-tab-group :value="tValue" :style="{ background: 'transparent' }" :btns="btnTimes" @change="handlerType"></v-tab-group>
<v-tab-group-light :value="tValue" :style="{ background: 'transparent' }" :btns="btnTimes" @change="handlerType"></v-tab-group-light>
</v-label-div-light>
<div class="d2">
<a-form-model :class="getIsLight?'lightSy':'dark'" layout="inline">

Loading…
Cancel
Save