对象
在TS中，对对象的定义不是KEY TO VALUE，是KEY TO TYPE
函数类型
不管是可选参数还是默认参数，都应该在参数列表的末尾
unknow
unknow不保证类型
但保证类型安全
tuple元组类型
固定长度 固定类型
声明一个元组的时候要指定类型
将字符串转成数字
let str = '1';
+str;
video标签监听timeupdate方法
onTimeUpdate(time) {
// console.log(this.lastTimeStamp)
if (!this.flag) {
return;
}
if (this.flag) {
this.flag = false;
this.timeStampTimer = setTimeout(() => {
console.log(time.timeStamp - this.lastTimeStamp);
if (time.timeStamp - this.lastTimeStamp <= 500 && this.online) {
console.log('地址', this.src, '网络波动，进行重连操作', time.timeStamp, this.lastTimeStamp);
clearTimeout(this.timeStampTimer);
this.rePlay();
}
this.lastTimeStamp = time.timeStamp;
this.flag = true;
}, 6000);
}
},
video标签自适应父级元素
设置object-fit: fill;
video标签需要点击一下才能播放
设置静音muted为true
video标签删除操作栏
.video::-webkit-media-controls-enclosure {
display: none;
}
element抽屉里的video标签，初始化的时候宽度未占满父级元素
请求到视频地址后，再让抽屉的visible设置为true
el-tab重复请求每个tab下的接口
<el-tabs v-model="activeTab"
@tab-click="tabClick">
<el-tab-pane v-for="tab in tabs"
:key="tab.value"
:label="tab.label"
:value="tab.value"
:name="tab.value">
<span slot="label"
class="el-tab-name">
<icon-font :name="tab.icon"
class="global-config-icon"></icon-font>
<span>{{ tab.label }}</span>
</span>
<component :is="tab.component"></component>
</el-tab-pane>
</el-tabs>
使用component :is属性
不要使用setinterval轮询请求网络接口
使用setinterval请求网络接口的时候，相信很多人会这样写，这样的请求在接口返回很慢或者网络有问题的时候，会导致请求堆积，浪费网络资源
setInterval(()=>{
fn()
}, 1000)
使用settimeout改良
async polling(){
try{
setTimeout(()=>{
fn();
polling();
},1000)
} catch(){
polling();
}
}
background+linear-gradient实现虚线
background: linear-gradient(
to left,
transparent 0%,
transparent 50%,
#ccc 50%,
#ccc 100%
);
background-size: 10px 1px;
background-repeat: repeat-x;
滚动到指定区域
scrollView(object: any) {
for (const i in object) {
let dom = this.$refs[i];
// 这里是针对遍历的情况（多个输入框），取值为数组
if (Object.prototype.toString.call(dom) !== '[object Object]') {
dom = (dom as any)[0];
}
(dom as any).$el.scrollIntoView();
break; // 跳出循环了
}
}
表格数据多了，渲染吃力
分页
ios自动全屏
ios端的h5页面播放视频的时候会自动全屏
取消自动全屏需要加上属性
playsinline webkit-playsinline
ios无法自动播放视频
这是限制，无法实现自动播放
npm i 报错 XXX is not in the npm registry
PS E:\study\front_end-demos\src\vue-protobuf> npm config set strict-ssl false
PS E:\study\front_end-demos\src\vue-protobuf> npm config set registry "http://registry.npmjs.org/"
margin: 0 auto; 居中不生效
margin:‘0 auto’; 只对块元素起作用，还要设置width属性。
注：img/input/button等自带宽度，可不设置。
element全局设置尺寸
Vue.prototype.$ELEMENT = { size: 'small' };
z-index
z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。 当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。
- 使用z-index的条件:
- 目标盒子需是定位盒子(非static)
- 取值
- z-index： auto
盒子不会创建一个新的本地堆叠上下文。在当前堆叠上下文中生成的盒子的堆叠层级和父级盒子相同。 - integer
（整型数字）是生成的盒子在当前堆叠上下文中的堆叠层级。此盒子也会创建一个堆叠层级为 0 的本地堆叠上下文。这意味着后代（元素）的 z-indexes 不与此元素的外部元素的 z-indexes 进行对比。(即外部元素的优先级最高)
VUE引入图片
场景： 以变量的形式引入图片，图片不会生效
<img :src="logoSrc" >
export default {
data () {
return {
logoSrc: './../assets/avatar.png'
}
}
}
原因：放在模版里是会被 webpack 打包出来， 所以可以。
而在 js 里写图片路径其实只是字符串 webpack 不会处理，
解决方案：使用 import require 引入
浏览器缓存
字体回退失效
v-model语法糖
el-table原理
vue key
key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
最常见的用例是结合 v-for：
<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>
它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：
- 完整地触发组件的生命周期钩子
- 触发过渡
vue-router参数丢失的问题
使用params传参，定义路由path的时候未定义参数，参数将不会显示在路径上，且刷新后参数会丢失。
地址解析问题
schema://host:port/path?query#fragment /
schema://host:port/path#fragment?query
element el-tree 懒加载 局部刷新
<el-tree
lazy
ref="asyncTree"
:load="loadNode"
:node-key="id"
>
</el-tree>
...
<scripit>
...
methods: {
refreshNodeBy(id){
let node = this.$refs.asyncTree.getNode(id); // 通过节点id找到对应树节点对象
node.loaded = false;
node.expand(); // 主动调用展开节点方法，重新查询该节点下的所有子节点
}
}
...
</script>
element el-tree取消高亮
this.$refs.classifyTree.setCurrentKey(null);
element el-tree 跨节点拖拽
https://blog.csdn.net/qq_41694291/article/details/108631887
element 使用el-tabs实现点击tab实现实时渲染
el-tab-pane内的内容加上v-if标签
<el-tabs v-model="activeTab">
<el-tab-pane v-for="tab in tabs"
:key="tab.value"
:label="tab.text"
:name="tab.value">
<span slot="label"
class="el-tab-name">{{tab.text}}</span>
// v-if实现实时渲染
<result-table v-if="tab.value === activeTab"></result-table>
</el-tab-pane>
</el-tabs>
字体颜色渐变
.site__title {
color: #f35626;
background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
background-image 设置背景渐变
-webkit-background-clip 剪切文字之外的东西
-webkit-text-fill-color 文字的背景颜色设置透明
vue引入图片
- 在vue组件中定义一个变量，变量值为”使用require()方法获取的文件路径”。
require()方法是将编写代码时定义的路径转换为编译打包后的路径。
// 在vue组件中定义此变量，组件创建成功后该变量值为'/static/img/login-bg.df6a3174.png'
backgroundImgUrl: require('@/assets/login-bg.png')
<!-- 在img标签中可以直接使用backgroundImgUrl变量作为图片路径 -->
<img :src="backgroundImgUrl">
<!-- 在style中要把backgroundImgUrl变量拼接到url()中，才能正常引入图片 -->
<div :style="{ backgroundImage: `url(${backgroundImgUrl})` }"></div>
2.在vue文件中使用style标签写css样式
<!-- 在div标签上绑定class，以便使用css元素选择器 -->
<div class="login-container"></div>
<style scoped>
.login-container {
/*
* 当前vue文件在login文件下，我们梳理一下通过相对路径找到图片文件
* login ↑ views ↑ src ↓ assets ↓ login-bg.png
* 于是我们得出如下路径，经过测试可以成功引入图片
* 这里需要提一下，这里路径是编写代码时的路径，vue在编译打包时会对路径进行处理
*/
background-image: url('../../assets/login-bg.png');
/*
* 在vue文件中的style标签内，也可以使用@表示src目录，不过要在前面加~，也就是~@
* 使用~@后我们就可以快速写出下面的路径了
*/
background-image: url('~@/assets/login-bg.png');
/* 此行样式：背景图会按比例缩放填充满整个背景（能保证背景图不变形） */
background-size: cover;
}
</style>
1707
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
