學習Element思想-設計實現表單組件

​

組件化思想

第三方組件應用

• Element-UI：http://element-cn.eleme.io/
• element集成：vue add element
• 組件使用：創建一個登陸表單並可以校驗用戶輸入

<code><template>
 

  
Element表單

    

    <el-form>
     <el-form-item>
      <el-input>
     /<el-form-item>
     <el-form-item>
      <el-input>
  /<el-input>
     /<el-form-item>
     <el-form-item>
      <el-button>提交  button>
     /<el-button>/<el-form-item>
    /<el-form> 

   

/<template>
/<code>

• 使用時我們要先導入Form、FormItem、Input
• import { Button,Form,FormItem,Input } from 'element-ui'
• 然後添加到vue實例上Vue.use(Form)、Vue.use(FormItem)、Vue.use(Input)

組件設計：實現Form、FormItem、Input

核心關注：

1. Form怎麼跨組件傳數據
2. FormItem怎麼執行校驗
3. Input怎麼實現雙向綁定

實現Input

• 任務1：實現input組件雙向綁定的功能

v-model是語法糖糖，實現自定義組件雙綁只需要指定:value和@input即可

• 任務2：值發生變化能夠通知FormItem組件

<code><template>
  

    
  

/<template>
/<code>

實現FormItem

• 任務1：給Input預留插槽 - slot
• 任務2：能夠展示label和校驗信息
• 任務3：能夠進行校驗

<code>onInput(e) {
// ...
// $parent指FormItem
this.$parent.$emit('validate');
}/<code>

實現Form

• 給form-item預留槽位
• 將數據傳遞給後代便於它們訪問數據模型和校驗規則

provide && inject

<code>inject: ['form'], // 注入
mounted(){// 監聽校驗事件
  this.$on('validate', this.validate)
},
methods: {
  validate() {
      // 獲取對應FormItem校驗規則
      console.log(this.form.rules[this.prop]); 

      // 獲取校驗值
      console.log(this.form.model[this.prop]);
  }
},/<code>

數據校驗

• 思路：校驗發生在FormItem，它需要知道何時校驗（讓Input通知它），還需要知道怎麼校驗（注入校驗規則）

<code>inject: ['form'], // 注入
mounted(){// 監聽校驗事件
  this.$on('validate', this.validate)
},
methods: {
  validate() {
      // 獲取對應FormItem校驗規則
      console.log(this.form.rules[this.prop]);
      // 獲取校驗值
      console.log(this.form.model[this.prop]);
  }
},/<code>

• 任務1：Input通知校驗
• 任務2：FormItem監聽校驗通知，獲取規則並執行校驗

<code>inject: ['form'], // 注入
mounted(){// 監聽校驗事件
  this.$on('validate', this.validate)
},
methods: {
  validate() {
      // 獲取對應FormItem校驗規則 

      console.log(this.form.rules[this.prop]);
      // 獲取校驗值
      console.log(this.form.model[this.prop]);
  }
},/<code>

• 安裝async-validator

npm i async-validator -S

<code>import schema from "async-validator";
validate() {
   // 獲取對應FormItem校驗規則
   const rules = this.form.rules[this.prop];
   // 獲取校驗值
   const value = this.form.model[this.prop];
   // 校驗描述對象
   const descriptor = { [this.prop]: rules };
   // 創建校驗器
   const schema = new Schema(descriptor);
   schema.validate({ [this.prop]: value }, errors => {
    if (errors) {
     // 將錯誤信息顯示
     this.error = errors[0].message;
   } else {
     // 校驗通過
     this.error = "";
   }
  });
}/<code>

運行結果

console.log 加 debugger 找到原因

prop="username"

FormItem缺少這個屬性，就會導致上面錯誤出現。

主要是代碼實現的不夠健壯，沒有對校驗進行兜底處理。

結語

搬磚的時候有時我會碰到一種狀態：著相。陷入自己的模式裡無法自拔，進入一種死循環的狀態，很明顯的錯誤卻發現不了。這種時候尋求隊友幫忙換一種思路，或者出去透氣把自己解脫出來，可能就會豁然開朗。

使用vue組件化時候，難免也會帶有個人色彩，可能與個人經驗和思考方式有關係。這種情況我覺得不是減少或者避免，而是需要優化。

只要自己看過足夠多的好架構、好設計，自然會不斷的借鑑靠近他們，慢慢地自己思想會跟著提升，然後在實踐中應用，驗證。

如此，這個正循環會使自己源源不斷受益。

閱讀更多 WangXiui 的文章

關鍵字: 設計 組件 表單