vue和style样式改变

Question

问题描述：vue+stylus开发中，如何根据计算出的class来写具体的样式？
代码如下，
子组件：

<template>
  <div class="it-alert" :class="[ typeClass ]" v-show="visiable">
    <i class="it-alert_icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
    <div class="it-alert_content">
      <span class="it-alert_title" :class="[ isBoldTitle ]" v-if="title">{{title}}</span>
      <p class="it-alert_description">{{description}}</p>
    </div>

    <i class="close"></i>
  </div>

</template>

<script type="text/ecmascript-6">

  const TYPE_CLASSES_MAP = {
    "success" : "icon-check_circle",
    "warning" : "icon-info",
    "error" : "icon-close"
  };

  export default {
    data () {
      return {
        visiable : true
      };
    },
    props : {
      title : {
        type : String,
        default : ""
      },
      description : {
        type : String,
        default : "aaaaa"
      },
      type : {
        type : String,
        default : "info"
      },
      closable : {
        type : Boolean,
        default : true
      },
      closeText : {
        type : String,
        defalut : ""
      },
      showIcon : {
        type : Boolean,
        defalut : false
      }
    },
    computed : {
      typeClass () {
        return `it-alert--${this.type}`;
      },
      iconClass () {
        return TYPE_CLASSES_MAP[this.type] || "it-icon-information";
      },
      isBigIcon () {
        return this.description ? "is-big" : "";
      },
      isBoldTitle () {
        return this.description ? "is-bold" : "";
      }
    }
  };

</script>

<style lang="stylus" rel="stylesheet/stylus">
  .it-alert
    border-radius : 4px
    box-sizing : border-box
    color : #fff
    display : table
    opcaty : 1
    overflow : hidden
    padding : 8px 16px
    position : relative
    transition: opacity 0.2s ease 0s;
    width : 100%
  .it-alert--success
    background : #13ce66
  .it-alert--info
    background : #50bfff
  .it-alert--warning
    background : #f7ba2a
  .it-alert--error
    background : #ff4949
    &.is-big
      font-size : 28px
      weight : 28px
    .it-alert_icon
      color : #fff
      display : table-cell
      font-size :16px
      vertical-align : middle
      width : 20px
    .it-alert_content
      display : table-cell
      padding : 0 8px
      .it-alert_title
        font-size :13px
        line-height : 18px
        &.is-bold
          font-weight : 700
    .it-alert_description
      color : #fff
      font-size: 12px
      margin: 5px 0 0
</style>

父组件：

<template>
  <div class="example">
    <div class="example-demo">
      <alert type="error" title="成功提示的例子title" description="文字说明文字说明文字说明文字说明文字说明文字说明" is-big is-bold show-icon>===</alert>
      <alert type="success" title="成功提示的例子title" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>===</alert>
    </div>
    <div class="example-split"></div>
    <div class="example-code"></div>

  </div>
</template>

根据父组件传入的值的不同，样式层级发生改变了，导致效果不一致。

想实现的效果是绿色部分的文字也全部是白色的。

Answer 1

为什么你的样式书写的这么凌乱…… 看的眼晕。
看你的html结构it-alert_description不会受type的影响的。
你先把css部分书写规范起来……
然后借助审查元素去排查下样式的问题，最后把审查元素的截图贴出来