图片放大懒加载
html
<div class="figureGroup" id="imgId" style="display: flex;flex-flow: row wrap;margin-top: 20px">
<div v-for="(draws,index) in pd.drawsPic" style="display: flex;flex-direction: column;justify-content: center;align-items: center">
<img style="width: auto;height: auto;max-height: 100px;" class="figure"
:src="getImgUrl(draws)" alt="">
<label style="width:180px;height:20px;text-align:center;display:block">图{{index + 1}}</label>
</div>
</div>
js
if(vm.drawsList1!=null&&vm.drawsList1!='undefined'&&vm.drawsList1!=''&&vm.drawsList1.length>0){
const ViewerDom1 = document.getElementById('imgId');
const viewer1 = new Viewer(ViewerDom1, {
url: "data-original"
});
}
方法
//拼接图片地址
getImgUrl(imgname){
return imgname;
},
全选1+反选
<el-checkbox-group v-model="checkboxGroup1">
<el-checkbox-button v-for="option in options" :label="option" :key="option">{{option}}</el-checkbox-button>
</el-checkbox-group>
<el-checkbox v-model="selectAll" @change="handleCheckAllChange1()">全选</el-checkbox>
<el-checkbox v-model="invert1" @change="handleInvertCheckChange1()">反选</el-checkbox>
const genOptions = ['姓名','性别','年龄'];
//全选
handleCheckAllChange1() {
this.checkboxGroup1 = this.selectAll ? genOptions:[];
this.invert1 = false;
},
//反选
handleInvertCheckChange1() {
let cities = genOptions;
let checkedCities = this.checkboxGroup1;
if (checkedCities.length === 0) {
this.checkboxGroup1 = this.invert1 ? genOptions : [];
} else if (checkedCities.length === cities.length) {
this.checkboxGroup1 = [];
this.selectAll = false;
} else {
let list = cities.concat(checkedCities).filter((v, i, array) => {
return array.indexOf(v) === array.lastIndexOf(v);
});
this.checkboxGroup1 = list;
}
},
全选2
<el-checkbox v-model="allGeo" @change="clickAll">全选</el-checkbox>
<ul>
<li v-for="(data,index) in varList">
<el-checkbox v-model="singleGeo" :label="data">
<p>111</p>
</el-checkbox>
</li>
</ul>
clickAll() {
this.singleGeo = [];
if (this.allGeo){
for (let i = 0; i <vm.varList.length ; i++) {
this.singleGeo.push(vm.varList[i])
}
}
},
vue分页,后端只需要返回总数
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page.currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size.sync="page.showCount"
layout="total, sizes, prev, pager, next, jumper"
:total=page.totalResult>
</el-pagination>
handleSize:10,
indexSize:1,
handleSizeChange(val) {
this.handleSize = val;
this.goSearch();
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) { //下一页序号,页码*数量
this.page.currentPage= val;
this.indexSize= (val-1)*this.handleSize+1;
this.goSearch();
console.log(`当前页: ${val}`);
},
ajax 跳转页面 传递参数过大
转为post传到后端,存到数据库或redis, 跳转页面携带id,新页面再取出
原生ajax,下载导出文档
downLoadExcelGen1() {
let excelContent = this.checkboxGroup1.join(',');
let data = {};
data = {
excelContent:excelContent,
exp:expContent,
numStart:this.numStart,
numEnd:this.numEnd,
tm:new Date().getTime()
}
var xhr = new XMLHttpRequest()
xhr.withCredentials = true
xhr.responseType = 'arraybuffer';
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
// const blob = this.response;
let blob = new Blob([xhr.response])
const reader = new FileReader();
reader.readAsDataURL(blob); // 转换为base64,可以直接放入a表情href
reader.onload = function (e) {
const a = document.createElement('a');
a.download = '地标信息.xls';
a.href = e.target.result;
document.documentElement.appendChild(a);
a.click();
a.remove(); // 等价于document.documentElement.removeChild(a);
}
} else {
// console.log(xhr.response)
setPop3("登录失效!", "请求服务器无响应,稍后再试", "warning");
}
}
}
xhr.open('POST', httpurl + 'landmark/downLoadExcelGen1')
xhr.setRequestHeader("content-type", "application/json; charset=UTF-8")
xhr.send(JSON.stringify(data))
},
正则表达式
//替换书名号及内容
let aaa = "saddkasdas《dnsad/amsda.txt》ajsoidasdiaos";
let bbb = aaa.replace(/\《([^》《]*)\》/ig,"文档");
//身份证号码校验
var isIdentityNum = /^[1-8]{2}[0-9]{4}[0-9]{4}((0[1-9]{1})|(1[0-2]{1}))((0[1-9]{1})|(1[0-9]{1})|(2[0-9]{1})|(3[0-1]{1}))[0-9]{3}[0-9xX]{1}$/;
//手机号码校验
var myreg = /^1[3456789]\d{9}$/;