一、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%);
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%;
}
}
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;
}
二、js部分 1、常用方法
获取当前高度
window.outerHeight
关闭当前页
$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、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)
}
}
});
}
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') 截取 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 a program on the radio and writing articles for a magazine.'
a.replace(' ','')
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.自定义名
})
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
