收藏小技巧

替换富文本中图片宽度100%

.replace(/\<img/gi, '< img style="width:100%;height:auto"');

vue 动态样式
:style=" 'background-image: url('+(item.close - item.open < 0 ?kimg1[i]:kimg[i]) +');' " 
//computed
kimg(){
return [
require("../../assets/img/1.png"),
require("../../assets/img/2.png"),
require("../../assets/img/3.png"),
require("../../assets/img/4.png"),
require("../../assets/img/5.png")
]
},

标题背景图切成圆弧形

clip-path: ellipse(100% 100% at 50% 0);

快捷键

control+R //vscode切换项目
control+shift+T //恢复关闭的网页
control+shift+Delete //清除浏览器缓存

快捷方法注释

方法上面 /** 加回车，自动识别参数

vue动态类名

<div :class="` flex ${ type?'mtb-12' : 'mtb-4' } `"> //模板字符串
<div :class="[ 'flex' , { 'mtb-12' : type,'mtb-4' : !type } ]"> //数组对象混合
<div :class=" {'flex' : true, 'mtb-12' : type,'mtb-4' : !type } "> //对象

1 根据接口返回设置背景图 ，设置动态style样式 
<div class="user" :style=" 'background-image: url('+background +');' ">
css background-size: 100% 100%;

//模板字符串
<div :class="`poster relative bg-${info.empower_template}`">
<img style="width:100%" :src="`./images/${info.empower_template}.png`" 
alt="" @load="onConvert" />
//@load事件是当一个资源及其依赖资源已完成加载时，将触发load事件。

2 如果单独给元素设置样式，就加动态类名 :class="{'solo':items.status==1,'flex':true}"
总结：如果根据接口不同仅仅样式不同，则可以动态类名或动态style
3 元素定位后层级过高，使用z-index=-1来降低，不建议，可以升级其他使用相对定位加z-index

4 根据内容长度动态设置背景图大小
方法：设置为行内块元素或者行内元素，用padding撑开宽高，设置背景图大小100%===》padding对任何类型元素均起作用

一、金牌权益介绍fdhfgj

.title { display: inline-block; padding: 10px 20px; background: url(../../image/my/quanyi2.png) no-repeat center center; background-size: 100% 100%; } 行内块要想居中，相对定位====》margin对行内元素不起作用，对行内块上下有用，左右没用 .title { display: inline-block; padding: 10px 20px; background: url(../../image/my/quanyi2.png) no- repeat center center; background-size: 100% 100%;

position: relative;
left: 50%;
transform: translateX(-50%);
}

5 适配富文本上传的图片
this.$set( data, “rights”,data.equity.replace(/<img/g,’<img width=“100%”’));
this.initdata = data;

6 手机纵向适配，小屏在内容最下边，大屏手机在一屏的最下边：纵向flex布局

.my_2 {
min-height: 100vh；
padding-bottom: 60px;
display: flex;
flex-direction: column; //纵向flex布局
.container {
flex: 1; //上边flex:1
}
}

7 全集正则匹配

8 flex左右布局结构，解决右边文字过长挤占图片位置

.pro{
flex: 1;
overflow: hidden; //右边样式
}

9 解决动画卡顿问题will-change属性
.van-popup {
will-change: transform;
}

10 Object.keys() 返回一个数组，每一项是对象的键
Object.assign() 合并多个对象
Object.keys({ }) // [ ]判断是否是空对象
Object.keys({a:1,f:2,h:4}) //[“a”, “f”, “h”]

11 …{} 解构对象或数组为字符串

{{wx_nickname.value}}

//data wx_nickname: { value: "被授予人", style: { fontSize: "14", fontWeight: "normal", color: "#333", y: 225, x: 155 } } 解释：用户自定义样式，将样式存为对象，...为结构对象，之后的样式可以覆盖对象里的原有样式，切记+px单位，样式才可以生效。

12 判断当前环境vue中 process.env
console.log(process.env) //{NODE_ENV: “development”} 开发环境
当npm run build之后，process.env就会变成 production 生产环境

13 监听路由只能在 app.vue 和 router.js 文件中，如果想监听当前页面离开的时候关闭弹窗或销毁定时器，使用生命周期函数
beforeDestroy ( ) {
Dialog.close( )
}

14 align-content和align-items和align-self的区别
align-self是针对自己
align-items是针对单行元素
align-content是针对多行，假如元素使用wrap换行之后，默认为streth，两行均分空白区域高度，会散开

处理方法：align-content:flex-start 就会居上对齐

align-self适用于单个flexbox，不适用于所有
align-self: flex-start;

15、颠倒数组reverse（）
let arr=[1,2,3]
console.log(arr) //[3,2,1]
console.log( arr.reverse() ) //[3,2,1]
该方法会改变原数组，返回一个新的数组，并且在使用方法之前的数组也会改变

16、for in 和 for of 的区别
for（let i in arr）{
console.log(i) //i是数组的索引
}
for （let value of arr ）{
console.log( value ) //value是数组的值
}

17、||和默认值的区别
function log(x, y) {
y = y || ‘World’;
console.log(x, y);
}
log(‘Hello’,undefined) // Hello World
log(‘Hello’, null) // Hello World
log(‘Hello’, ‘’) // Hello World
log(‘Hello’, false) // Hello World

function log(x, y=‘woo’) {
console.log(x, y);
}
log(‘Hello’,undefined) // Hello woo
log(‘Hello’, null) // Hello null
log(‘Hello’, ‘’) // Hello
log(‘Hello’, false) // Hello false
总结：||对于undefined、null、false、‘’均会使用默认值
函数参数的默认值只有参数为undefined时才会使用默认值

18、解决跳转到不是代理页面，物理键返回不到公众号的问题
//axios.js文件引入路由，使用replace跳转过去，返回时则不会再回到首页

import router from “…/…/router/index”;

19、v-for可以循环数组、数字、对象

{{count}} --每个数组值--{{u}}--索引地址index--{{i}} ---{{u.a}}---索引index--{{i}} ---值value---{{v}}---键key---{{k}}----索引index----{{i}}

20、判断是数组还是对象
Array.isArray([]) // true
Array.isArray({}) // false

21、更新远程仓库
git remote update --prune

22、小程序二维码长按识别，需要用微信预览功能，普通的图片不能长按识别
wx.previewImage({
urls: [this.data.code], // 需要预览的图片http链接列表
})

23、flex布局左右结构，当左侧隐藏式，右侧依然保持在右侧：
解决方法：将左侧部分套一层盒子，内部加v-if

24、放大缩小的特效
.test {
animation: switch 1s ease-out infinite;
}
@keyframes switch {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(0.6);
}
}

25、小程序 ios 禁止页面上下拖动"disableScroll":true