跟随Element学习Vue小技巧(11)——Input

1,055 阅读3分钟

要么变强改变世界

要么一直做被伤害的人

前言

一个农夫经过河边,斧头掉进了河里,刚好砸中了河神。
河神说, 我这里有一把金斧头和一把银斧头,哪把斧头是你的?
农夫说, 我掉进河里的是一把生锈的斧头
河神被农夫的诚实感动了,于是把两把斧头都送给了他
农夫高高兴兴的回家了,仔细打量着这两把斧头,一下子傻眼了,原来一把是全斧头,一把的很斧头
这TM是PDD上买的吧!!

你有过购物体验吗?怎样才能找到自己满意的商品呢?
做好吃土准备了吗?还在等什么,出发!

1 Input

合成事件

单机,双机,不如一起去吃鸡
左撩,右撩,不如一起喝农药

代码片段

<input
  @compositionstart="handleCompositionStart"
  @compositionupdate="handleCompositionUpdate"
  @compositionend="handleCompositionEnd"
>

技巧解析

常规事件:点击,双击,左滑,右滑
文本合成事件倒是少见!
还真是涨姿势了,有木有 文本合成系统 传送门

2 migrating

虚拟DOM

你有过碎屏的体验吗?那叫一个爽啊 后来出现了手机膜,再后来出现了钢化膜,再后来闭着眼睛摔碎了
妈,我手机摔碎了,这下可以换新的了吧 旧的不去,新的不来嘛

代码片段

mounted() {
  ...
  const { props = {}, events = {} } = this.getMigratingConfig();
  const { data, componentOptions } = this.$vnode;
  const definedProps = data.attrs || {};
  const definedEvents = componentOptions.listeners || {};
  ...
}

技巧解析

真实DOM不好用吗?
好用啊,就是太好用了,所以才不用
怎么讲?
屏幕比膜清晰吧,可修起来代价太大! 所以,用vNode——本质上是对象,来描述真实的DOM,操作起来更廉价
如果你是土豪,那就当我没说过 虚拟DOM 传送门

3 calcTextareaHeight

样式操作

还记得那个小偷吗?
把那个箱子给偷走了,别人家的老公还傻傻不知道! 果然,一次性打包操作,省时又省力

代码片段

function calculateNodeStyling(targetElement) {
  const style = window.getComputedStyle(targetElement)
  const boxSizing = style.getPropertyValue('box-sizing')
  const paddingSize = (
    parseFloat(style.getPropertyValue('padding-bottom')) +
    parseFloat(style.getPropertyValue('padding-top'))
  )
  ...
}
export default function calcTextareaHeight(
  targetElement,
  minRows = 1,
  maxRows = null
) {
  if (!hiddenTextarea) {
    hiddenTextarea = document.createElement('textarea');
    document.body.appendChild(hiddenTextarea);
  }

  hiddenTextarea.setAttribute('style'`${contextStyle};${HIDDEN_STYLE}`);
  ...
}
calcIconOffset(place) {
  if (this.$slots[pendant]) {
    el.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${this.$el.querySelector(`.el-input-group__${pendant}`).offsetWidth}px)`;
  } else {
    el.removeAttribute('style');
  }
}

技巧解析

el.style.left
el.style.top
el.style.paddingLeft
你还在一个个操作吗?
何不试试一次性操作
window.getComputedStyle(el)
el.setAttribute('style', style)
el.removeAttribute('style')

4 merge

对象扩展

00后已经陆陆续续有了对象?
作为90的你,狗粮吃够了吗? 不够?再给你扩展几个!

代码片段

export default function(target) {
  for (let i = 1, j = arguments.length; i < j; i++) {
    let source = arguments[i] || {};
    for (let prop in source) {
      if (source.hasOwnProperty(prop)) {
        let value = source[prop];
        if (value !== undefined) {
          target[prop] = value;
        }
      }
    }
  }

  return target;
}
textareaStyle() {
  return merge({}, this.textareaCalcStyle, { resize: this.resize });
},

技巧解析

多个对象合并成一个对象,返回新对象
哪来的血轮眼,莫不是卡卡西 T_T
那个爱化妆的孩子,定Object.freeze
爱乱跑的孩子,集合Object.assign
还有其他法子吗,解构一下 {...a}
对象拷贝 传送门

有的人一开始就注定离开 我却仍愿用一生等他回来

我是一只七秒记忆的鱼

带你来一场奇妙的旅行

参考链接

往期回顾