1、引入less less-loader运行后报错：
原因：less less-loader 版本太高，与 webpack 不匹配
方法一：降低less-loader版本
npm uninstall less-loader
# npm install less@3.9.0 less-loader@5.0.0 -s
npm install less-loader@5.0.0
方法二：在 package.json 文件中将 less less-loader 的版本手动降低，然后运行 yarn install 命令或 npm install 命令
2、less文件中引入图片做背景图报错：
原因：图片路径解析不正确
方法： 将以下代码:
background-image: url('@/assets/images/login.png');
改为
background-image: url('~@/assets/images/login.png');
3、Vue-cli 中为单独页面设置背景图片铺满全屏的方法
让#logo脱离文档流，为他添加个fixed属性
<template>
<div id="logo">
</div>
</template>
<script>
import meadiaurl from '../../api/mediaurl'
export default {
name: "logo"
</script>
<style scoped>
#logo{
background: url("../../assets/images/Login.png");
background-size: 100% 100%;
height: 100%;
position: fixed;
width: 100%
}
</style>
4、Vue中H5实现左右滑动
<div @touchstart="moveStart" @touchmove="onMove" @touchend="moveEnd"></div>
data(){
return {
startX: 0, // 触摸起始x
startY: 0, // 触摸起始y
endX: 0, // 触摸结束x
endY: 0, // 触摸结束y
canMove: true, // 是否可以继续滑动
index: 0 // 控制滑动下标
}
}
methods(){
moveStart(e) {
this.startX = e.targetTouches[0].pageX
this.startY = e.targetTouches[0].pageY
},
onMove(e) {
this.endX = e.targetTouches[0].pageX
this.endY = e.targetTouches[0].pageY
const dValueX = Math.abs(this.startX - this.endX)
const dValueY = Math.abs(this.startY - this.endY)
if (dValueX > dValueY) {
// 水平滑动长度大于纵向滑动长度，那么选择水平滑动，阻止浏览器默认左右滑动事件
e.preventDefault()
if (dValueX > 40 && this.startX > this.endX) {
// 向左划
if (this.index < this.list.length - 1 && this.canMove) {
this.canMove = false
this.index += 1
}
} else if (dValueX > 40 && this.index > 0 && this.canMove) {
this.canMove = false
this.index -= 1
}
} else {
// 恢复默认事件
window.event.returnValue = true
}
},
moveEnd(e) {
this.canMove = true
this.startX = this.endX = 0
this.startY = this.endY = 0
},
}
5、h5+vue页面下滑查看更多 页面触底+页面滑动
（1）、解决方法1 超过一屏监听滚动 触底触发 小于或等于一屏监听触摸 上滑触发
data() {
return {
startY: 0,
endY: 0,
Fullscreen: true
};
},
（2）、添加触摸事件
<div @touchstart="touchstart()" @touchend="touchend()"></div>
//事件
touchstart() {
if (!this.Fullscreen) {
return; //判断 可视化的高度与溢出的距离 是否大于一屏 Fullscreen满屏
}
event.preventDefault(); //阻止默认事件（长按的时候出现复制）
this.startY = event.changedTouches[0].pageY;
console.log(this.startY);
},
touchend() {
if (!this.Fullscreen) {
return;
}
event.preventDefault();
this.endY = event.changedTouches[0].pageY;
if (this.startY - this.endY > 200) {
console.log(this.endY);
console.log(this.startY);
//达到条件触发事件
this.onscroll();
}
},
(3)、监听页面滚动
mounted() {
window.addEventListener("scroll", this.getScroll);
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //变量windowHeight是 可视区的高度
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; //变量scrollHeight是 滚动条的总高度 /可视化的高度与溢出的距离（总高度）
if (windowHeight < scrollHeight) {
this.Fullscreen = false;//是否满屏
}
},
destroyed() {
window.removeEventListener("scroll", this.getScroll);
},
//监听滚动
getScroll() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //变量scrollTop是滚动条滚动时，距离顶部的距离
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //变量windowHeight是 可视区的高度
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; //变量scrollHeight是 滚动条的总高度 /可视化的高度与溢出的距离（总高度）
console.log(scrollTop, windowHeight, scrollHeight);
//滚动条到底部的条件
if (scrollTop + windowHeight >= scrollHeight) {
//触发事件
}
}
6、获取div内容宽度、高度
//注意获取宽度、高度的元素不能采用flex布局，否则获取不到真是的宽度、高度值
let width = this.$refs.tab.clientWidth
let height = this.$refs.tab.offsetHeight
7、margin-top设置百分比
margin-top设置百分比时，所占比例是按照所占 父元素宽度 的百分比，而不是高度
8、css自定义虚线样式
.volumeLine{
position: relative;
width: 100%;
height: 3px;
background-image: linear-gradient(to right, #7D6C69 0%, #7D6C69 50%, transparent 50%);
background-size: 20px 3px;
background-repeat: repeat-x;
}
9、Vue中使用西瓜player
https://v2.h5player.bytedance.com/gettingStarted/#%E5%AE%89%E8%A3%85
（1）、首先安装 xgplayer
//安装xgplayer 视频播放器
cnpm install xgplayer -D
cnpm install xgplayer-hls -D
cnpm install xgplayer-hls.js -D
//安装xgplayer 音频播放器
cnpm install xgplayer-music -D
（2）、在应用的.vue文件中引入视频、音频文件
//音频
import 'xgplayer';
import Music from 'xgplayer-music';
//视频
import 'xgplayer';
import HlsJsPlayer from 'xgplayer-hls.js'
import Player from 'xgplayer'
import { play, fullscreen, progress } from 'xgplayer/dist/controls';
（3）、在data中添加player字段、并在方法中渲染
export default {
name: 'readVideo',
data(){
return {
player:'',
}
},
mounted(){
this.getDetail()
},
methods:{
//渲染视频、音频
getDetail(){
//渲染视频
this.player = new HlsJsPlayer( { //设置视频
id: 'videoPlaying',
useHls: true,
url: that.courseUrl+this.meltDetail.videoPath,
poster: res.data.data.cover ? that.coverUrl(res.data.data.cover) : that.courseUrl+res.data.data.imgPath,
playsinline: true,
width:'100%',
height:'100%',
})
//渲染音频
this.player = new Music({
id: 'audioPlaying',
url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/music/audio.mp3',
width: '100%',
height: '12%',
volumeShow:true,
})
}，
//返回或跳转到其他页面，将本页面的player数据删除
meltBacking(){
let isDelDom = true
this.player.destroy(isDelDom)
this.$router.go(-1);
},
meltHome(){
let isDelDom = true
this.player.destroy(isDelDom)
this.$router.push({ path:'/' })
}
}
}
（4）、修改默认样式
/*音频、视频默认样式修改*/
.videoPlay,
.meltVideo{
.xgplayer-skin-default .xgplayer-progress-played{
background-image: linear-gradient(-90deg,#F8A00D,#F8A00D);
}
.xgplayer-skin-default .xgplayer-drag{
background: #F8A00D!important;
}
}
.audioPlay,
.meltAudio{
.xgplayer-cover,.xgplayer-name,.xgplayer-backward,.xgplayer-forward,
.xgplayer-next,.xgplayer-prev,.xgplayer-icon-play svg,.xgplayer-icon svg{ //隐藏上一曲下一曲以及播放图标
display: none;
}
.xgplayer-skin-default, .xgplayer-skin-default .xgplayer-controls{//整体背景
background: #36181A!important;
border-radius: 0 !important;
border: none;
}
.xgplayer-skin-default.xgplayer-music .xgplayer-controls .xgplayer-progress{//播放条
top: 48%;
}
.xgplayer-skin-default.xgplayer-music .xgplayer-controls .xgplayer-time{//时间
top: 30%;
right: 20px;
margin-left: 60px;
}
.xgplayer-skin-default .xgplayer-progress-outer{//进度条
background: #C2B7AD !important;
}
.xgplayer-skin-default .xgplayer-progress-played{//进度条
background: #F8A00D !important;
}
.xgplayer-skin-default.xgplayer-music .xgplayer-controls .xgplayer-play,
.xgplayer-skin-default.xgplayer-music .xgplayer-controls .xgplayer-play-img{
margin-left: 20px;
margin-top: 2px;
}
.svgcommon(@width,@height){
width: @width !important;
height: @height !important;
background:url('~@/assets/img/article/icon-play.png') no-repeat center;
background-size: 100% 100%;
margin-top: 2px;
}
.xgplayer-skin-default.xgplayer-music .xgplayer-controls .xgplayer-icon{ /* 播放按钮位置 */
padding-top: 2px;
}
.xgplayer-icon-play{/* 播放 */
.svgcommon(20px,28px);
background:url('~@/assets/img/article/icon-play.png') no-repeat center;
}
.xgplayer-icon-pause{/* 暂停 */
.svgcommon(28px,28px);
background:url('~@/assets/img/article/icon-pause.png') no-repeat center;
}
.xgplayer-icon-large,.xgplayer-icon-small,.xgplayer-icon-muted{/* 音量 */
.svgcommon(26px,24px);
background:url('~@/assets/img/article/icon-shengyin.png') no-repeat center;
}
.xgplayer-skin-default .xgplayer-drag{
background: #F8A00D;
}
.xgplayer-skin-default.xgplayer-music .xgplayer-controls .xgplayer-volume{
order: 10;
margin-right: 40px;
margin-top: -4px;
}
.xgplayer-skin-default .xgplayer-time span{
color: #fff !important;
}
}
（5）、具体播放参数，参照官网修改即可
10、vue项目：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
问题：
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/operate/examinationScore".
解决办法：
项目中安装：npm i vue-router@3.0 -S
在main.js中输入：
import Router from 'vue-router'
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
11、页面中input标签添加.native修饰符报错
The .native modifier for v-on is only valid on components but it was used on
事件的native修饰符只能在组件上使用，原生的html标签是不能使用的，这是因为我在input标签使用了native修饰符。
12、Vue中将毫秒转换成时分秒格式
filters:{
realFormatsecond(second) {
let secondType = typeof second
if (secondType ==='number' || secondType ==='string'){
second = parseInt(second/1000)
let hours =Math.floor (second / 3600)
second = second - hours *3600
let mimute =Math.floor(second /60)
second = second- mimute *60
return hours +':'+ ('0' + mimute).slice(-2) +':'+ ('0' + second).slice(-2)
} else{
return '0:00:00'
}
}
},
13、flex布局 justify-content：space-between; 布局问题
（1）、原本按照正常排序对齐，左后一排缺少元素，两边对齐了
解决方案：使用after伪类,解决最后一排数量不够两端分布的情况。宽度就是每张图片的宽度
.list{
width:100%;
height:500px;
display:flex;
justify-content:space-between;
}
.list:after {
content: "";
width: 1.87rem;
}
（2）、flex布局的元素会有默认间隙（垂直间隙）
解决方案：使用 align-content:flex-start 解决
.list {
width: 100%;
display: flex;
justify-content: space-between;
flex-flow: row wrap;
margin: 0 0.53rem;
padding-bottom: 0.67rem;
align-content: flex-start; // 解决flex布局的元素会有默认间隙（垂直间隙）
li {
img {
width: 1.87rem;
height: 1.87rem;
margin-top: 0.67rem;
}
}
}
.list:after {
content: "";
width: 1.87rem;
}
}
14、vue项目布局问题
（1）、首先依据设计图，拆分模块，找出哪些是公用的，哪些是可以单独写在页面中的，然后依据结构布局，划分组件
（2）、最开始布局设计图时，可以依据规划好的组件结构，虚构一些假数据，研究好数据和样式如何布局
（3）、虚构好数据就可以先布局页面了，之后再请求接口，渲染真实数据，前期工作一定要规划好
15、前端页面高亮显示
<template>
<div class="commonComponentStyle">
<div class="rcMessage">
<div class="rc-search">
<div class="rc-search-content">
<input type="text" v-model="searchVal" @keyup.enter="searchLight" @input="searchLight">
<div class="lookFor">
<img src="@/assets/img/article/search.png" alt="搜索" @click="searchLight">
</div>
</div>
</div>
</div>
<div class="articleDetail" ref="articleDetailSize" v-html="articleDetail.text" v-if="isText"></div>
<div class="articleDetail" ref="articleDetailSize" v-html="articleHighDetail.text" v-if="!isText"></div>
</div>
</template>
<script>
import { articleDetailAPI } from '@/api/home/index'
export default {
props:['articleDetail'],
data(){
return {
searchVal:null,
articleHighDetail:{},
isText:true,
}
},
methods:{
delHtmlTag(str){
if(str){
return str.replace(/<[^>]+>/g,"");
}
},
addHtmlTag(str){
if(str){
return str.replace(/\n/g,"<p class='content'>");
}
},
searchLight(){
if(this.searchVal&&this.searchVal.trim()){
this.isText = false
this.articleHighDetail = JSON.parse(JSON.stringify(this.articleDetail));
this.changeTxtContent(this.searchVal)
this.$nextTick(()=>{
document.getElementById("maodian").scrollIntoView();
})
}else{
this.isText = true
}
},
changeTxtContent(obj){
var str = this.articleHighDetail.text;
let start = 0,end=0,current =1,str2,temp,pos;
end= pos = str.indexOf(obj);
let strlength = obj.length;
while(end > start){
if(str.charAt(end) == '<' ){
current = 1;
break;
};
if(str.charAt(end) == '>'){
temp = str.slice(pos);
temp = temp.replace(obj,"<span style='color:#f65e03;' id='maodian'>"+obj+"</span>")
console.log(temp)
str = str.slice(0,pos) + temp
current = strlength + 32
break;
}
current = 1;
end--;
}
while (pos !== -1) {
end = pos = str.indexOf(obj, pos + current);
while(end > start){
if(str.charAt(end) == '<' ){
current = 1;
break;
};
if(str.charAt(end) == '>'){
temp = str.slice(pos);
temp = temp.replace(obj,"<span style='color:#f65e03;'>"+obj+"</span>")
str = str.slice(0,pos) + temp
current = strlength + 32
break;
}
current = 1;
end--;
}
start = pos;
}
this.articleHighDetail.text = str
},
}
}
</script>
16、安装本地服务器http-server
（1）、全局安装
npm install http-server -g
pm i http-server
yarn -g http-server
(2)、运行服务
在dist打包文件运行 http-server
cmd中输入命令 http-server
17、滚动条样式兼容火狐、谷歌
//在添加overflow-y的类名上添加以下样式可修改滚动条默认样式
.dialog{overflow-y: auto; }
//兼容谷歌
.root .dialog::-webkit-scrollbar {
width: 5px;
border-radius: 8px;
}
/* 滚动条颜色 */
.root .dialog::-webkit-scrollbar-track {
background-color: #555;
}
.root .dialog::-webkit-scrollbar-thumb {
border-radius: 8px;
background: #333;
}
//兼容火狐、IE
.root .dialog {
scrollbar-width: thin;
scrollbar-color: #333 transparent;
}
18、删除IE浏览器文本框自带X号
input::-ms-clear, input::-ms-reveal{display: none !important;}
19、Vue中设置公共方法（在main.js文件中）
//截取字符串
Vue.prototype.substrFuc = function(string, length, text) {
return string
? string.length > length
? string.substr(0, length) + "..."
: string
: text
? "暂无"
: "";
};
//去除标签并截取字符串
Vue.prototype.delHtmlSubTag = function(string, length) {
if(string&&string.replace(/<[^>]+>/g,"")){
if(string.replace(/<[^>]+>/g,"").length > length){
return string.replace(/<[^>]+>/g,"").substr(0, length) + "..."
}else{
string.replace(/<[^>]+>/g,"")
}
}
};
//去除标签
Vue.prototype.delHtmlTag = function(string) {
if(string){
return string.replace(/<[^>]+>/g,"")
}
};
20、文章中的图片放大、缩小、翻转等功能
（1）、安装v-viewer依赖
cnpm install v-viewer -S
（2）、在mian.js中引入
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css';
Vue.config.productionTip = false
Vue.use(Viewer, {
defaultOptions: {
zIndex: 9999
}
});
（3）、在文章div中应用
<viewer :trigger="articleDetail.text">
<div :class="[articleDetail.affiliate?'articleDetail newArticleWidth':'articleDetail',currentClass]" ref="articleDetailSize" v-html="articleDetail.text" v-if="isText"></div>
</viewer>
21、IE兼容scrollTo()方法
在main.js中设置兼容方式
方法一：
if (!window.scrollTo) {
window.scrollTo = function(option) {
window.scrollLeft = option.left;
window.scrollTop = option.top;
};
}
if (!document.body.scrollTo) {
Element.prototype.scrollTo = function(option) {
this.scrollLeft = option.left;
this.scrollTop = option.top;
};
}
//方法二：直接使用
this.$refs.articleDetailSize.scrollTop = 0
然后使用this.$refs.articleDetailSize.scrollTo(0,0) 或者 window.scrollTo(0,0)即可
22、PC端自适应屏幕使用vw方法
（1）、安装npm install postcss-px-to-viewport -D
（2）、2.在package.json同级下新建文件vue.config.js,在vue.config.js中配置如下
module.exports={
css: {
extract: false,//false表示开发环境,true表示生成环境
sourceMap: false,
loaderOptions: {
postcss: {
plugins: [
require("postcss-px-to-viewport")({
unitToConvert: "px", // 需要转换的单位，默认为"px"
viewportWidth: 1920, // 视窗的宽度，对应pc设计稿的宽度，一般是1920
viewportHeight: 1080,// 视窗的高度，对应的是我们设计稿的高度,我做的是大屏监控,高度就是1080
unitPrecision: 3, // 单位转换后保留的精度
propList: [ // 能转化为vw的属性列表
"*"
],
viewportUnit: "vw", // 希望使用的视口单位
fontViewportUnit: "vw", // 字体使用的视口单位
selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
mediaQuery: false, // 媒体查询里的单位是否需要转换单位
replace: true, // 是否直接更换属性值，而不添加备用属性
exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
})
]
}
}
}
}
（3）、在css中将div等设置宽高px即可
23、如何替换接口返回数据中的img标签src路径
this.articleDetail.text = this.articleDetail.text.replace(
/src="/g,
`src="${process.env.VUE_APP_URL}`
);
if(this.articleDetail.cssPath) {
const oScript = document.createElement('link')
oScript.type = 'text/css'
oScript.rel = 'stylesheet'
oScript.href = this.courseUrl + this.articleDetail.cssPath
document.getElementById('ebook').appendChild(oScript)
}
24、PC端访问移动端页面，直接跳转移动端网址
<script type="text/javascript">
(function () {var sUserAgent = navigator.userAgent;if (sUserAgent.indexOf('Android') > -1 || sUserAgent.indexOf('iPhone') > -1 || sUserAgent.indexOf('iPad') > -1 || sUserAgent.indexOf('iPod') > -1 || sUserAgent.indexOf('Symbian') > -1) {location.href = 'http://test20.zhongdianyun.com/wap/#/';} else {}})();
</script>
25、解决火狐浏览器设置placeholder颜色偏浅的问题
只要是火狐浏览器自带opacity：0.4的原因
input::-webkit-input-placeholder,//chorme, safari
input:-moz-placeholder, //Firefox V18及以下
input::-moz-placeholder, //Firefox 19
input:-ms-input-placeholder { //IE 10
color #757575;
}
input:-moz-placeholder,
input::-moz-placeholder {
opacity: 1;
}
26、使用font-family是需要注意的问题
常用技巧：
1、现在网页中普遍使用14px+。
2、尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
3、各种字体之间必须使用英文状态下的逗号隔开。
4、***中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
5、如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
6、尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
27、基于vue项目的省市区三级联动
（1）、下载 distpicker依赖
npm install v-distpicker --save
或者
yarn add v-distpicker --save
（2）、应用
全局应用：
import VDistpicker from 'v-distpicker'
component('v-distpicker', VDistpicker)
局部应用：
import VDistpicker from 'v-distpicker'
export default {
components: { VDistpicker }
}
默认值应用：
<template>
<v-distpicker :province="select.province" :city="select.city" :area="select.area"></v-distpicker>
<template>
<script>
import VDistpicker from 'v-distpicker'
export default {
components: { VDistpicker },
data() {
return {
select: { province: '广东省', city: '广州市', area: '海珠区' },
}
},
}
</script>
28、Vue中在某页面添加自动播放的背景音乐
（1）、在.vue页面中书写html
<div class="bgAudioPlay">
<span class="bgPlayIcon" @click="playing">
<img src="@/assets/img/article/playing.png" alt="" v-if="musicTF" class="playingIconBtn">
<img src="@/assets/img/article/pause.png" alt="" v-if="!musicTF">
</span>
<audio src="http://43.243.138.202:81/2021/05/11/wohewodezuguo.mp3" class="media-audio" loop autoplay ref="MusicPlay"></audio>
</div>
（2）、在methods中添加方法
data(){
return {
musicTF: true,
}
}
methods:{
playing(){
this.musicTF = !this.musicTF;
if(this.musicTF){
this.$refs.MusicPlay.play();
}else{
this.$refs.MusicPlay.pause();
}
},
}
（3）、书写css样式
.bgAudioPlay{
width: 56px;
height: 56px;
display: inline-block;
position: absolute;
top: -10px;
right: 64px;
.bgPlayIcon{
width: 56px;
height: 56px;
display: inline-block;
background: #FFF8E5;
border: 2px solid #DEBB82;
border-radius: 50%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
.playingIconBtn{
animation: rotationName 2s linear infinite;
}
@keyframes rotationName {
0%{
transform: rotate(0deg);
}
50%{
transform: rotate(180deg);
}
100%{
transform: rotate(360deg);
}
}
}
}
29、阻止页面内容被复制的css
*{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
//将双书名号替换成单书名号
essay.chapterName.replace('《','〈').replace('》','〉')
30、vue中针对formDate形式的文件上传
<!--弹出框-->
<el-dialog :visible.sync="importStatus" width="800px" :title="importTitle">
<el-form class="batchCommit" ref="imgForm" :model="imgForm">
<div class="importTemplateBox">
<div class="uploadTemplate">
<p class="mainTip">1. 请先下载模板</p>
<p class="annotationTip">必须按照EXCEL模板要求录入考生信息。</p>
<p class="annotationTip">建议使用微软的2007或以上的Office版本编辑，不要使用WPS。</p>
<div class="downloadTemBtn">
<a class="templateBtn downloadBtn" :href="`${commonUrl}/template/考场申报导入表.xlsx`">下载EXCEL格式模板</a>
</div>
<p class="mainTip">2. 选择上传文件</p>
<el-form-item>
<span class="uploadContentBtn">
<input type="file" class="uploadFileInput" @change="fileSelect" ref="file" accept=".xls, .xlsx" />
<span class="templateBtn uploadBtn" style="background:#1F71FF;">选择文件并上传</span>
</span>
<span class="pdfTip" style="display:inline-block;margin-left:40px;">{{imgForm.name?imgForm.name:'未选择任何文件!'}}</span>
</el-form-item>
<div slot="footer" class="dialog-footer">
<el-button @click="importTemplateConfirm" :loading="confirmLoading">执行导入</el-button>
<el-button @click="importStatus = false">取消</el-button>
</div>
</div>
</div>
</el-form>
</el-dialog>
//方法：
importTemplate(){
this.importStatus = true
},
fileSelect() {
if (this.$refs.file.files[0]) {
let file = this.$refs.file.files[0];
this.imgForm.name = file.name
}
},
importTemplateConfirm(){
this.confirmLoading = true
let formData = new FormData();
formData.append("file", this.$refs.file.files[0]);
importExamAPI(formData).then((res) => {
if(res.data.code == 0){
this.$message.success('导入成功')
this.importStatus = false
this.confirmLoading = false
}else{
this.$message.error(res.data.msg)
}
})
},
31、Vue中只传相关参数的导出
//导出excel
<div class="reset_btn" @click="downLoadExcl">导出</div>
//一般是列表检索的参数：
import { requestPath } from "@/utils/global.js";
listQuery:{
pageNum: 1,
pageSize: 50,
organiId:null,
usageStatus:null,
nai:null,
},
downLoadExcl() {
let query=''
for(let i in this.listQuery){
i=='pageNum'||i=='pageSize'?false:query+="&"+i+"="+this.listQuery[i]
}
query=query.slice(1,(query.length))
confirm.apply(this, ["确定要导出吗?"]).then(() => {
window.open(`${process.env.VUE_APP_URL}${requestPath.resource}/maintain/export?${query}`)
});
},
32、Vue中获取数组中的最大值、最小值
// 1.排序法
var arr = [11,45,32,98,35];
arr.sort(function(a,b){
return a-b;
})
console.log(arr)
var min = arr[0];
var max = arr[arr.length-1];
console.log(min);
console.log(max);
// 2、假设法
// 假设当前数组中的第一个值是最大值，然后拿这个值和后面的逐项比较，如果后面的某个值比假设的值还大，说明假设错了
// 我们把假设的值进行替换，最后得到的结果就是我们想要的
var arr = [23,11,67,45];
var max = arr[0]
for(var i=1;i<arr.length;i++){
var cur = arr[i];
cur>max?max=cur;null
}
console.log(max)
// 获取最小值
var arr = [45,33,12,7];
var min = arr[0];
for(var i=1;i<arr.length;i++){
var cur = arr[i];
cur<min?min=cur:null
}
console.log(min)
// 3、使用Math中的max/min方法
// 使用apply来实现 apply传入的是一个数组
var arr = [44,22,11,66,21];
var max = Math.max.apply(null,arr);
var min = Math.min.apply(null,arr);
console.log(max,min);
///4、使用ES6的扩展运算符
var arr = [22,13,6,55,30];
console.log(Math.max(...arr))
console.log(Math.min(...arr))
1361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
