w-haiS
2021-08-13 19:29
采纳率: 100%
浏览 159
已结题

关于vue-cli4中具名插槽下样式设置的问题

今天用vue在写tabbar小组件。
首先有三个文件,tabbar,tabbarItem,mainTabbar
下面附三个文件的源码,
其中tabbar和tabbarItem是模板组件。mainTabbar是调用了这两个组件并向里面的插槽填充了数据

我的意图:
比如tabbarItem里面有个slot,在mainTabbar中使用了这个组件,并且用<img/>控件替换该插槽,我该如何为img标签设置css样式
之前cli2下的设置样式如图所示,但是我现在用的vue-cli3,现在这种设置不管用,不知道该如何设置了

tabbar.vue

<template>
  <div id="tab-bar">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "TabBar",
  components:{
  }
}
</script>

<style scoped>

  #tab-bar{
    display: flex;
    background-color: #F6F6F6;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 -1px 1px rgba(100,100,100,0.1);
  }
</style>

tabbarItem.vue

<template>
  <div class="tab-bar-item" @click="itemClick">
    <div v-if="!isActive">
      <slot name="item-icon">图片</slot>
    </div>
    <div v-else>
      <slot name="item-icon-active">图片</slot>
    </div>
    <div :style="activeStyle">
      <slot name="item-text">文字</slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "TabBarItem",
  props:{
    path: String,
    activeColor:{
      type:String,
      default: '#cccccc'
    }
  },
  data(){
    return {
      // isActive:false,
    }
  },
  computed:{
    isActive(){
      return this.$route.path.indexOf(this.path) !== -1
    },
    activeStyle(){
      return this.isActive?{color:this.activeColor}:{color: '#cccccc'}
    }
  },
  methods:{
    itemClick(){
      this.$router.replace(this.path).catch(err=>err)
    }
  }
}
</script>

<style scoped>
  .tab-bar-item{
    flex: 1;
    text-align: center;
    height: 49px;
    font-size: 14px;
    /*border: 1px solid red;*/
  }
 .tab-bar-item img{
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-bottom: 2px;
  }
</style>

mainTabBar.vue

<template>
  <tab-bar>
    <tab-bar-item path="/home" activeColor="blue">
      <template v-slot:item-icon>
        <img src="~assets/img/tabbar/home.svg" alt="">
      </template>
      <template v-slot:item-icon-active>
        <img src="~assets/img/tabbar/home_active.svg" alt="">
      </template>
      <template v-slot:item-text>
        <div>首页</div>
      </template>
    </tab-bar-item>
    <tab-bar-item path="/category" activeColor="red">
      <template v-slot:item-icon>
        <img src="~assets/img/tabbar/category.svg" alt="">
      </template>
      <template v-slot:item-icon-active>
        <img src="~assets/img/tabbar/category_active.svg" alt="">
      </template>
      <template v-slot:item-text>
        <div>分类</div>
      </template>
    </tab-bar-item>
    <tab-bar-item path="/cart" activeColor="green">
      <template v-slot:item-icon>
        <img src="~assets/img/tabbar/shopcart.svg" alt="">
      </template>
      <template v-slot:item-icon-active>
        <img src="~assets/img/tabbar/shopcart_active.svg" alt="">
      </template>
      <template v-slot:item-text>
        <div>购物车</div>
      </template>
    </tab-bar-item>
    <tab-bar-item path="/profile" activeColor="deepPink">
      <template v-slot:item-icon>
        <img src="~assets/img/tabbar/profile.svg" alt="">
      </template>
      <template v-slot:item-icon-active>
        <img src="~assets/img/tabbar/profile_active.svg" alt="">
      </template>
      <template v-slot:item-text>
        <div>我的</div>
      </template>
    </tab-bar-item>
  </tab-bar>
</template>

<script>

import TabBar from "components/common/tabbar/TabBar";
import TabBarItem from "components/common/tabbar/TabBarItem";

export default {
  name: "MainTabBar",
  components:{
    TabBar,
    TabBarItem
  }
}
</script>

<style scoped>
</style>
  • 好问题 提建议
  • 收藏

3条回答 默认 最新

  • w-haiS 2021-09-15 15:11
    已采纳

    我用的是一个比较笨的办法解决的,将img的样式写在mainTabBar的style标签中,因为是在mainTabBar中向插槽中放入了img标签,所以再mainTabBar.vue中肯定是能找到img标签的,这个虽然解决了需求,但并不是期望的做法,如果有好的方法还请指教,谢谢

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • 查看更多回答(2条)

相关推荐 更多相似问题