vue封装标题组件

代码

titleLine.vue

<template>
  <div :class="classes" :style="style">
    <div class="title-content">
      <span></span>
      <span>{{message}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "titleLine",
  props: {
    message: {
      type: String,
      required: true
    },
    borderPosition: {
      // 'top', 'bottom'
      type: String
    },
    topGap: {
      type: Number,
      default: 0
    },
    bottomGap: {
      type: Number,
      default: 0
    }
  },
  computed: {
    classes: function() {
      return [
        "title-line",
        {
          ["border_position_" + this.borderPosition]: this.borderPosition !== ""
        }
      ];
    },
    style () {
      return {        
        paddingTop: this.topGap + 'px',
        paddingBottom: this.bottomGap + 'px'
      };
    }
  }
};
</script>

<style lang="less" scoped>
.title-line {
  // 默认的属性  
}
.title-content {
  font-size: 14px;
  span {
    display: inline-block;
    vertical-align: middle;
  }
  span:first-of-type {
    width: 2px;
    height: 14px;
    background-color: #ff7d41;
    margin-right: 8px;
  }
}
.border_position_top {
  border-top: 1px solid #e9e9e9;
}
.border_position_bottom {
  border-bottom: 1px solid #e9e9e9;
}
</style>

使用
标题必传，上划线或下划线可选，上划线和下划线垂直距离可选

<title-line message="标题" borderPosition="top" :topGap="20"></title-line>

网站导航

网站导航