在Vue中，您希望如何向此tabbox组件添加样式并删除添加到其他tabbox组件的样式？

Question

在Vue中，当我想单击组件以向此组件添加样式并清除之前在其他选项卡组件上单击的其他样式时，我该怎么办？提前谢谢！

这是子组件的代码

<template>
   <div :class="tabStyle" :style="boxstyle"     @click="tabClick(name)">
     {{name}}
     <div class="selected-icon" v-show="isSelected"></div> <!--selected styles-->
     <div class="tick" v-show="isSelected"></div>   <!--selected styles-->
   </div>
</template>

<script>
  export default {
  name: "tabbox",
  props: {
    name: {
      type: String,
      default: ""
    },
    boxstyle: {
     type: Object,
     defalult: {}
   }
 },
data() {
    return {
      isSelected: false,
      tabStyle: {
        "selected-box": false,
        "unselected-box": true
      }
    };
},
methods: {
    tabClick(name) {
      this.isSelected = true;         
      this.borderChange("selected-box","unselected-box")//style add
      this.$emit("getTabName", name);
    },
    borderChange(first, second) {
      this.tabStyle[first] = true;
      this.tabStyle[second] = false;
    }
  }
};
</script>


 <style lang="scss" scoped>
.tab-box {
  display: inline-block;
  position: relative;
  text-align: center;
  padding: 1%;
  font-size: 1rem;
  width: 20%;
}
.unselected-box {
  border: solid 1px #b9a7a76b;
  @extend .tab-box;
}
.selected-box {
  border: solid 1px #5ddb14;
  @extend .tab-box;
}
.selected-icon {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-color: #5ddb14 transparent;
  border-width: 0 0 20px 25px;
  border-style: solid;
}

.tick {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #fff;
  &::after {
    content: "✓";
  }
}
</style>

这是父组件的代码

<template>
    <div class="select-tab" :style="tabStyle">
        <Header></Header>


        <div class="label-content" v-for="(item,index) in categories" :key="index">
            <meaning-label :name="item.name"></meaning-label>
            <div class="box-content">
                <TabBox @getTabName="getTabName" :name="_item.name" :boxstyle="styles" v-for="(_item,_index) in item.categoryList" :key="_index">
                </TabBox>

            </div>
        </div>

    </div>
</template>

<script>
import TabBox from "@/components/FindMusic/SelectTab/TabBox";
import MeaningLabel from "@/components/FindMusic/SelectTab/MeaningLabel";
import Header from "@/components/FindMusic/SelectTab/Header";
export default {
  components: {
    TabBox,
    MeaningLabel,
    Header
  },
  methods: {},
  data() {
    return {
      styles: {
        width: ""
      },
      allStyles: {
        width: "94%",
        margin: "2px 1.5%"
      },
      _categories: {}
    };
  },
  mounted() {
    this.categories = this.$store.state.CategoriesInfo.categories;
  },
  props: {
    tabStyle: {
      type: Object,
      default: {}
    },
    categories: {
      type:Array,
      default: []
    }
  },
  methods: {       
    getTabName(name){
      this.$emit('getTabName',name)
    }
  }
};
</script>

<style lang="scss" scoped>
.box-content {
  display: inline-block;
  vertical-align: top;
  width: 75%;
  font-size: 0;
}
.label-content {
  margin-top: 10px;
}
</style>

只需将样式保留在标签上我立即点击并删除我之前点击的样式。

Answer 1

一种可能的解决方案是从Vue方法中获取boxstyle：

<template>
    <div class="select-tab" :style="tabStyle">
        <Header></Header>


        <div class="label-content" v-for="(item,index) in categories" :key="index">
            <meaning-label :name="item.name"></meaning-label>
            <div class="box-content">
                <TabBox @getTabName="getTabName" :name="_item.name" :boxstyle="getTableStyle(_item.name)" v-for="(_item,_index) in item.categoryList" :key="_index">
                </TabBox>

            </div>
        </div>

    </div>
</template>

<script>
import TabBox from "@/components/FindMusic/SelectTab/TabBox";
import MeaningLabel from "@/components/FindMusic/SelectTab/MeaningLabel";
import Header from "@/components/FindMusic/SelectTab/Header";
export default {
  components: {
    TabBox,
    MeaningLabel,
    Header
  },
  methods: {},
  data() {
    return {
      styles: {
        width: ""
      },
      allStyles: {
        width: "94%",
        margin: "2px 1.5%"
      },
      _categories: {},
      activeTabName: ''
    };
  },
  mounted() {
    this.categories = this.$store.state.CategoriesInfo.categories; 
    // you might want to set default activeTabName here or in Vue's watch
  },
  props: {
    tabStyle: {
      type: Object,
      default: {}
    },
    categories: {
      type:Array,
      default: []
    }
  },
  methods: {       
    getTabName(name){
      this.$emit('getTabName',name)
      this.activeTabName = name
    },
    getTableStyle (name) {
      if (name === this.activeTabName) {
        return this.allStyles
      }
      return {}
    }
  }
};
</script>

<style lang="scss" scoped>
.box-content {
  display: inline-block;
  vertical-align: top;
  width: 75%;
  font-size: 0;
}
.label-content {
  margin-top: 10px;
}
</style>