vue开发一些常遇见的问题

1、显示富文本的内容，自动换行样式，文本超出

<div class="introduction" v-html="introduce"></div>


.introduction {
        font-size: 16px;
        font-weight: 400;
        color: #666666;
        letter-spacing: 1px;
        margin-top: 10px;
        word-wrap:break-word; // 主要就是这两行
        word-break:normal; // 主要就是这两行
 }

2、打开新的页面窗口

toComplete() {
    let routeData = this.$router.resolve({
      path: '/questionnaire',
    })
	window.open(routeData.href, '_blank')
}

3、关闭新开窗口，回到老的页面并刷新老页面

if (window.close) {
     // For IE and Firefox
     window.opener.location.reload() // 刷新老页面
     window.close() // 关闭新窗口
   } else {
    // For Chrome and Safari
   window.open('', '_self', '')
   window.opener.location.reload()
   window.close()
}

4、倒计时

data() {
	countdown: 3 // 倒计时多少s
}

startCountdown() { // 倒计时方法
  let timer = setInterval(() => {
    if (this.countdown > 0) {
       this.countdown -= 1
    } else {
       clearInterval(timer)
    }
  }, 1000)
}

5、背景透明度

      .one {
        color: #e88f21;
        background-color: rgba(232, 143, 33, 0.2); // .2就是透明度
      }

6、数据更新dom没有更新

this.$forceUpdate();

7、获取前几天或者后几天的日期

    getDate() {
      // 创建一个空数组来存储日期
      let dates = [];
      // 获取当前日期
      let now = new Date();
      // 循环获取最近 7 天的日期
      for (let i = 0; i < 7; i++) {
        // 获取当前日期的时间戳
        let timestamp = now.getTime();
        // 计算 i 天前的时间戳
        let dayTimestamp = 24 * 60 * 60 * 1000; // 一天的毫秒数
        let iDayAgoTimestamp = timestamp + i * dayTimestamp; // 前七天还是后七天，在这里控制加还是减
        // 转换为日期对象
        let date = new Date(iDayAgoTimestamp);
        // 格式化日期为 "yyyy-MM-dd" 的字符串并存入数组
        let year = date.getFullYear();
        let month = ("0" + (date.getMonth() + 1)).slice(-2);
        let day = ("0" + date.getDate()).slice(-2);
        dates.push(year + "-" + month + "-" + day);
      }
      this.dateAfter.forEach((item, index) => {
        item.date = dates[index]
      })
    }

8、获取指定天数的日期

function getTheSpecifiedDate(date, theOtherDay) {
	let myDate = new Date(date); //获取今天日期
	myDate.setDate(myDate.getDate() - theOtherDay); //获取指定前几天的日期
	const Y = myDate.getFullYear()
	const M = myDate.getMonth() + 1 < 10 ? '0' + (myDate.getMonth() + 1) : myDate.getMonth() + 1
	const D = myDate.getDate()
	let dateGet = `${Y}-${M}-${D}`
	return dateGet
}

9、根据身份证计算年龄

function analyzeIDCard(IDCard) {
	let age = 0,
		yearBirth, monthBirth, dayBirth;
	//获取用户身份证号码
	let userCard = IDCard;
	//如果身份证号码为undefind则返回空
	if (!userCard) {
		return age;
	}
	let reg = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/; //验证身份证号码的正则
	if (reg.test(userCard)) {
		if (userCard.length == 15) {
			let org_birthday = userCard.substring(6, 12);
			//获取出生年月日
			yearBirth = "19" + org_birthday.substring(0, 2);
			monthBirth = org_birthday.substring(2, 4);
			dayBirth = org_birthday.substring(4, 6);
		} else if (userCard.length == 18) {
			//获取出生年月日
			yearBirth = userCard.substring(6, 10);
			monthBirth = userCard.substring(10, 12);
			dayBirth = userCard.substring(12, 14);
		}
		//获取当前年月日并计算年龄
		let myDate = new Date();
		let monthNow = myDate.getMonth() + 1;
		let dayNow = myDate.getDate();
		let age = myDate.getFullYear() - yearBirth;
		if (monthNow < monthBirth || (monthNow == monthBirth && dayNow < dayBirth)) {
			age--;
		}
		//返回年龄
		return age;
	} else {
		return ''
	}
}

10、根据身份证获取性别

    getGenderByIdNumber(idNumber) {
      if (idNumber) {
        let genderCode; // 性别代码
        if (idNumber.length == 18) { // 二代身份证号码长度为18位（第17位为性别代码）
          genderCode = idNumber.charAt(16);
        } else if (idNumber.length == 15) { // 一代身份证号码长度为15位（第15位为性别代码）
          genderCode = idNumber.charAt(14);
        }
        if (genderCode && !isNaN(genderCode)) {
          // 两代身份证号码的性别代码都为男奇女偶
          if (parseInt(genderCode) % 2 == 0) {
              return '女';
          }
          return '男';
        }
      }
    },

11、图片链接放到浏览器可以打开，但是在img标签里面却无法打开，原因图片的链接是第三方地址，所以在有些浏览器可以会不兼容，导致不显示图片，解决方案加上//images.weserv.nl/?url=

<img class="image-show" src="//images.weserv.nl/?url=https://lmg.jj20.com/up/allimg/tp01/1ZZQ20QJS6-0-lp.jpg" alt="">

12、后端返回文件流，前端处理下载excel

export function getExcel(data) { // 接口
  return request({
    url: '/Test/downloadOrder',
    method: 'POST',
    data,
    responseType: 'blob', // 接受类型
  })
}

// 下载请求
getExcel(state.formList).then((res) => {
  const blob = new Blob([res], { type: 'application/vnd.ms-excel' }) // 构造一个blob对象来处理数据，并设置文件类型
  if (window.navigator.msSaveOrOpenBlob) {
    //兼容IE10
    navigator.msSaveBlob(blob, '订单列表')
  } else {
    const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
    const a = document.createElement('a') //创建a标签
    a.style.display = 'none'
    a.href = href // 指定下载链接
    a.download = '订单列表.xlsx' //指定下载文件名
    a.click() //触发下载
    URL.revokeObjectURL(a.href) //释放URL对象
    state.excelLoading = false
  } // 这里也可以不创建a链接，直接window.open(href)也能下载
})

13、input输入框无法输入的时候

// 第一种方案
@input="changeValue"
changeValue() {
	this.$forceUpdate()
}

// 第二种，可能是在table中，你需要将数据开始就遍历加入字段
this.tableData = res.data.list.map((item) => {
    item.enterpriseName = item.name
    item.enterpriseId = item.id
    item.isSelect = false
    item.enrollNumber = ''
    return item
})

14、循环生成el-form，校验必填项

      <div v-for="(item, index) in resultArr" :key="index">
        <el-form
          :ref="
            (el) => {
              if (el) formRef[index] = el
            }
          "
          class="title-form"
          :inline="false"
          label-position="left"
          label-width="80px"
          :model="item"
          :rules="rules"
        >
          <el-form-item class="result-title" :label="'结果' + (index + 1)">
            <el-button type="primary" @click="delResult(index)">
              删 除
            </el-button>
          </el-form-item>
          <el-form-item label="分数范围" prop="minFraction">
            <div class="score">
              <el-input
                v-model="item.minFraction"
                clearable
                placeholder=""
                style="width: 150px"
              />
              <div style="margin: 0 20px">至</div>
              <el-input
                v-model="item.maxFraction"
                clearable
                placeholder=""
                style="width: 150px"
              />
            </div>
          </el-form-item>
          <el-form-item label="测评结果" prop="details">
            <vab-quill
              v-model="item.details"
              :min-height="400"
              :options="configOptions_2"
            />
          </el-form-item>
        </el-form>
      </div>

校验必填项

        let isPass = true
        state.resultArr.forEach((item, index) => {
          state.formRef[index].validate(async (valid) => {
            if (!valid) {
              isPass = false
              console.log(123, isPass)
              return
            }
          })
          if (!isPass) throw new Error('退出forEach循环！')
        })
        if (isPass) emit('resultNext', state.resultArr)

15、两数组根据对象id去重

export function repeatArr(arr, arr1) {
	let arrs=[...arr,...arr1]
	//根据id去重
	let map=new Map()
	for(let item of arrs){
			if(!map.has(item.id)){
					map.set(item.id,item)
			}
	}
	let newArr = [...map.values()]; //把map中所有的值取出来放进数组
	return newArr
}

16、element ui中遇到时间、级联选择等等，数组有数据，但是视图不更新问题，应该使用push，而不是直接赋值

	getBeforeTwo(time) {
      this.signInTime = []
      let currentTime = new Date(time)
      let twoHoursAgo = currentTime.setHours(currentTime.getHours() - 2)
      this.signInTime.push(getNowDate(twoHoursAgo))
      this.signInTime.push(this.activityTime[1])
      console.log(this.signInTime)
      return this.$forceUpdate()
    }

17、限制选择时间到分钟

// vue2
<el-date-picker
  style="width: 100%"
  v-model="activityTime"
  type="datetimerange"
  format="yyyy-MM-dd HH:mm"
  value-format="yyyy-MM-dd HH:mm"
  placeholder="选择日期"
  :picker-options="option"
  :disabled="disableStatus"
  @change="activityTimeChange">
</el-date-picker>

// vue3
<el-date-picker
  v-model="activityTime"
  :disabled="disableStatus"
  :disabled-date="disabledDate"
  end-placeholder="结束时间"
  format="YYYY-MM-DD HH:mm"
  range-separator="到"
  start-placeholder="开始时间"
  style="width: 100%"
  type="datetimerange"
  value-format="YYYY-MM-DD HH:mm"
  @change="activityTimeChange"
/>

18、英文不允许整个单词换行

    word-wrap: break-word;
    word-break: break-all;