bug fix

src/components/common/Crumbs.vue

@@ -1,65 +1,71 @@
 <template>
-    <div class="container clearfix" :style="{'minWidth':minWidth?minWidth:'980px'}">
-        <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 class="container clearfix" :style="{'minWidth':minWidth?minWidth:'980px'}">
+    <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'],//minWidth-有些头部选项比较多，最小宽度需要调整
-    data: function () {
-      return {
-        isShowEllipsis: false  // 是否显示文字省略号
-      }
-    },
-    mounted(){
-      let titleText = this.$refs.title.innerHTML
-      if(titleText.length > 28) {
-        this.isShowEllipsis = true
-      }
-    },
-    methods:{
-      goBack(){
-        this.$router.push({
-          name:this.linkTo,
-          params:this.param
-        });
-      }
+export default {
+  name: 'crumbs',
+  props: ['title', 'linkTo', 'minWidth', 'param'], //minWidth-有些头部选项比较多，最小宽度需要调整
+  data: function() {
+    return {
+      isShowEllipsis: false // 是否显示文字省略号
+    };
+  },
+  mounted() {
+    let titleText = this.$refs.title.innerHTML;
+    // console.log(titleText.length,'titleText');
+    if (titleText.length > 19) {
+      this.isShowEllipsis = true;
+    }
+  },
+  methods: {
+    goBack() {
+      this.$router.push({
+        name: this.linkTo,
+        params: this.param
+      });
     }
   }
+};
 </script>
 
 <style lang="less" scoped>
-    @import "../../less/common.less";
+@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;
-    }
+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: 280px;
-        overflow: hidden;/*超出部分隐藏*/
-        white-space: nowrap;/*不换行*/
-        text-overflow:ellipsis;/*超出部分文字以...显示*/
-    }
+.return-btn {
+  margin: 11px 5px 0 0;
+  cursor: pointer;
+}
 
+h4 {
+  font-size: 15px;
+  width: 280px;
+  overflow: hidden; /*超出部分隐藏*/
+  white-space: nowrap; /*不换行*/
+  text-overflow: ellipsis; /*超出部分文字以...显示*/
+}
 </style>