platformFront/src/components/common/Crumbs.vue

<template>
  <div class="container clearfix" :style="{'minWidth':minWidth?minWidth:'980px',position:fix?fix:'absolute'}">
    <img
      v-if="linkTo"
      class="return-btn fl"
      src="../../images/return.png"
      alt="返回按钮"
      @click="goBack"
    />
    <h4 class="fl" :title="isShowEllipsis ? title : ''" ref="title">{{title}}</h4>
    <div class="contents fr">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'crumbs',
  props: ['title', 'linkTo', 'minWidth', 'param','fix'], //minWidth-有些头部选项比较多，最小宽度需要调整
  data: function() {
    return {
      isShowEllipsis: false // 是否显示文字省略号
    };
  },
  mounted() {
    setTimeout(() => {
      let titleText = this.$refs.title.innerText;
      if (titleText.length > 19) {
        this.isShowEllipsis = true;
      }
    }, 200);
    // console.log(this.isShowEllipsis,'isShowEllipsis');
  },
  methods: {
    goBack() {
      this.$router.push({
        name: this.linkTo,
        params: this.param
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import '../../less/common.less';

div.container {
  width: calc(100% - 50px);
  height: 40px;
  background: #fff;
  padding: 0 20px 0 30px;
  margin-bottom: 20px;
  line-height: 40px;
  position: absolute;
  z-index: 5;
  // min-width: 980px;
}

.return-btn {
  margin: 11px 5px 0 0;
  cursor: pointer;
}

h4 {
  font-size: 15px;
  width: auto;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*超出部分文字以...显示*/
}
</style>