🥝FANMR.CN热爱,追求
Vue常用知识积累

页面播放视频关闭

在弹窗(详情)中展示的视频,如果直接关闭弹窗,容易出现视频还在播放的情况,这里推荐加v-if对组件进行销毁,或者使用ref进行视频关闭

<video ref="video" />

// 关闭
this.$refs.video[0].pause()

点击事件后的节点操作

问题出现场景:在树状控件的中,点击上级展开下级,但是控件只能点击左侧图标才会展开

图

于是想到的方式就是点击后找到图标节点进行手动点击事件

// 点击触发事件
function treeClick(e: any) {
  if (e.target.parentElement.previousElementSibling) {
    e.target.parentElement.previousElementSibling.click()
  }
}

涉及知识

fn(e):{
  let clickDom = e.currentTarget;  // currentTarget 获取绑定点击事件的节点
  let currentDom = e.target;   // target 获取当前点击节点
  let parent = clickDom.parentElement;   // parentElement获取绑定事件节点的父节点
  let previous = clickDom.previousElementSibling;  // previousElementSibling获取绑定事件节点的前一个节点
  let previousInner = previous.innerHTML;   // 获取绑定事件节点的前一个节点的内容
  let next = clickDom.nextElementSibling;   // nextElementSibling获取绑定事件节点的后一个节点
  let firstChild = clickDom.firstElementChild; // firstElementChild获取绑定事件节点的第一个子节点
  let childNodes = clickDom.childNodes;  // childNodes获取子节点,包括元素节点和文本节点
  let children = clickDom.children;  // children获取子节点,只获取元素节点
  let childElementCount = clickDom.childElementCount;  // childElementCount获取子节点的个数
  let lastElementChild = clickDom.lastElementChild;  // lastElementChild获取最后一个子节点
  let lastChild = clickDom.lastChild;  // lastChild获取最后一个子节点,包括元素节点和文本节点              
}

常用正则收集

在Vue的信息输入中可能会用到

不能为空

/(?=.{1})/

0-100

/^([0-9]{1,2}|100)$/

表单自动聚焦

<el-input v-model="editData.name" ref="inputFocus"></el-input>
this.$nextTick(() => {
  this.$refs['inputFocus'].focus();
});

表单回车事件

<el-form ref="editData" :model="editData" 
    @keydown.enter.native="editDeal('editData')">