|
@@ -1,8 +1,8 @@
|
|
|
<template>
|
|
|
<div class="btn-group">
|
|
|
<div
|
|
|
- :class="['btn-item', { active: active === index }]"
|
|
|
- @click="handleActive(item,index)"
|
|
|
+ :class="['btn-item', { active: activeVal === index }]"
|
|
|
+ @click="handleActive(item, index)"
|
|
|
v-for="(item, index) in baseList"
|
|
|
:key="index + item"
|
|
|
>
|
|
@@ -12,61 +12,67 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import {onMounted, onUnmounted, ref, watch} from 'vue'
|
|
|
+import { onMounted, onUnmounted, ref, watch } from "vue";
|
|
|
import eventBus from "@/api/eventBus";
|
|
|
|
|
|
const props = defineProps({
|
|
|
list: {
|
|
|
type: Array,
|
|
|
- defalut: ()=>[],
|
|
|
+ defalut: () => [],
|
|
|
},
|
|
|
keyStr: {
|
|
|
type: String,
|
|
|
- defalut: '',
|
|
|
+ defalut: "",
|
|
|
},
|
|
|
active: {
|
|
|
type: String,
|
|
|
- defalut: '',
|
|
|
+ defalut: "",
|
|
|
},
|
|
|
});
|
|
|
|
|
|
-onMounted(()=>{
|
|
|
+onMounted(() => {
|
|
|
//选项监听事件
|
|
|
- eventBus.on('handleTab',handleTab)
|
|
|
-})
|
|
|
+ eventBus.on("handleTab", handleTab);
|
|
|
+});
|
|
|
|
|
|
-onUnmounted(()=>{
|
|
|
- eventBus.off('handleTab',handleTab)
|
|
|
-})
|
|
|
+onUnmounted(() => {
|
|
|
+ eventBus.off("handleTab", handleTab);
|
|
|
+});
|
|
|
|
|
|
-const emit = defineEmits(["handleActive"])
|
|
|
+const emit = defineEmits(["handleActive"]);
|
|
|
|
|
|
-const baseList = ref([])
|
|
|
-const active = ref(0);
|
|
|
-const handleActive = (item,index) => {
|
|
|
- active.value = index;
|
|
|
- eventBus.emit('handleActive',{name:item,key:props.keyStr,index})
|
|
|
+const baseList = ref([]);
|
|
|
+const activeVal = ref(0);
|
|
|
+const handleActive = (item, index) => {
|
|
|
+ activeVal.value = index;
|
|
|
+ eventBus.emit("handleActive", { name: item, key: props.keyStr, index });
|
|
|
};
|
|
|
|
|
|
-function handleTab(e){
|
|
|
- active.value = 0
|
|
|
+function handleTab(e) {
|
|
|
+ activeVal.value = 0;
|
|
|
}
|
|
|
|
|
|
-watch(()=>props.list,(newValue,oldValue)=>{
|
|
|
- if(newValue){
|
|
|
- baseList.value = newValue
|
|
|
+watch(
|
|
|
+ () => props.list,
|
|
|
+ (newValue, oldValue) => {
|
|
|
+ if (newValue) {
|
|
|
+ baseList.value = newValue;
|
|
|
+ }
|
|
|
}
|
|
|
-})
|
|
|
+);
|
|
|
|
|
|
-watch(()=>props.active,(newValue,oldValue)=>{
|
|
|
- if(newValue){
|
|
|
- const index = props.list.findIndex(item =>item===newValue)
|
|
|
- if(index!==-1){
|
|
|
- active.value = index
|
|
|
- handleActive(newValue,index)
|
|
|
+watch(
|
|
|
+ () => props.active,
|
|
|
+ (newValue, oldValue) => {
|
|
|
+ if (newValue) {
|
|
|
+ const index = props.list.findIndex((item) => item === newValue);
|
|
|
+ if (index !== -1) {
|
|
|
+ activeVal.value = index;
|
|
|
+ handleActive(newValue, index);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-})
|
|
|
+);
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|