Element Input组件分析小结


Posted in Javascript onOctober 11, 2018

input组件相对来说复杂一点,我们先从它用到的一个工具库calcTextareaHeight.js进行分析。

calcTextareaHeight.js

calcTextareaHeight.js使用来计算文本框的高度的,我们根据代码顺序从上往下进行分析。

HIDDEN_STYLE

HIDDEN_STYLE是一个常量,存储隐藏时候的css样式的。

const HIDDEN_STYLE = `
 height:0 !important;
 visibility:hidden !important;
 overflow:hidden !important;
 position:absolute !important;
 z-index:-1000 !important;
 top:0 !important;
 right:0 !important
`;

CONTEXT_STYLE

CONTEXT_STYLE也是一个常量,用来存储要查询的样式名。

const CONTEXT_STYLE = [
 'letter-spacing',
 'line-height',
 'padding-top',
 'padding-bottom',
 'font-family',
 'font-weight',
 'font-size',
 'text-rendering',
 'text-transform',
 'width',
 'text-indent',
 'padding-left',
 'padding-right',
 'border-width',
 'box-sizing'
];

calculateNodeStyling

calculateNodeStyling用来获取结点的某些样式。

function calculateNodeStyling(node) {
 const style = window.getComputedStyle(node); // 获取结点的计算后的样式,即实际渲染的样式

 const boxSizing = style.getPropertyValue('box-sizing'); // 获取 box-sizing 的值

 // 上下的 padding 之和
 const paddingSize = (
  parseFloat(style.getPropertyValue('padding-bottom')) +
  parseFloat(style.getPropertyValue('padding-top'))
 );

 // 上下的边框宽度和(其实是看上去的高度)
 const borderSize = (
  parseFloat(style.getPropertyValue('border-bottom-width')) +
  parseFloat(style.getPropertyValue('border-top-width'))
 );

 // 其他一些样式
 const contextStyle = CONTEXT_STYLE
  .map(name => `${name}:${style.getPropertyValue(name)}`)
  .join(';');

 return { contextStyle, paddingSize, borderSize, boxSizing };
}

calcTextareaHeight

calcTextareaHeight是最终暴露出去的函数,用来计算文本域的高度。

export default function calcTextareaHeight(
 targetNode, // 要计算的结点
 minRows = null, // 最小的行数
 maxRows = null // 最大的行数
) {
 if (!hiddenTextarea) { // 来创建一个隐藏的文本域,所有的计算都是在这上面进行的
  hiddenTextarea = document.createElement('textarea');
  document.body.appendChild(hiddenTextarea);
 }

 // 获取结点一些样式值
 let {
  paddingSize,
  borderSize,
  boxSizing,
  contextStyle
 } = calculateNodeStyling(targetNode);

 // 设置相应的样式
 hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
 // 设置内容,按优先级一次是 结点的 value, 结点的 placeholder, 以及空字符串
 hiddenTextarea.value = targetNode.value || targetNode.placeholder || '';

 // 获取滚动高度
 let height = hiddenTextarea.scrollHeight;

 if (boxSizing === 'border-box') {
  // 如果是 border-box,说明高度得加上边框
  height = height + borderSize;
 } else if (boxSizing === 'content-box') {
  // 如果是 content-box,说明得减去上下内边距
  height = height - paddingSize;
 }

 // 计算单行高度,先清空内容
 hiddenTextarea.value = '';
 // 再用滚动高度减去上下内边距
 let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;

 if (minRows !== null) { // 如果参数传递了 minRows
  let minHeight = singleRowHeight * minRows; // 说明最少应当有这么多行的高度
  if (boxSizing === 'border-box') { // 如果是 border-box,还得加上上下内边距和上下边框的宽度
   minHeight = minHeight + paddingSize + borderSize;
  }
  height = Math.max(minHeight, height); // 取二者最大值
 }
 if (maxRows !== null) { // 如果参数传递了 maxRows
  let maxHeight = singleRowHeight * maxRows; // 说明最多只能有这么多行的高度
  if (boxSizing === 'border-box') { // 如果是 border-box,还得加上上下内边距和上下边框的宽度
   maxHeight = maxHeight + paddingSize + borderSize;
  }
  height = Math.min(maxHeight, height); // 取二者最小值
 }

 // 返回文本域应当设置的高度
 return { height: height + 'px'};
};

input.vue

input组件较为繁琐,我们一点点分析。

生命周期

created

创建的时候会监听inputSelect事件,并调用inputSelect方法。

created() {
 this.$on('inputSelect', this.inputSelect);
},

inputSelect方法会调用refs上的input的原生的select方法,来选中该input。

methods: {
 inputSelect() {
  this.$refs.input.select();
 },
}

mounted

挂载的时候,会调用resizeTextarea方法来设置文本域的大小。

mounted() {
 this.resizeTextarea();
}
methods: {
 resizeTextarea() {
  if (this.$isServer) return; // 如果是服务端渲染,直接返回,不进行下面的逻辑
  var { autosize, type } = this;
  if (!autosize || type !== 'textarea') return; // 如果 autosize 是 false,或者当前不是文本域,也直接返回
  const minRows = autosize.minRows; // 最少行数
  const maxRows = autosize.maxRows; // 最大行数

  this.textareaStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows); // 计算文本域的高度,并赋值
 },
}

最外层

最外层是一个div,上面设置了一些动态的class。

<div :class="[
 type === 'textarea' ? 'el-textarea' : 'el-input',
 size ? 'el-input--' + size : '',
 {
  'is-disabled': disabled,
  'el-input-group': $slots.prepend || $slots.append,
  'el-input-group--append': $slots.append,
  'el-input-group--prepend': $slots.prepend
 }
]">
</div>

type

type是一个prop,它默认设置为text,如果设置为textarea,表明当前是一个文本域。

props: {
 type: {
  type: String,
  default: 'text'
 },
}

size

size也是一个prop,用来设置输入框的大小,在textarea下无效。

props: {
 size: String,
}

disabled

disabled也是一个prop,用来设置是否可用。

props: {
 disabled: Boolean,
}

prepend、append

这两个都是在设置输入框组的时候使用的,通过具名slot传入,分别放置于input的首和尾。

input

然后,根据type的不同使用v-if分别渲染input或者textarea,我们先分析input部分。

前置元素

前置元素直接通过具名slot传入。

<div class="el-input-group__prepend" v-if="$slots.prepend">
 <slot name="prepend"></slot>
</div>

input 图标

图标也是通过具名slot传入的,也可以通过prop中的icon传入图标名。

<slot name="icon">
 <i
  class="el-input__icon"
  :class="'el-icon-' + icon"
  v-if="icon"
  @click="handleIconClick">
 </i>
</slot>

上面还绑定了一个handleIconClick的点击事件,它会触发click事件:

methods: {
 handleIconClick(event) {
  this.$emit('click', event);
 },
}

input

然后是最重要的input部分,上面大部分是prop,不进行讲解,其余的我们将一一讲解。

<input
 v-if="type !== 'textarea'"
 class="el-input__inner"
 :type="type" // 类型
 :name="name" // 名字
 :placeholder="placeholder" // 默认值
 :disabled="disabled" // 是否禁用
 :readonly="readonly" // 是否只读
 :maxlength="maxlength" // 输入的最大长度
 :minlength="minlength" // 输入的最小长度(暂时不支持)
 :autocomplete="autoComplete" // 自动补全
 :autofocus="autofocus" // 自动聚焦
 :min="min" // 允许输入的最小值(数字或者日期)
 :max="max" // 允许输入的最大值(数字或者日期)
 :form="form" // 绑定的表单(不是原生的)
 :value="currentValue" // 输入值
 ref="input" // 引用
 @input="handleInput" // 输入事件
 @focus="handleFocus" // 获得焦点事件
 @blur="handleBlur" // 失去焦点事件
>

value

value改变的时候会调用setCurrentValue。

watch: {
 'value'(val, oldValue) {
  this.setCurrentValue(val);
 }
},

而setCurrentValue是用来改变当前值的。

methods: {
 setCurrentValue(value) {
  if (value === this.currentValue) return; // 如果新旧值一致直接返回

  this.$nextTick(_ => {
   this.resizeTextarea(); // 下一个DOM更新周期时,重新设置文本域大小
  });

  this.currentValue = value; // 改变当前值
  this.$emit('input', value); // 触发 input 事件
  this.$emit('change', value); // 触发 change 事件
  this.dispatch('ElFormItem', 'el.form.change', [value]); // 向父级的派发 el.form.change 事件
 }
}

handleInput

处理输入事件。

methods: {
 handleInput(event) {
  this.setCurrentValue(event.target.value); // 改变当前值
 },
}

handleFocus

handleFocus用来处理获得焦点的事件,会直接触发focus事件。

methods: {
 handleFocus(event) {
  this.$emit('focus', event);
 },
}

handleBlur

handleBlur用来处理失去焦点的事件。

methods: {
 handleBlur(event) {
  this.$emit('blur', event); // 触发 blur 事件
  this.dispatch('ElFormItem', 'el.form.blur', [this.currentValue]); // 向父组件派发 el.form.blur 事件
 },
}

loading

loading会根据计算属性validating来决定是否渲染。

computed: {
 validating() {
  return this.$parent.validateState === 'validating';
 }
},
<i class="el-input__icon el-icon-loading" v-if="validating"></i>

后置元素

后置元素只能根据具名slot传入。

<div class="el-input-group__append" v-if="$slots.append">
 <slot name="append"></slot>
</div>

Textarea

如果type设置为textarea则会渲染textarea,上面绑定的都和input类似,不再多说,多了一个textareaStyle,是根据calcTextareaHeight计算出来的。

<textarea
 v-else
 class="el-textarea__inner"
 :value="currentValue"
 @input="handleInput"
 ref="textarea"
 :name="name"
 :placeholder="placeholder"
 :disabled="disabled"
 :style="textareaStyle"
 :readonly="readonly"
 :rows="rows"
 :form="form"
 :autofocus="autofocus"
 :maxlength="maxlength"
 :minlength="minlength"
 @focus="handleFocus"
 @blur="handleBlur">
</textarea>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
vue自定义全局共用函数详解
Sep 18 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 Javascript
element el-input directive数字进行控制
Oct 11 #Javascript
详解angular2.x创建项目入门指令
Oct 11 #Javascript
详解vscode中vue代码颜色插件
Oct 11 #Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 #Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 #Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 #Javascript
vue最简单的前后端交互示例详解
Oct 11 #Javascript
You might like
一个简单至极的PHP缓存类代码
2015/10/23 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
PHP钩子实现方法解析
2019/05/21 PHP
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
2019/10/31 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
电大会计学自我鉴定
2014/02/06 职场文书
境外导游求职信
2014/02/27 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
小学班级管理心得体会
2016/01/07 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
解决xampp安装后Apache无法启动
2022/03/21 Servers