项目开发过程中遇到的问题及常见bug代码

写在前面的话

本文属于总结类，代码项可能比较low，不喜勿喷，大神跳过

---

css常用样式总结（scss）

.f_right{
  float: right;
}
.f_left{
  float: left;
}
.t_right{
  text-align: right;
}
.basic-margin-top {
  margin-top: 16px;
}
.center{
  margin: 0 auto;
}
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.text_ellipsis{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  &:hover{
    content: attr(data-title);
  }
}

常见问题1（flex布局，内容居中）

布局方向因为有默认值容易忽略的一个属性，容易因为样式冲突，导致布局错位，还有布局名字最好起一些见明知意的同时又有点特殊，不容易引起样式冲突的。

flex: 261px 0 0; 宽度固定261px不进行缩放，右侧内容按页面大小进行缩放
left样式在适用性应注意左侧菜单过长，右侧内容果断，导致左侧内容滑动到位置，右侧内容不可见的问题，应设置最大高度，以及宽高滚动条

  .flex-box {
    display flex;
    justify-content: space-between;
    align-items: center;
    height: calc(100vh - 153px ); 
    flex-direction: row !important; 
    & .left{
      background: #FFF;
      border-radius: 8px;
      width: 261px;
      margin-right: 16px;
      flex: 261px 0 0;
      height: 100%;
      padding: 24px;
	}
  & .right{
      background: #FFF;
      border-radius: 8px;
      height: 100%;
      width: calc(100% - 261px);
      padding: 24px;
      overflow-y: scroll;
	}	
 }

---

常见问题2（左侧树，文本内容过多, iview版本）

补充～：如果是element-ui版本的话，text_ellipsis 得是全局的，不能加scoped
左侧树代码：
样式问题注意1: 超出宽度显示省略号。2，鼠标滑动上去显示完整标题 需要设置methods中的方法，以及添加以下样式

 <Tree :data="nodeTree"  class="demo-tree-render" :render="renderContent" ref="tree" @on-select-change="getFileListByNode"></Tree> 

   methods: {
          renderContent(h, { root, node, data }) {
            return h(
                "span",
                {
                  style: {
                    display: "inline-block",
                    width: "100%",
                  },
                  class: ['text_ellipsis'],
                  attrs: {
                    title: data.title
                  }
                },data.title
            );
          },
  }

      & .demo-tree-render{
        ::v-deep .ivu-tree-title{
          width: 100%;
        }
      }

常见问题3（下载文件乱码问题）

`需要对文件名添加decode解码，或者encodeURIComponent(filename)编码

下载文件代码如下：

	npm install downloadjs --save
    import download from 'downloadjs'
            /**
             * @desc 打印功能
             * */
            async printFileById (fileInfo) {
                await this.abHttpUtil.get('/docmgt/version/downloadFile?fileId=' + fileInfo.fileId, {
                    responseType: 'blob' }).then(res => {
                        if (res) {
                            let lastFileName = fileInfo.fileName.split(".")[1].toLocaleLowerCase();
                            let type = "";
                            if(lastFileName === 'pdf') {
                              type = 'application/pdf';
                            } else if(lastFileName === "doc"){
                              type = 'application/msword';
                            } else if(lastFileName === "docx") {
                              type = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
                            }
                            this.pdfUrl = window.URL.createObjectURL(
                                new Blob([res], { type: type })
                            );
                            var date = new Date().getTime();
                            var ifr = document.createElement('iframe');
                            ifr.style.frameborder = 'no';
                            ifr.style.display = 'none';
                            ifr.style.pageBreakBefore = 'always';
                            ifr.setAttribute('id', 'printPdf' + date);
                            ifr.setAttribute('name', 'printPdf' + date);
                            ifr.src = this.pdfUrl;
                            document.body.appendChild(ifr);
                            this.doPrint('printPdf' + date); //此方法为打印pdf方法，只是下载可不用
                            window.URL.revokeObjectURL(ifr.src); // 释放URL 对象
                        } else if (!res.isOk) {
                            this.$Message.error('下载失败！');
                        }
                    })
            },
            // 打印pdf
            doPrint (val) {
                var ordonnance = document.getElementById(val).contentWindow;
                setTimeout(() => {
                    ordonnance.print();
                    this.pdfLoading = false;
                }, 100);
            },