當你使用Vue.js構建Web應用時，封裝可復用組件是提高開發效率和代碼可維護性的關鍵之一。在這篇文章中，我們將探討如何使用Vue.js來創建一個通用的表單組件，以及如何將它封裝成一個可配置的組件。

實現思路

• 拿下表單模板
• 一個個的改造（文本，下拉，單選，復選等）
• 按鈕
• 默認值的設定
• rules規則的處理

創建通用的form組件

這段代碼是一個Vue.js組件，用于創建一個動態表單。以下是對代碼的簡要解釋：

1. 在模板部分，使用`<el-form>`創建一個表單，綁定了`ruleForm`對象作為數據模型和`rules`對象作為驗證規則。
2. 使用`v-for`循環遍歷`data.items`，根據每個`item`的類型創建不同的表單元素，如輸入框、選擇框、開關、多選框、單選框、文本域、日期選擇器和時間選擇器。
3. 在`<el-form-item>`內部，根據`item.type`的不同，使用Vue指令`v-if`來渲染不同的表單元素。
4. 在腳本部分，定義了一個Vue組件，接受一個`data`對象作為屬性傳遞進來，初始化了`ruleForm`和`rules`對象。
5. 在`created`生命周期鉤子中，調用`init`方法初始化表單的默認值和驗證規則。
6. `init`方法根據每個`item`的類型，將默認值設置到`ruleForm`中。
7. 定義了`callSeif`方法，用于處理按鈕的點擊事件，包括提交表單和重置表單。
8. `submitForm`方法通過`validate`函數驗證表單的有效性，如果通過驗證，則執行回調函數。
9. `resetForm`方法用于重置表單，根據不同的表單元素類型清空表單字段。

這段代碼用于創建一個可配置的動態表單，通過傳入不同的配置數據，可以生成不同類型的表單，并在用戶交互時執行相應的操作。這是一個強大的工具，可用于快速構建各種表單頁面。如果需要更詳細的文章，請提供具體的方向或問題。

<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="data.width">
    <el-form-item :label="item.label" :prop="item.prop" v-for="(item, k) in data.items" :key="k">
      <el-input v-if="item.type == 'Input'" v-model="ruleForm[item.prop]" :placeholder="item.placeholder"
        :style="{ width: item.width }"></el-input>
      <el-select v-model="ruleForm[item.prop]" v-if="item.type == 'Select'" :placeholder="item.placeholder"
        :style="{ width: item.width }">
        <el-option v-for="(o, i) in item.options" :label="o.label" :value="o.value" :key="i"></el-option>
      </el-select>
      <el-switch v-model="ruleForm[item.prop]" v-if="item.type == 'Switch'"></el-switch>
      <el-checkbox-group v-model="ruleForm[item.prop]" v-if="item.type == 'Checkbox'">
        <el-checkbox :label="o.value" v-for="(o, i) in item.options" :key="i">{{
          item.label
        }}</el-checkbox>
      </el-checkbox-group>
      <el-radio-group v-model="ruleForm[item.prop]" v-if="item.type == 'Radio'">
        <el-radio :label="o.value" v-for="(o, i) in item.options" :key="i">{{
          item.label
        }}</el-radio>
      </el-radio-group>
      <el-col :span="item.span || 11">
        <el-input v-if="item.type == 'Textarea'" v-model="ruleForm[item.prop]" :placeholder="item.placeholder"
          type="textarea"></el-input>
      </el-col>
      <el-col :span="item.span || 5">
        <el-date-picker type="date" style="width: 100%" v-model="ruleForm[item.prop]" :placeholder="item.placeholder"
          v-if="item.type == 'Date'"></el-date-picker></el-col>
      <el-col :span="item.span || 5">
        <el-time-picker style="width: 100%" v-model="ruleForm[item.prop]" :placeholder="item.placeholder"
          v-if="item.type == 'Time'"></el-time-picker></el-col>
      <el-col :span="item.span || 5">
        <el-date-picker type="datetime" style="width: 100%" v-model="ruleForm[item.prop]" :placeholder="item.placeholder"
          v-if="item.type == 'Datetime'"></el-date-picker></el-col>
    </el-form-item>
    <el-form-item>
      <el-button :type="b.type" @click="callSeif('ruleForm', b.action, b.call)" v-for="(b, k) in data.buttons" :key="k">{{
        b.label }}</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  props: {
    data: Object,
  },
  name: "Form",
  data() {
    return {
      ruleForm: {},
      rules: {},
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let form = {};
      let box = [];
      this.data.items.forEach((item) => {
        switch (item.type) {
          case "Checkbox":
            if (item.default) {
              if (Array.isArray(item.default)) {
                box = box.concat(item.default);
              } else {
                box.push(item.default);
              }
            }
            form[item.prop] = box;
            break;
          case "Datetime":
            if (item.default) {
              form[item.prop] = new Date(item.default);
            }
            break;
          case "Time":
            if (item.default) {
              form[item.prop] = new Date(item.default);
            }
            break;
          case "Date":
            if (item.default) {
              form[item.prop] = new Date(item.default);
            }
            break;
          default:
            form[item.prop] = item.default;
            break;
        }
      });
      this.ruleForm = form;
      console.log(form);
      this.rules = this.data.rules
    },
    callSeif(formName, action, callback) {
      if (action == "submit") {
        this.submitForm(formName, callback);
      } else if (action == "reast") {
        this.resetForm(formName);
      } else {
        callback && callback();
      }
    },
    submitForm(formName, callback) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          callback && callback(this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      console.log("重置",);
      let form = {};

      this.data.items.forEach((item) => {
        switch (item.type) {
          case "Checkbox":
            form[item.prop] = [];
            break;
          default:
            form[item.prop] = '';
            break;
        }
      });
      this.ruleForm = form;
      this.$refs[formName].resetFields();
      console.log(this.ruleForm);
    },
  },
};
</script>

如何使用這個組件

現在，讓我們看看如何在Vue.js應用中使用這個通用的表單組件。首先，你需要導入這個組件并注冊它，然后可以在模板中使用它。

<template>
  <div class="table-page">
    <Form :data="formData"></Form>
  </div>
</template>
<script>
import Form from "./componentsdemo/form.vue";
export default {
  name: "Index",
  components: {
    Form,
  },

  data() {
    return {
      formData: {
        width: "180px",
        items: [
          {
            type: "Input",
            label: "活動名稱",
            prop: "name",
            width: "100px",
            placeholder: "請輸入活動區域",
            default: "請",
          },
          {
            type: "Select",
            placeholder: "請選擇活動區域",
            prop: "region",
            label: "活動區域",
            options: [
              {
                label: "區域一",
                value: "shanghai",
              },
              {
                label: "區域二",
                value: "beijing",
              },
            ],
            default: "shanghai",
          },
          {
            type: "Switch",
            label: "即時配送",
            prop: "delivery",
            default: true,
          },
          {
            type: "Checkbox",
            label: "活動性質",
            prop: "type",
            options: [
              {
                label: "線下主題活動",
                value: "1",
              },
              {
                label: "單純品牌曝光",
                value: "2",
              },
            ],
            default: ["1", "2"],
          },
          {
            type: "Radio",
            label: "特殊資源",
            prop: "resource",
            options: [
              {
                label: "線下主題活動",
                value: "a",
              },
              {
                label: "單純品牌曝光",
                value: "b",
              },
            ],
            default: 'a',
          },
          {
            type: "Textarea",
            label: "活動形式",
            prop: "desc",
            placeholder: "請輸入活動形式",
            span: 10,
            default: '活動',
          },
          {
            type: "Date",
            label: "活動日期",
            prop: "data1",
            placeholder: "請輸入活動日期",
            span: 10,
            default: '2023-08-21',
          },
          {
            type: "Time",
            label: "活動時間",
            prop: "data2",
            placeholder: "請輸入活動時間",
            span: 10,
            default: '2023-08-21 12:00:00',
          },
          {
            type: "Datetime",
            label: "活動日期時間",
            prop: "data3",
            placeholder: "請輸入活動日期時間",
            span: 10,
            default: '2023-08-21 12:00:00',
          },
        ],
        buttons: [
          {
            label: "確定",
            type: "text",
            action: "submit",
            call: (Form) => {
              console.log(Form);
            },
          },
          {
            label: "重置",
            type: "text",
            action: "reast",
            call: () => {
              console.log("reast");
            },
          },
        ],
        rules: {
          // name: [
          //   { required: true, message: "請輸入活動名稱", trigger: "blur" },
          //   { min: 3, max: 5, message: "長度在 3 到 5 個字符", trigger: "blur" },
          // ],
          region: [{ required: true, message: "請選擇活動區域", trigger: "change" }],
          date1: [
            { type: "date", required: true, message: "請選擇日期", trigger: "change" },
          ],
          date2: [
            { type: "date", required: true, message: "請選擇時間", trigger: "change" },
          ],
          type: [
            {
              type: "array",
              required: true,
              message: "請至少選擇一個活動性質",
              trigger: "change",
            },
          ],
          resource: [{ required: true, message: "請選擇活動資源", trigger: "change" }],
          desc: [{ required: true, message: "請填寫活動形式", trigger: "blur" }],

        }
      },
    };
  },
  methods: {},
};
</script>

在上述示例中，我們首先導入了通用下拉選擇框組件，然后在模板中使用它，并將需要的數據傳遞給它。當選擇項發生變化時，我們可以通過@change事件來處理選擇結果。

結語

通過封裝通用組件，我們可以在Vue.js應用中輕松地實現重復使用的功能，提高開發效率并減少重復工作。通用表單組件是一個很好的例子，它可以根據不同的需求進行配置，使其適用于多種情況。希望本文對你理解如何創建和使用Vue.js組件有所幫助！
?