VitePress

组件化 ​

Web 前端组件化指的是将用户界面

。使每个组件都有自己独立的 结构、样式 和 行为。 可提高代码的 可重用性 和 可维护性。

常见组件form表单 ​

form表单是项目中很常的元素，其中就各种输入控件，例如文本框、选择框、复选框、单选按钮等，以及提交按钮。

如果以传统的方式写，会出很复杂的逻辑。如果将其改为组件化，就简单了，

js
/***
 * 使用`if`条件？
 */

 <el-form :model="form" label-width="auto" style="max-width: 600px">
    <el-form-item label="Activity name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="Activity zone">
      <el-select v-model="form.region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Activity time">
      <el-col :span="11">
        <el-date-picker
          v-model="form.date1"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
      <el-col :span="2" class="text-center">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-time-picker
          v-model="form.date2"
          placeholder="Pick a time"
          style="width: 100%"
        />
      </el-col>
    </el-form-item>
    <el-form-item label="Instant delivery">
      <el-switch v-model="form.delivery" />
    </el-form-item>
    <el-form-item label="Activity type">
      <el-checkbox-group v-model="form.type">
        <el-checkbox value="Online activities" name="type">
          Online activities
        </el-checkbox>
        <el-checkbox value="Promotion activities" name="type">
          Promotion activities
        </el-checkbox>
        <el-checkbox value="Offline activities" name="type">
          Offline activities
        </el-checkbox>
        <el-checkbox value="Simple brand exposure" name="type">
          Simple brand exposure
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="Resources">
      <el-radio-group v-model="form.resource">
        <el-radio value="Sponsor">Sponsor</el-radio>
        <el-radio value="Venue">Venue</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Activity form">
      <el-input v-model="form.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
  </el-form>
js
/***
 * 自定义参数配置
 */
// 引入组件
<Form ref="formFieldsRef" :list="controlList"></Form>
// 参数配置
controlList: [
    { 
        label: "藏馆名称", 
        field: "library_name", 
        control: "input", 
        maxlength: 20,
        rules: [validateRequired("请输入藏馆名称")]
    },
    { 
        label: "楼层", 
        field: "library_floor", 
        control: "select", 
        options: useDictList('floorModules'),
        rules: [validateRequired("请选择楼层")]
    },
    { 
        label: "文献类型", 
        field: "literature_id", 
        type: 'slot',
        slotName: "literatureType",
        rules: [validateRequired("请选择文献类型")]
    },
    { 
        label: "咨询电话", 
        field: "library_tel", 
        control: "input", 
        maxlength: 20,
        rules: [validateRequired("请输入咨询电话")]
    },
    { 
        label: "投诉电话", 
        field: "consult_tel", 
        control: "input", 
        maxlength: 20,
        rules: [validateRequired("请输入投诉电话")]
    },
    { 
        label: "藏馆状态", 
        field: "library_status", 
        control: "select", 
        options: useDictList('libraryStatusModules'),
        rules: [validateRequired("请选择藏馆状态")]
    },
    { 
        label: "建馆日期", 
        field: "library_date", 
        control: "date", 
        showTime: false,
        valueFormat: "YYYY-MM-DD",
        rules: [validateRequired("请选择建馆日期")]
    },
    { 
        label: "藏馆管理员", 
        field: "library_admin", 
        control: "select", 
        id: "member_id",
        name: "username",
        mode: "multiple",
        optionsAsync: useGetUserAll,
        rules: [validateRequired("请选择藏馆管理员")]
    },
    { 
        label: "藏馆邮箱", 
        field: "library_email", 
        control: "input", 
        maxlength: 20,
        rules: [validateRequired("请输入藏馆邮箱")]
    },
    { 
        label: "省市区", 
        field: "area", 
        control: "area", 
        name: "name",
        id: "code",
        defaultValue: [],
        rules: [validateRequired("请选择省市区")]
    },
    { 
        label: "详细地址", 
        field: "address", 
        control: "textarea", 
        maxlength: 500,
        rules: [validateRequired("请输入详细地址")]
    },
],

常见组件table表格 ​

js
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="150" />
    <el-table-column label="Delivery Info">
      <el-table-column prop="name" label="Name" width="120" />
      <el-table-column label="Address Info">
        <el-table-column prop="state" label="State" width="120" />
        <el-table-column prop="city" label="City" width="120" />
        <el-table-column prop="address" label="Address" />
        <el-table-column prop="zip" label="Zip" width="120" />
      </el-table-column>
    </el-table-column>
  </el-table>
</template>
js
/***
 * 自定义参数配置
 */
<Table ref="tabelRef" :data="dataList" :column="column" :operation="false" />
export const column = [
    {
        title: "角色名称",
        field: "role_name",
    },
    {
        title: "角色描述",
        field: "role_describe"
    },
    {
        title: "角色成员",
        type: "slot",
        slotName: "roleMembers",
        field: "roleMembers",
    },
    {
        title: "创建时间",
        field: "booktotal",

    },
    {
        type: "slot",
        slotName: "status",
        title: "状态",
        field: "role_status"
    },
    {
        type: "operation",
        width: '320px'
    }
]