【总结】前端常用编码写法合集

置顶禾小毅

已于 2025-01-15 14:58:37 修改

阅读量1.7k

点赞数 2

分类专栏：总结文章标签：前端

于 2021-08-22 15:16:29 首次发布

本文链接：https://blog.csdn.net/weixin_50450473/article/details/119852578

版权

总结专栏收录该内容

6 篇文章

订阅专栏

一、css样式

1、文字多行溢出

// 单行溢出
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

// 多行溢出
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;

2、el-table中主数据样式

.el-table__row.expanded{
}

3、横向滑动

display: -webkit-box;
white-space: nowrap;
overflow-x: scroll;
-webkit-overflow-scrolling:touch; // 允许独立的滚动区域和触摸回弹

4、文字两端对齐

text-align-last:justify;

5、文字中间线

text-decoration: line-through;

6、首行缩进2个字符

text-indent: 2em;

7、按钮边框线隐藏

outline: none;

8、背景颜色渐变

// 射线渐变
background: linear-gradient(90deg, #47E59F, #03BA82);
background: linear-gradient(0deg, #03ba8317, #03ba82 30%);
background: linear-gradient(to right, #DBE1FF, #6B86FF);

// 径向渐变
/* 颜色均匀渐变的大小 */
background-image: radial-gradient(red, yellow, green);
/* 指定颜色区域大小 */
background-image: radial-gradient(red 10%, yellow 25%, green 60%);
/* 改变形状 */
background-image: radial-gradient(circle, red, yellow, green);
/* 指定渐变的大小 */
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);

9、文字描边（2种）

-webkit-text-stroke: 1px #CF7923;
text-shadow: #CF7923 3px 0 0, #CF7923 0 3px 0, #CF7923 -3px 0 0, #CF7923 0 -3px 0;

10、禁止复制

user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;

11、input 禁止弹出键盘和光标

pointer-events: none;

12、动画应用

缩放

.sf{
    width: 1.2rem;
    height: auto;
    position:relative;
    animation:mymove 2s infinite;
    -webkit-animation:mymove 2s infinite; /*Safari and Chrome*/
    animation-direction:alternate;/*轮流反向播放动画。*/
    animation-timing-function: ease-in-out; /*动画的速度曲线*/
    /* Safari 和 Chrome */
    -webkit-animation:mymove 2s infinite;
    -webkit-animation-direction:alternate;/*轮流反向播放动画。*/
    -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
}
@keyframes mymove
{
    0%{
    transform: scale(1);  /*开始为原始大小*/
    }
    75%{
        transform: scale(1.2);
    }
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
    0%{
    transform: scale(1);  /*开始为原始大小*/
    }
    75%{
        transform: scale(1.2);
    }
}

音频播放动效

<div class="voice voicePlay"></div>
 
.voice {
  background:url('../../assets/home/englishs_bg.png') right 0 no-repeat;
  width: 24px;
  height: 24px;
  background-size: 400%;
}
 
.voicePlay {
  animation-name: voicePlay;
  animation-duration: 1s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: steps(3);
}
 
@keyframes voicePlay {
  0% {
    background-position: 0;
  }
  100% {
    background-position: 100%;
  }
}

左右摇晃

.option_error{
  background: #D74A4A;
  border-color: #fff;
  text-shadow: #842626 3px 0 0, #842626 0 3px 0, #842626 -3px 0 0, #842626 0 -3px 0;
}
.option_error.shake {
   display: block;
   animation: yb ease-in-out 0.5s forwards;
   animation-iteration-count:1;
}
@keyframes yb{
  0%{-webkit-transform:translateX(-150px) skew(0deg);}
  20%{-webkit-transform:translateX(50px) skew(-20deg);}
  40%{-webkit-transform:translateX(-50dpx) skew(20deg);}
  60%{-webkit-transform:translateX(25dpx) skew(-8deg);}
  80%{-webkit-transform:translateX(-15px) skew(8deg);}
  100%{-webkit-transform:translateX(0px) skew(0deg);}
}

圆点扩散

// 初始设置
.option_item{
  width: 578px;
  height: 110px;
  line-height: 110px;
  background: #FCCC5E;
  border: 4px solid #F39B23;
  box-shadow: 4px 10px 7px 0px rgba(6, 0, 1, 0.06);
  border-radius: 35px;
  font-size: 43px;
  font-weight: 800;
  color: #fff;
  text-shadow: #CF7923 3px 0 0, #CF7923 0 3px 0, #CF7923 -3px 0 0, #CF7923 0 -3px 0;
  margin: 35px 0px;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
}
.option_ok{
  background: #03BA82;
  border-color: #fff;
  text-shadow: #017853 3px 0 0, #017853 0 3px 0, #017853 -3px 0 0, #017853 0 -3px 0;
}
.option_item:before, .option_item:after {
  position: absolute;
  content: '';
  display: block;
  width: 140%;
  height: 130%;
  left: -20%;
  z-index: -1000;
  transition: all ease-in-out 0.5s;
  background-repeat: no-repeat;
}
.option_item:before {
  display: none;
  top: -75%;
  background-image: radial-gradient(circle, #03BA82 20%, transparent 20%), radial-gradient(circle, transparent 20%, #03BA82 20%, transparent 30%), radial-gradient(circle, #03BA82 20%, transparent 20%), radial-gradient(circle, #03BA82 20%, transparent 20%), radial-gradient(circle, transparent 10%, #03BA82 15%, transparent 20%), radial-gradient(circle, #03BA82 20%, transparent 20%), radial-gradient(circle, #03BA82 20%, transparent 20%), radial-gradient(circle, #03BA82 20%, transparent 20%), radial-gradient(circle, #03BA82 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}
.option_item:after {
  display: none;
  bottom: -75%;
  background-image: radial-gradient(circle, #03BA82 20%, transparent 20%), radial-gradient(circle, #03BA82 20%, transparent 20%), radial-gradient(circle, transparent 10%, #03BA82 15%, transparent 20%), radial-gradient(circle, #03BA82 20%, transparent 20%), radial-gradient(circle, #03BA82 20%, transparent 20%), radial-gradient(circle, #03BA82 20%, transparent 20%), radial-gradient(circle, #03BA82 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
.option_item:active {
  transform: scale(0.9);
  border-color: #fff;
  box-shadow: 0 2px 25px rgba(3, 186, 130, 0.2);
}

// 动画
.option_item.animate:before {
  display: block;
  animation: topBubbles ease-in-out 0.5s forwards;
}
.option_item.animate:after {
  display: block;
  animation: bottomBubbles ease-in-out 0.5s forwards;
}

@keyframes topBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
  }
  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
  }
  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
  }
}
@keyframes bottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
  }
  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
  }
  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
    background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
  }
}

翻牌效果（反面翻向正面）

<div class="result-item">
  <div class="back">正面</div>
  <div class="front"></div>
</div>

.result-item {
  user-select: none;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s;
  cursor: pointer;
  text-align: center;
  padding: 25px 0;
  background: #00c3ff;
  color: #fff;
  width: 200px;

  &:hover {
    transform: rotateY(180deg);
  }

  .front,
  .back {
    width: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
    border-radius: 10px;
    backface-visibility: hidden;
  }

  .front {
    transform: rotateY(0deg);
  }

  .back {
    transform: rotateY(180deg);
  }
}

13、模块换行

文字内换行
width:200px;
white-space:pre-wrap;

// 列表父元素加
display: flex;
flex-wrap: wrap;

// 强制不换行
white-space:nowrap;

// 自动换行
word-wrap: break-word;
word-break: normal;

// 强制英文单词断行
word-break:break-all;

14、实现一个标签内，文字 ”未换行“ 时居中对齐，文字 “换行” 时左对齐

/*当文字为一行是，则P的宽度小于div的宽度，p标签居中显示在盒子内，文字也就居中了 ;当大于一行时，P的宽度和div的宽度是一致的 ,文字就居左对齐了*/

.entest_title{
  text-align: center;
  width: 80%;
  p{
    text-align: left;
    display: inline-block; /*display: inline-block使P的宽度根据文字的宽度伸缩 */
  }
}

15、表格中，添加斑马线的背景色 even/odd

// even表示奇数行
.u-tr:nth-child(even) { 
  background:red;
}

// odd表示偶数行
.u-tr:nth-child(odd) { 
  background:red;
}

16、滚动条样式

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar {  
    width: 10px;    
    background-color: #fff;  
}  

/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track {  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: lightgray;  
}  

/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb {  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: blue;  
}  

/*定义最上方和最下方的按钮*/
::-webkit-scrollbar-button{
     background-color: #000;
     border:1px solid yellow;
}

17、背景色设置斜切角

background: linear-gradient(150deg, transparent 38px, rgba(25, 177, 201,.2) 0);

18、给背景box添加4个拐角

background: linear-gradient(to left, #18B1B7, #18B1B7) left top no-repeat,
            linear-gradient(to bottom, #18B1B7, #18B1B7) left top no-repeat,
            linear-gradient(to left, #18B1B7, #18B1B7) right top no-repeat,
            linear-gradient(to bottom, #18B1B7, #18B1B7) right top no-repeat,
            linear-gradient(to left, #18B1B7, #18B1B7) left bottom no-repeat,
            linear-gradient(to bottom, #18B1B7, #18B1B7) left bottom no-repeat,
            linear-gradient(to left, #18B1B7, #18B1B7) right bottom no-repeat,
            linear-gradient(to left, #18B1B7, #18B1B7) right bottom no-repeat;
background-size: 1px 30px, 30px 1px, 1px 30px, 30px 1px;

19、内阴影

box-shadow: 0px 0px 15px 5px rgba(60,255,253, 0.4) inset;

20、调整某个或者多个元素的样式，从第11至19个元素的样式

.keyboard_item:nth-child(-n+19):nth-child(n+11){
   margin: 20px 25px;
}

21、头部固定高，剩余部分撑满屏幕 flex: 1 1 auto;

.page{
  height:100vh;
  display: flex;
  flex-direction: column;
  .top{
     height: 60px;
  }
  .bottom{
     flex: 1 1 auto;
     height: 0;
  }
}

22、不确定页面分页打印属性

// 当前元素的前面添加分页符
page-break-before:always;
// 当前元素的后面添加分页符
page-break-after:always;

23、设置切换下划线

.line_item {
    &::before {
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        content: "";
        width: 60px;
        border: 1px solid #6B86FF;
    }
}

24、背景图片虚化，数值越大越模糊

filter: blur(139px);

25、自定义三角形样式

.sanjiao::before{
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 10px solid #fff;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    content: "";
}

26、自定义虚线设置

border-left: 2px dashed transparent;
background: linear-gradient(white,white) padding-box, repeating-linear-gradient(-45deg,#00B386 0, #00B386 6px,white 0,white 12px);

27、grid布局

// 列宽
grid-template-columns: repeat(auto-fill,20%);
grid-template-columns: repeat(5,20%);

// 行高
grid-template-rows: repeat(1,100px);
grid-template-rows: 100px 100px; // 有多少个值就设置了多少个单元格的高

// 间距
grid-row-gap: 20px;  // 行间距
row-gap: 20px;
grid-column-gap: 20px; // 列间距
column-gap: 20px;

// 区域分配
grid-template-areas: "header header header""footer footer footer";

// 项目水平和垂直的简写
place-items: <align-items> <justify-items>;
// 水平对齐方式——需要设置宽
justify-items: start | center | end | stretch;
// 垂直对齐方式——需要设置高
align-items: start | center | end | stretch;

// 内容水平和垂直的简写
place-content: <align-content> <justify-content>;
// 内容水平对齐——需要设置宽
justify-content: start | center | end | stretch | space-between | space-evenly | space-around;
// 内容垂直对齐——需要设置高
align-content: start | center | end | stretch | space-between | space-evenly | space-around;

// 自动列大小
grid-auto-columns: 10px | 10% | 1fr;
// 自动行大小
grid-auto-rows:  10px | 10% | 1fr;
// 自动流——  先行后列 | 先列后行 | 如果稍后出现较小的项目，则告诉自动放置算法尝试在网格中填充更早的孔
grid-auto-flow: row | column | row dense | column dense;

// 项目属性
grid-column-start: <number> | <name> | span <number> | span <name> | auto; // 列起始线
grid-column-end: <number> | <name> | span <number> | span <name> | auto; // 列结束线
grid-row-start: <number> | <name> | span <number> | span <name> | auto; // 行起始线
grid-row-end: <number> | <name> | span <number> | span <name> | auto; // 行结束线

// 项目列大小
grid-column ：是 grid-column-start 和 grid-column-end 的合并简写形式
// 项目行大小
grid-row ： grid-row-start 和 grid-row-end 的合并简写形式
// 选择区域
grid-area:  1 / col4-start / last-line / 6; // 行起始线 列起始线 行结束线 列结束线

// 自我对齐 水平和垂直的简写——覆盖容器的 justify-items/align-items 的属性
place-self: <align-self> <justify-self>
// 水平自我对齐
justify-self: start | center | end | stretch;
// 垂直自我对齐
align-self: start | center | end | stretch;

28、Y轴跨屏滚动

.list {
  height: 100%;
  width: 100%;
  overflow-y: scroll; // 滚动条
  scroll-snap-type: y mandatory; //方向y轴 强制贴合最近的滚动点
  .list-item {
    border: 1px solid red;
    width: 100%;
    height: 1080px;
    scroll-snap-align: start; // 强制贴合开始位置 与 scroll-snap-type 结合使用
  }
}

二、js部分

1、常用方法

获取屏幕中的宽高

// 获取屏幕的当前高/宽
window.outerHeight
window.outerWidth

// 获取某一class名的高宽
nextTick(() => {
  console.log("高",document.getElementsByClassName("cont-pic")[0].offsetHeight)
  console.log("宽",document.getElementsByClassName("cont-pic")[0].offsetWidth)
})

关闭当前页

$emit('close')

清空本地缓存

localStorage.clear()

当前选中的样式

方法一：

<view class="filt_item" v-for="(sub,index) in subjects" :key="index" @click="checkBtn(index)">{{sub.name}}</view>

<script>
 methods: {
    checkBtn(index) {
      // index 是指下标
	  let a = document.getElementsByClassName('filt_item')
	  for (let i = 0; i < a.length; i++) {
		 if (i==index) {
			a[i].classList.add('active')
		 } else {
			a[i].classList.remove('active')
		 }
	  }
   }
 }
</script>

.active {
	color: #03ba82;
	background: rgba(3, 186, 130, .1);
	border: 1rpx solid #03ba82;
}

方法二：

<view class="filt_item" v-for="(sub,index) in subjects" :key="index" @click="checkBtn(sub)" :class="[sub.name === activeTxt?'active':'']">{{sub.name}}</view>

<script>
 data(){
   return{
     activeTxt: ''
   }
 }
 methods: {
    checkBtn(subject) {
	   if (subject) {
		  // subject 是指内容集合
		  let a = document.getElementsByClassName('filt_item')
		  for (let i = 0; i < a.length; i++) {
			 if (subject.name == a[i].innerHTML) {
				this.activeTxt = a[i].innerHTML
			 }
		  }
	  }
	}
 }
</script>

.active {
	color: #03ba82;
	background: rgba(3, 186, 130, .1);
	border: 1rpx solid #03ba82;
}

2、接口请求

（1）uniApp —— POST请求

// config.webUrl 启动地址 + 接口
save() {
  uni.request({
   url: config.webUrl + '/api/users',
   data: {
	  image: this.form.avatar,
	  name: this.form.name
   },
   method: 'POST',
   header: {
	  'Authorization': 'Bearer ' + this.token
   },
   dataType: 'json',
   success: (res) => {
	  if (res.data.code != 200) {
		 uni.showToast({
			title: res.data.msg,
			icon: 'none'
		 });
	  } else {
		 uni.showToast({
			title: res.data.msg
		 });
		 setTimeout(function() {
				uni.navigateBack();
		 }, 1500)
	  }
   }
 });
}

（2）fetch——post请求并 return 出去

export function setCjState(type) {
  // http地址+api
  const apiUrl = config.host + `/api/set-cj-state`
  return fetch(apiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: type
  })
  .then(response => response.json()) // 转化成json格式
  .then((res) => {
    return res;
  })
}

（3）axios——get请求并 return 出去

export function getCjState() {
  const apiUrl = config.host + `/api/Pub/get-cj-state`;
  return axios.get(apiUrl)
    .then((res) => {
      const { code, data, message } = res.data;
      if (code === 200) {
        return data;
      } else {
        this.$message.error(message)
      }
    })
}

3、图片上传

// 点击头像
upload() {
	let _self = this;
	uni.chooseImage({
		count: 1,
		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		sourceType: ['album'], //从相册选择
		success: function(res) {
		   let { tempFilePaths: [first] } = res;
		   _self.form.avatar = first;
		   _self.iconcheck = 1; //点击后图片更改状态由0变成1
		   _self.touxiang(_self.form.avatar);
		},
		error: function(e) {
			console.log(e);
		}
	});
},
// 拿到上传的图片路径
touxiang(path) {
	console.log('图片上传path:', path);
	const token = request.config.setTokenToHeader();
	uni.uploadFile({
		url: config.webUrl + '/api/public/ImageUpload',
		method: 'POST',
		filePath: path,
		name: 'file',
		header: {
			'content-type': 'application/x-www-form-urlencoded',
			'Authorization': token
		},
		success: res => {
			console.log(res)
			let img = JSON.parse(res.data)
			uni.showToast({
				title: JSON.parse(res.data).msg,
				icon: 'none',
				duration: 800
			});
			this.shangChuanImg(img);
		},
		fail: () => {},
		complete: () => {}
	});
},

4、解构赋值

liveLink({curriculumId,closingTime,subjectName,curriculumName,beginTime,teacherList=[]}={},type){
	let url = `/pages/course/live-catalog/live-catalog?id=${curriculumId}&closingTime=${closingTime}&subjectName=${subjectName}&curriculumName=${curriculumName}&beginTime=${beginTime}&isLive=${type}&teacherList=${encodeURIComponent(JSON.stringify(teacherList))}`;
				
	teacherList.forEach(({teacherImage,teacherName,isMain}={},index)=>{			
	  let img = 'teacherImage'+index;
	  let name='teacherName'+index;
	  let isMain='isMain'+index
	  url += `&${img}=${teacherImage}&${name}=${teacherName}`
	})
	this.$myUtil.navigator(url)
},

data() {
   return {
      form: {
        image: '',
		account: '',
		onlineSchoolNumber: '',
		name: '',
		sex: '',
		schoolName: '',
		graduationYear: '',
		className: ''
      }
   }
},

// 监听
watch: {
	userInfo(newVal) {
		this.getuserInfo(newVal)
	}
},

methods: {
   async getuserInfo(val) {
	 if (val) {
       方法一: 解构
       let {image,account,onlineSchoolNumber,name,sex,schoolName,graduationYear,className} = val
       this.form.image = image
       this.form.account = account
       this.form.onlineSchoolNumber = onlineSchoolNumber
       this.form.name = name
       this.form.sex = sex
       this.form.schoolName = schoolName
       this.form.graduationYear = graduationYear
       this.form.className = className

       // 方法二：初始化名称和数据库取到的名称要相等
       this.$myUtil.listAssign(this.form,val)
     }
  }
}



在 util.js封装函数
import config from "./config.js";
export default {
  listAssign(targetObj, fromObj = {}, entire = true, priority = 0) {
   if (priority === 0) {
	  // 循环 targetObj
	  Object.keys(targetObj).forEach(key => {
		 targetObj[key] = entire ? fromObj[key] || targetObj[key] : fromObj[key]
	  })
	} else {
	  // 循环 fromObj
	  Object.keys(fromObj).forEach(key => {
		 targetObj[key] = entire ? fromObj[key] || targetObj[key] : fromObj[key]
	  })
	}
	return targetObj;
  }
}

5、在config.js中，添加请求地址

// 包名 :
// 别名 :
// 密码 :
// 配置信息
export default {
    webUrl: 'http://192.168.2.XXX:5001', //基础请求地址
    // wsUrl: 'wss://xxx:8443', //websocket 地址
}

6、获取vuex本地缓存信息

import { mapState } from 'vuex'
export default {
  // 计算属性
  computed: {
    ...mapState('user', [
		'token',
		'userInfo'
    ]),
  }
}

7、将拿到的本地图片地址拼接成http开头的地址

// 单图写法
<img :src="$myUtil.imageSplicingUrlItem(form.image)" alt="">

// 多图写法
let a = [
  {'image':'../../img/a.png',name:'a'},
  {'image':'../../img/b.png',name:'b'}
]
this.$myUtil.imageSplicingUrl(a,'image') // 将对应的图片地址转成http地址
this.data = a // 再将转换的数组赋值给新的数组


在 util.js封装函数
// 多图拼接
imageSplicingUrl(images, ...keys) {
	if (!images || !keys || !Array.isArray(images) || images.length <= 0 || keys.length <= 0) return
	   images.forEach(obj => {
		  keys.forEach(key => {
			 if (obj.hasOwnProperty(key)) obj[key] = this.imageSplicingUrlItem(obj[key])
				// return obj.hasOwnProperty(key) && obj[key] = this.imageSplicingUrlItem(obj[key])
	   })
    })
	return images;
},
// 单图拼接
imageSplicingUrlItem(imageUrl) {
   if (!imageUrl || imageUrl.length <= 0) return '';
   return config.webUrl + '/' + imageUrl;
},

8、uniapp页面跳转的2种写法

在util.js 封装函数
import config from "./config.js";
export default {
	// 跳转路径
	navigator(url) {
		uni.navigateTo({
			url: url
		});
	}
}


// 方法一
<view @click="$myUtil.navigator(e.url)"></view>


//方法二
<view @click="toPage(e.url)"></view>

methods:{
   toPage(url){
	  this.$myUtil.navigator(url);
   }
}

9、解决闭包的方法

function改成箭头函数res=>{}；将this初始化如：let that=this

delOrder(id, index) {
    uni.showModal({
	   title: '温馨提示',
	   content: '确定要删除当前订单？',
	   success: function(res){ //这里function改成箭头函数 success: res=>{
		  if (res.confirm) {
			 deleteOrder([id]).then((res) => {
			    if (res) {
				   this.deductDataByIndex(index); // this才能生效
			    }
			 });
		  } else if (res.cancel) {}
	   }
	});
}

10、一组数组中取随机数

var array = ["aaa","bbb","kk","cc","ded","fff","ggg"]
let a = array[Math.round(Math.random() * array.length)]


var string = "aaa,bbb,cc,ded,fff,ggg";   //原始数据
var array = string.split(",");           //转化为数组
var value = array[Math.round(Math.random()*(array.length-1))];  //随机抽取一个值
alert(value);

11、标签中 class 判断写法

:class="[eng.answer===op.idx?{'option_ok animate':nowQueNo===opId}:{'option_error shake':nowQueNo===opId}]"

:class="changeItem(eng.inputValue,eng.answer,op.idx)"

12、 findIndex 、filter、find、map 找到一组数组中的下标（index）

findIndex() 查找方法
let currentIndex = this.basicsList.findIndex(e => { return e.id === this.questId && e.wordId === this.wordId })

map()、filter() 查找方法，针对 符合条件的多个 [{}]
this.taskDetailList.filter((w) => w.status === '已完成').length

find() 查找方法，针对 符合条件的第一个 {}

13、indexOf('x') == -1 判断文本内是否存在 ' x '

title.indexOf('abc') == -1

14、Math.abs(x) 返回一个数的绝对值，去掉负号（-）

Math.abs(12-30)

15、JSON.parse(x）解析获取的字符串

let string = "[{\"name\":\"A\",\"value\":\"<p>作者</p>\"},{\"name\":\"B\",\"value\":\"<p>记者</p>\"},{\"name\":\"C\",\"value\":\"<p>编辑</p>\"}]"

JSON.parse(string)

16、split('x') 截取 http://www.baidu.com 中的 baidu

let a = "http://www.baidu.com"

a.split("://")[1].split(".")[1]

17、replace(/(^\s*)|(\s*$)/g, '') 或 trim() 者去掉字符串首尾的空字符，replaceAll替换所有

let inputValue="  sdgsgs "

inputValue.replace(/(^\s*)|(\s*$)/g, '')
或者
inputValue.trim()

// 替换所有 
replaceAll

18、去掉字符串中所有 “———”

let a="He left me with a _______ impression."
a.replace(/-/g,'')

19、截取字符串中，英语例句：" What if this doesn’t work out? "

let a = '<p class=\"ql-align-justify\">What if this doesn’t work out?</p><p class=\"ql-align-justify\">如果这行不通怎么办呢？</p><p><br></p>'

a.replace(/<.*?>/ig, '').replace(/[\u4e00-\u9fa5]/g,'').split('？')[0].split('。')[0]

20、删除字符串最后一个字符

let a = 'dfsgsgs'
a.substring(0, eng.inputValue.length - 1)

21、将字符串中  替换成空字符

let a = 'For years I have been hosting&nbsp;a program on the&nbsp;radio&nbsp;and writing articles for a magazine.'

a.replace('&nbsp;','')

22、router 跳转

// 主动，去到某个页面（带参数用 push）
this.$router.push({ name: 'englishWord', query: { taskId: this.taskId} })

// 主动，回到到某个页面
this.$router.go(-1)

// 返回被动用back
this.$router.back(-1)

23、$router.go 回到首页的方法

// 回到首页（计算出中间经过的页面）
let historyInex = history.length - 1
this.$router.go(-historyInex)

24、转字符串的N种方法

1、
let num = 1
num.toString()
num + ''

2、
1
1 + ''
(1).toString()
1..toString() => new String(1).toString()

25、对象打印成表格

let a={name:'xqq',age:'10'}
console.table(a)

26、判断字符串和 new实例化对象的typeof

let a = 'xiang'
typeof a => 'string'

let b = new String('xiang')
typeof b => 'object'

a == b  => true
a === b => false

console.log(a) => xiang
console.log(b) => String{"xiang"}

new String('abc') === new String('abc') => false  // 值和类型相同，创建的地址不同
new String('abc') == new String('abc')  => false

b instanceof String => true

Object.prototype.toString.call(b) => "[object String]"

27、获取所有视频或者音频文件

document.querySelectorAll('video')

28、属性的自定义，以及值的获取 :data-自定义名="200" video.dataset.自定义名

// 属性的自定义 :data-自定义名="200"
<video
    :data-id="200"
    :src="material/video-bg.mp4"
    controls="true"
    controlslist="nodownload"
    @ended="playover"
></video>

// 方式一 值的获取 item.dataset.自定义名
let videos = document.querySelectorAll('video')
videos.forEach(item => {
  var videoId = item.dataset.自定义名 
})

// 方式二 获取自定义的值
for(let i=0;i<videos.length;i++){
	let id = videos[i].getAttribute('data-id')
}

29、计时秒为单位

 // 计时
startTime () {
   // 开始
   if (this.question.duration) {
     clearInterval(this.question.duration)
   }
   this.question.duration = setInterval(() => {
     this.question.second = (this.question.second += 1)
     this.question.duration = this.question.second
   }, 1000)
},

30、视频播放的相关事件

item.addEventListener('canplay', function () { // 可以播放
})
item.addEventListener('play', function () { // 开始播放
})
item.addEventListener('pause', function () { // 暂停播放
})
item.addEventListener('playing', function () { // 继续播放
})
item.addEventListener('ended', function () { // 结束播放
}, false)

31、父子组件的相关事件

1、子组件访问父组件 “函数” 的方法
this.$parent.函数名(参数)
this.$emit('函数名') // 无参数

2、父组件访问子组件 “函数” 的方法
<child ref="mychild"></child>
// 单个
this.$nextTick(() => {
   this.$refs.mychild.函數名()
})
// 多个
this.$nextTick(() => {
  this.subjectList.forEach((s, sindex) => {
     this.$refs.mychild[sindex].montheahcrt()
  })
})

32、数组中字符串转数字

["1", "2"].map(Number)

33、this.$set(arr,key,value)，解决修改了属性值，渲染不到页面上的问题

this.$set( target, key, value )

target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值

34、修改数组中对象的属性名称（字段名）

JSON.parse(JSON.stringify(st).replace(/UserFactorDivide/g, 'value').replace(/FactorName/g, 'name'))

35、禁止冒泡的点击事件@click.self

<div class="keyboard_pop" @click.self="keyShow=!keyShow">
  <div class="keyboard_box">
  </div>
</div>

36、删除数组对象中 [{}]，某一条数据

// 删除数组中的某一条
delete this.markList[4]

// 此时删除后为空,但是长度还在，再删除空值
let markArr = this.markList.filter(s => {
    return s !== undefined && s !== null
})

37、将需要的字符串，解析成对象数组

let form = {...this.WordList[this.questIndex], ...res.data}
form.isCollection = false
this.WordList.splice(this.questIndex, 1, form)

38、为数组每条数据添加children=[]，this.$set(arr[index], 'children', data)

// this.arr数组 this.index下标 data为children下的数据内容
this.$set(this.arr[this.index], 'children', data)

39、splice用法

删除 arr[arrIndex].childArr.splice(chiIndex, 1)  // chiIndex 下标 1个数
修改 arr[arrIndex].childArr.splice(chiIndex, 1, 50)  // chiIndex 下标 1个数 50修改的值

40、sessionStorage与localStorage的存储和访问

sessionStorage.setItem('store-data', JSON.stringify(this.$store.state))
JSON.parse(sessionStorage.getItem('store-data'))

localStorage.setItem('store-data', JSON.stringify(this.$store.state))
JSON.parse(localStorage.getItem('store-data'))

41、vue中通过属性值排序

// 通过属性值排序
sortKey (array, key) {
  return array.sort(function (a, b) {
    var x = a[key]
    var y = b[key]
    return ((y < x) ? -1 : (x > y) ? 1 : 0) // 从小到大排序
  })
},

// 调用
let arr=[{name:'试题',type:4},{name:'试卷',type:1},{name:'文件',type:3}]
this.sortKey(arr, 'type')

42、接口请求path结构（detail?id=31）， body结构（body参数），query结构（字符串参数）

// body结构：
export function GetEnglishAccuracy (data) {
  return request({
    url: `/api/v1/wordpractice/accuracy`,
    method: 'post',
    data
  })
}

// path结构、query结构
export function GetEnglishQuest (params,Id) {
  return request({
    url: `/api/v1/eng/question/${Id}`,
    method: 'get',
    params
  })
}

43、join(' ')将数组中的所有的值，拼接成字符串格式

['A','B','C'].join('')  // ABC

44、== 存在隐式转换后比较，=== 只是值比较

数字和其余类型比较 其余类型转数字
布尔和其他类型比较 布尔值转数字再比较

45、vue3中资料下载接口对接方式

// config.host指服务器地址
export const getDowmFile = (data:any) => {
    return config.host+"/api/public/DowmFile?mid=" + data
}

// 调用 getDowmFile接口名称， item.MaterialId 当前对应id
window.location.href=getDowmFile(item.MaterialId)

46、不在当前页，阿里云直播流的关闭，在组建的结束函数中加上 dispose() 即可

// 卸载
unmounted(){
   this.ended()
},

// 结束视频
ended: function () {
   this.instance.dispose()
}

47、将两个数组或数组对象合并成一个数组或数组对象

let a=[{name:'aaa'}]
let b=[{name:'bbb'}]
let c=[]

//组合成新数组
a = [a, ...b]
c = [...a, ...b]

48、数组中，选中项去重

[
    {
        "Id": 396430307848261,
        "GroupName": "学科",
        "Key": "语文"
    },
    {
        "Id": 396430307848262,
        "GroupName": "学科",
        "Key": "数学"
    }
]

const menusChange=(item:any,index:number)=>{
	// 选中项去重
	let activeIndex = person.activeItem.findIndex((e:any)=>
		e.GroupName == item.GroupName
	)
	if(activeIndex>-1){
		person.activeItem[activeIndex]=item
	}else{
		person.activeItem.push(item)
	}
}

49、在循环递归的数组中，需要新增字段或者赋值，则用递归

// 以下错误示范,不能确保到底有多少层
person.leftList.forEach((le:any,leIndex:number)=>{
  le.level=0
  le.Children.forEach((chi:any,chiIndex:number)=>{
    chi.level=0
    chi.Children.forEach((chi1:any,chiIndex1:number)=>{
      chi1.level=1
      chi1.Children.forEach((chi2:any,chiIndex2:number)=>{
        chi2.level=1
        chi2.....
        .....
      })
    })
  })
})


// 正确输出  
person.leftList.forEach((le:any,leIndex:number)=>{
  le.level=0
  le.Children.forEach((chi:any,chiIndex:number)=>{
    chi.level=0
    // 前面2层级赋值为0，后面为1，所以从此处开始调用的
    childrens(chi.Children)
  })
})

const childrens=(item:any)=> {
  item.forEach((it:any) => {
    it.level=1
    if(it.Children.length>0){
      childrens(it.Children)
    }
  });
}

50、使用style，class判断

（1）3张背景图为一个循环组，为第 3n，3n+1，3n+2 个元素，分别设置不同的图片背景并循环加载

.ech-card {
	width: 343px;
	height: 121px;
	position: relative;
	left: 50%;
	transform: translate(-50%);
	margin-bottom: 5px;
	overflow: hidden;
	&:nth-child(3n){
		background: url('@/static/education/purple-bg.png') no-repeat !important;
		background-size: 100% 100% !important;
	}
	&:nth-child(3n+1){
		background: url('@/static/education/green-bg.png') no-repeat !important;
		background-size: 100% 100% !important;
	}
	&:nth-child(3n+2){
		background: url('@/static/education/blue-bg.png') no-repeat !important;
		background-size: 100% 100% !important;
	}
}

（2）通过外层传递的数组下标 bgIndex，判断第几个元素赋值对应class名，判断条件

3n个：bgIndex % 3 === 0

3n+1个：(bgIndex-1) % 3 === 0

3n+2个：(bgIndex-2) % 3 === 0

<view class="ech-card" :class="{'purple':bgIndex % 3 === 0,'green':(bgIndex-1) % 3=== 0,'blue':(bgIndex-2) % 3=== 0}">
  <view :style="{color:(props.bgIndex % 3 === 0?'#6B86FF':(props.bgIndex-1) % 3=== 0?'#45CB9F':(props.bgIndex-2) % 3=== 0?'#22C1F2':'')}">
  执器于身，共建未来</view>
</view>

.blue{
	background: url('@/static/education/blue-bg.png') no-repeat !important;
	background-size: 100% 100% !important;
}
.green{
	background: url('@/static/education/green-bg.png') no-repeat !important;
	background-size: 100% 100% !important;
}
.purple{
	background: url('@/static/education/purple-bg.png') no-repeat !important;
	background-size: 100% 100% !important;
}

51、时间排序：日期时间数组的升序降序函数

// 时间排序
const timeData=(property, bol)=> {
	return function(a, b) {
		let value1 = a[property];
		let value2 = b[property];
		if (bol) {
			// 升序
			return Date.parse(value1) - Date.parse(value2);
		} else {
			// 降序
			return Date.parse(value2) - Date.parse(value1)
		}
	}
}

let data=[
  {Time:'2023-04-25 13:25:06'},
  {Time:'2023-02-25 13:25:06'},
  {Time:'2023-04-24 13:25:06'},
  {Time:'2023-06-25 13:25:06'}
]

data.sort(timeData("Time", true))
data.sort(timeData("Time", false)

52、键盘事件

// keydown 键盘按下
document.addEventListener("keydown", function(event) {
  console.log(event.keyCode)
});

// keyup 键盘弹起
document.addEventListener("keyup", function(event) {
  console.log(event.keyCode)
});

53、将文字字符赋值为对象中的key，字数为key的value值

// 原始数据
let obj = [
  {
      Key: "语文",
      Value: "33.00"
  },
  {
      Key: "数学",
      Value: "34.00"
  },
  {
      Key: "英语",
      Value: "16.00"
  }
]

// 转化之后的格式数据
let obj1 = {
  "语文": "33.00",
  "数学": "34.00",
  "英语": "16.00"
}

// 实现方法
let arrObj = []
let currObj = {}
if (obj.length > 0) {
  obj.forEach((ex: any,exIndex:number) => {
    arrObj.push({ [ex.Key]:ex.Value })
    // 合并数组中的对象
    currObj = arrObj.reduce(function(result, current) {
      return Object.assign(result, current);
    }, {})
    console.log('转化之后的格式数据',currObj )

    // 其中取值
    console.log(arrObj[ex.Key])
  })
}

54、标签中方法字符串循环拼接处理

// 数据结构
let gradeData = [
  {
    list: [
      { Name: "1班", GradeLevel: "初", GraduationYear: 2025 },
      { Name: "2班", GradeLevel: "初", GraduationYear: 2025 },
      { Name: "3班", GradeLevel: "初", GraduationYear: 2025 },
      { Name: "4班", GradeLevel: "初", GraduationYear: 2025 },
      { Name: "5班", GradeLevel: "初", GraduationYear: 2025 }
    ]
  },
  {
    list: [
      { Name: "1班", GradeLevel: "高", GraduationYear: 2023 },
      { Name: "2班", GradeLevel: "高", GraduationYear: 2023 },
      { Name: "3班", GradeLevel: "高", GraduationYear: 2023 },
      { Name: "4班", GradeLevel: "高", GraduationYear: 2023 },
      { Name: "5班", GradeLevel: "高", GraduationYear: 2023 }
    ]
  }
]

<template>
<div style="width:400px;">
   <div class="tooltip-box" v-for="(item,index) in gradeData" :key="index">
      <el-tooltip v-if="showItem(item).length>29" effect="light" placement="top" :content="showItem(item)">
        {{ showItem(item) }}
      </el-tooltip>
      <span v-else>{{ showItem(item) }}</span>
   </div>
</div>
</template>

<script setup>
const showItem = (item: any[]) => {
  let str = ''
  item.forEach((el: any, elIndex) => {
    if (item.length !== elIndex + 1) {
      str += el.GradeLevel + el.GraduationYear + '级' + el.Name + '，'
    }else {
      str += el.GradeLevel + el.GraduationYear + '级' + el.Name
    }
  })
  return str
}
</script>

<style scoped>
.tooltip-box {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>

55、某个div 平滑 “ 回到顶部 ” 效果

document.querySelector(".content").scrollTo({
  top: 0, // 滚动到页面顶部
  behavior: 'smooth' // 平滑滚动
});

56、[] 改成双 [[]] 的数据处理

const array = [
  { id: 1, category: 'A' },
  { id: 2, category: 'B' },
  { id: 3, category: 'A' },
  { id: 4, category: 'B' },
  { id: 5, category: 'C' }
];

const grouped = array.reduce((result, obj) => {
  const key = obj.category;
  if (!result[key]) {
    result[key] = [];
  }
  result[key].push(obj);
  return result;
}, {});

const groupedArray = Object.values(grouped);
// 输出: [[{ id: 1, category: 'A' }, { id: 3, category: 'A' }], [{ id: 2, category: 'B' }, { id: 4, category: 'B' }], [{ id: 5, category: 'C' }]]

58、获取当前图片实际宽高

// 取图片的实际宽高的方法
function getImageSize(url:string) {
  return new Promise((resolve) => {
    let img = document.createElement("img")
    img.src = url
    img.onload = () => {
    // 为什么要写 onload  是因为要等他加载完之后才能获取到图片宽高
        resolve({width:img.naturalWidth,height: img.naturalHeight});   //  2064,4608
    }
  })
}

// 调用
getImageSize(handwritData.value.questionPicture).then(res=>{
  console.log(8888,res);
})

59、将 “秒” 转化为 “时分秒” 的格式

const formatSecond = (seconds) => {
  const hours = Math.floor(seconds / 3600)
  seconds %= 3600; // 取余得到不足1小时的秒数
  const minutes = Math.floor(seconds / 60)
  seconds %= 60
  if (hours > 0) {
    return hours + '小时' + minutes + '分' + seconds + '秒'
  } else if (minutes > 0) {
    return minutes + '分' + seconds + '秒'
  } else {
    return seconds + '秒'
  }
}

60、处理 “ 加载 ” 的几种方式

方法一:
<div class="content" v-loading="state.isLoading" element-loading-text="加载中..."></div>

<script lang='ts' setup>
import { reactive } from 'vue'
const state = reactive<any>({
  isLoading: false,
  dataList: []
})
const GetSelectList = async () => {
  dataList.value = []
  state.isLoading = true
  try {
    let obj={
      ...
    }
    const { Code, Data } = await getSelectListApi(obj)
    state.isLoading = false
    if (Code === 200 && Data) {
      state.dataList = Data
    }
  } catch (error) {
    state.isLoading = false
  }
}
</script>


方法二:
<div class="content"></div>

<script lang='ts' setup>
import { reactive } from 'vue'
import { ElLoading } from 'element-plus'
const state = reactive<any>({
  toast: null,
  dataList: []
})
const GetSelectList = async () => {
  dataList.value = []
  state.toast = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(0, 0, 0, 0.2)',
    target: '.content'
  })
  try {
    let obj={
      ...
    }
    const { Code, Data } = await getSelectListApi(obj)
    state.toast.close()
    if (Code === 200 && Data) {
      state.dataList = Data
    }
  } catch (error) {
    state.toast.close()
  }
}
</script>

61、为按钮设置开关，防抖操作

（1）store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    isClick: false
  },
  mutations: {
    setClick(state, value) {
      state.isClick = value;
    }
  },
  actions: {},
  modules: {}
});

（2）页面用法

methods: {
  toStart() {
    if (this.$store.state.isClick) return
    this.$store.commit('setClick', true);
    // 处理的数据
    // .....
    // .....
    
    // 处理结束
    this.$store.commit('setClick', false);
  }
}

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~