写在前面的话
本文属于总结类,代码项可能比较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);
},