跟随Element学习Vue小技巧(24)——Form

七秒记忆的鱼
827 阅读3分钟
❝

未来将要发生的事

一定有它的意义

❞

前言

只从有了微信以后，我就没有登录过QQ，前段时间突然想起，去登录的时候发现密码给忘了。
在申诉时有个问题，你的梦想是什么？
可是已经十几年过去了，我已经不记得当初写了什么。于是我就随便填了一个答案

  • 钱
  • 答案错误
  • 爱情
  • 答案错误
  • 房子
  • 答案错误
  • 车子
  • 答案错误
  • 工作
  • 答案错误
    ...

这时我才发现
「我丢的不是密码，我丢的是最初的梦想」

你有忘记密码的时候吗？忘记密码不打紧，最初的梦想没忘就好
什么？你忘了！！！
不要紧，一起去找回来吧，嘻嘻嘻(〃'▽'〃)

1 Form

表单结构

北比臼舅
话不多说，直接上图 搞错了，重来

代码片段

// Form
<template>
  <form class="el-form" :class="[
    labelPosition ? 'el-form--label-' + labelPosition : '',
    { 'el-form--inline': inline }
  ]">
    <slot></slot>
  </form>
</template>

// FormItem
<template>
<div>
  <label-wrap
    :is-auto-width="labelStyle && labelStyle.width === 'auto'"
    :update-all="form.labelWidth === 'auto'">
    <label :for="labelFor" class="el-form-item__label" :style="labelStyle" v-if="label || $slots.label">
      <slot name="label">{{label + form.labelSuffix}}</slot>
    </label>
  </label-wrap>
  <div class="el-form-item__content" :style="contentStyle">
    <slot></slot>
   <transition name="el-zoom-in-top">
      <slot name="error">
        ...
      </slot>
    </transition>
  </div>
</div>
</template>

技巧解析

❝

Form需要一个slot
FormItem满足你，当然也可以是其他，比如，第三者tabel
Form还需要一个叫error的slot
FormItem也需要一个slot，只能是叫做label的slot喔

所以呢，表格表单可以混用，label和error可以自定义

❞

2 FormItem

事件系统

刚把车停到车位上，门口的保安大爷马上就跑过来敲玻璃

  • 你好，这是你的车位吗？
  • 我在这个小区住快一年了，每次我回来你都问我！你就算记不住我长啥样，也该把车号记住吧！
  • 对不起呀！大爷记性不好，总忘...呵呵...

我上去就给了大爷一个嘴巴子，然后撒腿就跑！大爷追了我半天，最后追不动了，站在那里气喘吁吁的喊道：
「我...我记住你了！你给我等着！」 还看，还不赶紧跑！！

代码片段

// FormItem
mounted() {
  if (this.prop) {
    this.dispatch('ElForm', 'el.form.addField', [this]);
    ...
  }
},

// Form
created() {
  this.$on('el.form.addField', (field) => {
    if (field) {
      this.fields.push(field);
    }
  });
  /* istanbul ignore next */
  this.$on('el.form.removeField', (field) => {
    if (field.prop) {
      this.fields.splice(this.fields.indexOf(field), 1);
    }
  });
},

技巧解析

❝

$on——事件绑定
$emit——事件触发
$off——事件取消
this.dispatch: mounted你给我等着，喂，是ElForm吗？暗号，el.form.addField

ElForm: 收到收到，el.form.addField，敌人还有30秒赶来...

发现没，$emit-$on，不仅仅是传递消息，更重要的是叫人
警察，别跑，站着别动 Vue组件通信之Bus 传送门

❞

3 LabelWrap

生命周期

吾十有五而志于学
三十而立
四十而不惑
五十而知天命
六十而耳顺
七十而从心所欲，不踰矩
这是一个人的一生，作为一个组件呢？
它从哪里来？又要到那里去？

代码片段

mounted() {
  this.updateLabelWidth('update');
},

updated() {
  this.updateLabelWidth('update');
},

beforeDestroy() {
  this.updateLabelWidth('remove');
}

技巧解析

❝

created：我出生了，会哭，不会说话
mounted: 我长牙啦，可以说话了
updated：真是女大十八变！
destroyed：我还想再看看这个世界
记住，一个阶段做一个阶段的事，千万别给自己太大压力喔

实例生命周期钩子 传送门

❞



「我只能送你到这里了」 「剩下的路你要自己走」

参考链接

往期回顾

avatar
文章
阅读
粉丝