【Vue3+Vite+TS】13.0 组件十：强大的表单组件(上)

最新推荐文章于 2024-05-27 14:31:43 发布
最新推荐文章于 2024-05-27 14:31:43 发布
阅读量197 收藏
点赞数
文章标签： vue.js 前端 javascript ui ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013002228/article/details/130433557
版权

功能

    1. 可配置型表单，通过json对象的方式自动生成表单
    1. 具备更完善的功能：表单验证、自定义验证规则、动态删减表单、集成第三方的插件
    1. 用法简单，扩展性强，可维护性强
    1. 能够用在更多的场景，比如弹框嵌套表单

准备工作

  1. 分析element-plus表单能够在那些方面做优化
  2. 完善封装表单的类型，支持ts
  3. 封装的表单要具备element-plus原表单的所有功能
  4. 集成第三方插件：markdown编辑器、富文本编辑器(
    比如WangEditor)
必备UI组件

将用到的组件：
很多，涉及到表单的所有组件。
第三方组件：WangEditor

组件设计

新建src\components\baseline\form\index.ts

import { App } from 'vue'
import Form from './src/index.vue'

export { Form }

//组件可通过use的形式使用
export default {
  Form,
    install(app: App) {
        app.component('bs-form', Form)
    },
}

调整src\components\baseline\index.ts

import { App } from 'vue'
import ChooseArea from './chooseArea'
import ChooseIcon from './chooseIcon'
import Container from './container'
import Trend from './trend'
import Notification from './notification'
import List from './list'
import Menu from './menu'
import Progress from './progress'
import ChooseTime from './chooseTime'
import ChooseDate from './chooseDate'
import ChooseCity from './chooseCity'
import Form from './form'
const components = [
    ChooseArea,
    ChooseIcon,
    Container,
    Trend,
    Notification,
    List,
    Menu,
    Progress,
    ChooseTime,
    ChooseDate,
    ChooseCity,
    Form,
]
export {
    ChooseArea,
    ChooseIcon,
    Container,
    Trend,
    Notification,
    List,
    Menu,
    Progress,
    ChooseTime,
    ChooseDate,
    ChooseCity,
    Form,
}

//组件可通过use的形式使用
export default {
    install(app: App) {
        components.map(item => {
            app.use(item)
        })
    },
    ChooseArea,
    ChooseIcon,
    Container,
    Trend,
    Notification,
    List,
    Menu,
    Progress,
    ChooseTime,
    ChooseDate,
    ChooseCity,
    Form,
}

路由增加,调整src\router\index.ts

{
                path: '/form',
                component: () => import('../views/baseline/form/index.vue'),
            },

新增src\views\baseline\form\index.vue

<template>
    <div class="bs-wrapper">
        <bs-form :options="options"></bs-form>
    </div>
</template>
<script lang="ts" setup>
import { FormOptions } from '@/components/baseline/form/src/types/types'

let options: FormOptions[] = [
    {
        type: 'input',
        value: '',
        label: '用户名',
        rules: [
            {
                required: true,
                message: '用户名不能为空',
                trigger: 'blur',
            },
            {
                min: 2,
                max: 10,
                message: '用户名长度在2-10位之间',
                trigger: 'blur',
            },
        ],
        attrs: {
            showPassword: true,
        },
    },
]
</script>
<style lang="scss" scoped></style>

到此，基本结构搭建完毕。

如果需要做到表单通过json自动配置组合，需要建立一套完整的ts类型限制。
新建src\components\baseline\form\src\types\types.ts

import { CSSProperties } from 'vue'
import { RuleItem } from './rule'

import { ValidateFieldsError } from 'async-validator'
interface Callback {
    (isValid?: boolean, invalidFields?: ValidateFieldsError): void
}

/**
 * 表单每一项的配置选项
 */
export interface FormOptions {
    // 表单项显示的元素
    type:
        | 'cascader'//级联选择器
        | 'checkbox'//多选框
        | 'checkbox-group'
        | 'checkbox-button'
        | 'color-picker'
        | 'date-picker'
        | 'input'
        | 'input-number'
        | 'radio'
        | 'radio-group'
        | 'radio-button'
        | 'rate'
        | 'select'
        | 'option'
        | 'slider'
        | 'switch'
        | 'time-picker'
        | 'time-select'
        | 'transfer'//穿梭框
        | 'upload'
        | 'editor'
    // 表单项的值
    value?: any
    // 表单项label
    label?: string
    // 表单项的标识
    prop?: string
    // 表单项的验证规则
    rules?: RuleItem[]//基于async-validator规则验证
    // 表单项的占位符
    placeholder?: string
    // 表单元素特有的属性
    attrs?: {
        // css样式
        style?: CSSProperties
        clearable?: boolean
        showPassword?: boolean
        disabled?: boolean
    }
    // 表单项的子元素
    children?: FormOptions[]
    // 处理上传组件的属性和方法
    uploadAttrs?: {
        action: string
        headers?: object
        method?: 'post' | 'put' | 'patch'
        multiple?: boolean
        data?: any
        name?: string
        withCredentials?: boolean
        showFileList?: boolean
        drag?: boolean
        accept?: string
        thumbnailMode?: boolean
        fileList?: any[]
        listType?: 'text' | 'picture' | 'picture-card'
        autoUpload?: boolean
        disabled?: boolean
        limit?: number
    }
}

export interface ValidateFieldCallback {
    (message?: string, invalidFields?: ValidateFieldsError): void
}

export interface FormInstance {
    registerLabelWidth(width: number, oldWidth: number): void
    deregisterLabelWidth(width: number): void
    autoLabelWidth: string | undefined
    emit: (evt: string, ...args: any[]) => void
    labelSuffix: string
    inline?: boolean
    model?: Record<string, unknown>
    size?: string
    showMessage?: boolean
    labelPosition?: string
    labelWidth?: string
    rules?: Record<string, unknown>
    statusIcon?: boolean
    hideRequiredAsterisk?: boolean
    disabled?: boolean
    validate: (callback?: Callback) => Promise<boolean>
    resetFields: () => void
    clearValidate: (props?: string | string[]) => void
    validateField: (props: string | string[], cb: ValidateFieldCallback) => void
}

新建src\components\baseline\form\src\types\rule.ts
该文件从async-validator规则验证github项目中复制出来的，不需要自己思考文件内容。

export type RuleType =
  | 'string'
  | 'number'
  | 'boolean'
  | 'method'
  | 'regexp'
  | 'integer'
  | 'float'
  | 'array'
  | 'object'
  | 'enum'
  | 'date'
  | 'url'
  | 'hex'
  | 'email'
  | 'pattern'
  | 'any';

export interface ValidateOption {
  // whether to suppress internal warning
  suppressWarning?: boolean;

  // when the first validation rule generates an error stop processed
  first?: boolean;

  // when the first validation rule of the specified field generates an error stop the field processed, 'true' means all fields.
  firstFields?: boolean | string[];

  messages?: Partial<ValidateMessages>;

  /** The name of rules need to be trigger. Will validate all rules if leave empty */
  keys?: string[];

  error?: (rule: InternalRuleItem, message: string) => ValidateError;
}

export type SyncErrorType = Error | string;
export type SyncValidateResult = boolean | SyncErrorType | SyncErrorType[];
export type ValidateResult = void | Promise<void> | SyncValidateResult;

export interface RuleItem {
  type?: RuleType; // default type is 'string'
  required?: boolean;
  pattern?: RegExp | string;
  min?: number; // Range of type 'string' and 'array'
  max?: number; // Range of type 'string' and 'array'
  len?: number; // Length of type 'string' and 'array'
  enum?: Array<string | number | boolean | null | undefined>; // possible values of type 'enum'
  whitespace?: boolean;
  trigger?: string | string[];
  fields?: Record<string, Rule>; // ignore when without required
  options?: ValidateOption;
  defaultField?: Rule; // 'object' or 'array' containing validation rules
  transform?: (value: Value) => Value;
  message?: string | ((a?: string) => string);
  asyncValidator?: (
    rule: InternalRuleItem,
    value: Value,
    callback: (error?: string | Error) => void,
    source: Values,
    options: ValidateOption,
  ) => void | Promise<void>;
  validator?: (
    rule: InternalRuleItem,
    value: Value,
    callback: (error?: string | Error) => void,
    source: Values,
    options: ValidateOption,
  ) => SyncValidateResult | void;
}

export type Rule = RuleItem | RuleItem[];

export type Rules = Record<string, Rule>;

/**
 *  Rule for validating a value exists in an enumerable list.
 *
 *  @param rule The validation rule.
 *  @param value The value of the field on the source object.
 *  @param source The source object being validated.
 *  @param errors An array of errors that this rule may add
 *  validation errors to.
 *  @param options The validation options.
 *  @param options.messages The validation messages.
 *  @param type Rule type
 */
export type ExecuteRule = (
  rule: InternalRuleItem,
  value: Value,
  source: Values,
  errors: string[],
  options: ValidateOption,
  type?: string,
) => void;

/**
 *  Performs validation for any type.
 *
 *  @param rule The validation rule.
 *  @param value The value of the field on the source object.
 *  @param callback The callback function.
 *  @param source The source object being validated.
 *  @param options The validation options.
 *  @param options.messages The validation messages.
 */
export type ExecuteValidator = (
  rule: InternalRuleItem,
  value: Value,
  callback: (error?: string[]) => void,
  source: Values,
  options: ValidateOption,
) => void;

// >>>>> Message
type ValidateMessage<T extends any[] = unknown[]> =
  | string
  | ((...args: T) => string);
type FullField = string | undefined;
type EnumString = string | undefined;
type Pattern = string | RegExp | undefined;
type Range = number | undefined;
type Type = string | undefined;

export interface ValidateMessages {
  default?: ValidateMessage;
  required?: ValidateMessage<[FullField]>;
  enum?: ValidateMessage<[FullField, EnumString]>;
  whitespace?: ValidateMessage<[FullField]>;
  date?: {
    format?: ValidateMessage;
    parse?: ValidateMessage;
    invalid?: ValidateMessage;
  };
  types?: {
    string?: ValidateMessage<[FullField, Type]>;
    method?: ValidateMessage<[FullField, Type]>;
    array?: ValidateMessage<[FullField, Type]>;
    object?: ValidateMessage<[FullField, Type]>;
    number?: ValidateMessage<[FullField, Type]>;
    date?: ValidateMessage<[FullField, Type]>;
    boolean?: ValidateMessage<[FullField, Type]>;
    integer?: ValidateMessage<[FullField, Type]>;
    float?: ValidateMessage<[FullField, Type]>;
    regexp?: ValidateMessage<[FullField, Type]>;
    email?: ValidateMessage<[FullField, Type]>;
    url?: ValidateMessage<[FullField, Type]>;
    hex?: ValidateMessage<[FullField, Type]>;
  };
  string?: {
    len?: ValidateMessage<[FullField, Range]>;
    min?: ValidateMessage<[FullField, Range]>;
    max?: ValidateMessage<[FullField, Range]>;
    range?: ValidateMessage<[FullField, Range, Range]>;
  };
  number?: {
    len?: ValidateMessage<[FullField, Range]>;
    min?: ValidateMessage<[FullField, Range]>;
    max?: ValidateMessage<[FullField, Range]>;
    range?: ValidateMessage<[FullField, Range, Range]>;
  };
  array?: {
    len?: ValidateMessage<[FullField, Range]>;
    min?: ValidateMessage<[FullField, Range]>;
    max?: ValidateMessage<[FullField, Range]>;
    range?: ValidateMessage<[FullField, Range, Range]>;
  };
  pattern?: {
    mismatch?: ValidateMessage<[FullField, Value, Pattern]>;
  };
}

export interface InternalValidateMessages extends ValidateMessages {
  clone: () => InternalValidateMessages;
}

// >>>>> Values
export type Value = any;
export type Values = Record<string, Value>;

// >>>>> Validate
export interface ValidateError {
  message?: string;
  fieldValue?: Value;
  field?: string;
}

export type ValidateFieldsError = Record<string, ValidateError[]>;

export type ValidateCallback = (
  errors: ValidateError[] | null,
  fields: ValidateFieldsError | Values,
) => void;

export interface RuleValuePackage {
  rule: InternalRuleItem;
  value: Value;
  source: Values;
  field: string;
}

export interface InternalRuleItem extends Omit<RuleItem, 'validator'> {
  field?: string;
  fullField?: string;
  fullFields?: string[];
  validator?: RuleItem['validator'] | ExecuteValidator;
}
组件完善

新建src\components\baseline\form\src\index.vue

<template>
    <div>
        <el-form>
            <el-form-item v-for="(item, index) in options" :key="index">
                <component :is="`el-${item.type}`"></component>
            </el-form-item>
        </el-form>
    </div>
</template>
<script lang="ts" setup>
import { PropType } from 'vue'
import { FormOptions } from './types/types'
let props = defineProps({
    options: {
        type: Array as PropType<FormOptions[]>,
        required: true,
    },
})
</script>
<style lang="scss" scoped></style>

运行效果如下：

image.png

优化：

<el-form-item
                :label="item.label"
                v-for="(item, index) in options"
                :key="index"
            >
                <component :is="`el-${item.type}`"></component>
            </el-form-item>

效果如下：

image.png

表单本身属性扩展：

<el-form v-bind="$attrs">
            <el-form-item
                :label="item.label"
                v-for="(item, index) in options"
                :key="index"
            >
                <component :is="`el-${item.type}`"></component>
            </el-form-item>
        </el-form>

修改src\views\baseline\form\index.vue

<template>
    <div class="bs-wrapper">
        <bs-form label-width="1rem" :options="options"></bs-form>
    </div>
</template>
<script lang="ts" setup>
import { FormOptions } from '@/components/baseline/form/src/types/types'

let options: FormOptions[] = [
    {
        type: 'input',
        value: '',
        label: '用户名',
        rules: [
            {
                required: true,
                message: '用户名不能为空',
                trigger: 'blur',
            },
            {
                min: 2,
                max: 10,
                message: '用户名长度在2-10位之间',
                trigger: 'blur',
            },
        ],
        attrs: {
            showPassword: true,
        },
    },
    {
        type: 'input',
        value: '',
        label: '密码',
        rules: [
            {
                required: true,
                message: '密码不能为空',
                trigger: 'blur',
            },
            {
                min: 6,
                max: 20,
                message: '密码长度在6-20位之间',
                trigger: 'blur',
            },
        ],
        attrs: {
            showPassword: true,
        },
    },
]
</script>
<style lang="scss" scoped></style>

效果如下：

image.png

这里需要用到深拷贝，建议使用一个很好地第三方js工具库：

npm i -S lodash @types/lodash

优化src\components\baseline\form\src\index.vue

<template>
    <div>
        <!-- validate-on-rule-change="false"不需要一进来就验证 -->
        <el-form
            :validate-on-rule-change="false"
            :model="model"
            :rules="rules"
            v-bind="$attrs"
        >
            <el-form-item
                :prop="item.prop"
                :label="item.label"
                v-for="(item, index) in options"
                :key="index"
            >
                <component
                    v-bind="item.attrs"
                    :is="`el-${item.type}`"
                    v-model="model[item.prop!]"
                ></component>
            </el-form-item>
        </el-form>
    </div>
</template>
<script lang="ts" setup>
import { PropType, ref, onMounted } from 'vue'
import { FormOptions } from './types/types'
let props = defineProps({
    options: {
        type: Array as PropType<FormOptions[]>,
        required: true,
    },
})
//局部引入，深拷贝
import cloneDeep from 'lodash/cloneDeep'

const model = ref<any>({})
const rules = ref<any>({})

onMounted(() => {
    let m: any = {}
    let r: any = {}
    props.options.map((item: FormOptions) => {
        m[item.prop!] = item.value
        r[item.prop!] = item.rules
    })
    model.value = cloneDeep(m)
    rules.value = cloneDeep(r)
    console.log('model', model.value)
    console.log('rules', rules.value)
})
</script>
<style lang="scss" scoped></style>

调整src\views\baseline\form\index.vue

<template>
    <div class="bs-wrapper">
        <bs-form label-width="1rem" :options="options"></bs-form>
    </div>
</template>
<script lang="ts" setup>
import { FormOptions } from '@/components/baseline/form/src/types/types'

let options: FormOptions[] = [
    {
        type: 'input',
        value: '',
        label: '用户名',
        prop: 'username',
        rules: [
            {
                required: true,
                message: '用户名不能为空',
                trigger: 'blur',
            },
            {
                min: 2,
                max: 10,
                message: '用户名长度在2-10位之间',
                trigger: 'blur',
            },
        ],
        attrs: {
            clearable: true,
        },
    },
    {
        type: 'input',
        value: '',
        label: '密码',
        prop: 'password',
        rules: [
            {
                required: true,
                message: '密码不能为空',
                trigger: 'blur',
            },
            {
                min: 6,
                max: 20,
                message: '密码长度在6-20位之间',
                trigger: 'blur',
            },
        ],
        attrs: {
            showPassword: true,
            clearable: true,
        },
    },
]
</script>
<style lang="scss" scoped></style>

效果基本完成：

image.png
子元素组件

像select，是存在option子元素的，调整如下：
修改src\views\baseline\form\index.vue

<template>
    <div class="bs-wrapper">
        <bs-form label-width="1rem" :options="options"></bs-form>
    </div>
</template>
<script lang="ts" setup>
import { FormOptions } from '@/components/baseline/form/src/types/types'

let options: FormOptions[] = [
    {
        type: 'input',
        value: '',
        label: '用户名',
        prop: 'username',
        placeholder: '请输入用户名',
        rules: [
            {
                required: true,
                message: '用户名不能为空',
                trigger: 'blur',
            },
            {
                min: 2,
                max: 10,
                message: '用户名长度在2-10位之间',
                trigger: 'blur',
            },
        ],
        attrs: {
            clearable: true,
        },
    },
    {
        type: 'input',
        value: '',
        label: '密码',
        prop: 'password',
        placeholder: '请输入6-20位密码',
        rules: [
            {
                required: true,
                message: '密码不能为空',
                trigger: 'blur',
            },
            {
                min: 6,
                max: 20,
                message: '密码长度在6-20位之间',
                trigger: 'blur',
            },
        ],
        attrs: {
            showPassword: true,
            clearable: true,
        },
    },
    {
        type: 'select',
        value: '1',//初始化表单数据
        label: '职位',
        prop: 'role',
        placeholder: '请选择职位',
        rules: [
            {
                required: true,
                message: '职位不能为空',
                trigger: 'blur',
            },
        ],
        children: [
            { type: 'option', label: '经理', value: '1' },
            { type: 'option', label: '主管', value: '2' },
            { type: 'option', label: '员工', value: '3' },
        ],
    },
]
</script>
<style lang="scss" scoped></style>

修改src\components\baseline\form\src\index.vue

<template>
    <div class="bs-wrapper">
        <bs-form label-width="1rem" :options="options"></bs-form>
    </div>
</template>
<script lang="ts" setup>
import { FormOptions } from '@/components/baseline/form/src/types/types'

let options: FormOptions[] = [
    {
        type: 'input',
        value: '',
        label: '用户名',
        prop: 'username',
        placeholder: '请输入用户名',
        rules: [
            {
                required: true,
                message: '用户名不能为空',
                trigger: 'blur',
            },
            {
                min: 2,
                max: 10,
                message: '用户名长度在2-10位之间',
                trigger: 'blur',
            },
        ],
        attrs: {
            clearable: true,
        },
    },
    {
        type: 'input',
        value: '',
        label: '密码',
        prop: 'password',
        placeholder: '请输入6-20位密码',
        rules: [
            {
                required: true,
                message: '密码不能为空',
                trigger: 'blur',
            },
            {
                min: 6,
                max: 20,
                message: '密码长度在6-20位之间',
                trigger: 'blur',
            },
        ],
        attrs: {
            showPassword: true,
            clearable: true,
        },
    },
    {
        type: 'select',
        value: '1',//初始化表单数据
        label: '职位',
        prop: 'role',
        placeholder: '请选择职位',
        rules: [
            {
                required: true,
                message: '职位不能为空',
                trigger: 'blur',
            },
        ],
        children: [
            { type: 'option', label: '经理', value: '1' },
            { type: 'option', label: '主管', value: '2' },
            { type: 'option', label: '员工', value: '3' },
        ],
    },
]
</script>
<style lang="scss" scoped></style>

效果如下：

image.png
style样式增加

修改src\views\baseline\form\index.vue

<template>
    <div class="bs-wrapper">
        <bs-form label-width="1rem" :options="options"></bs-form>
    </div>
</template>
<script lang="ts" setup>
import { FormOptions } from '@/components/baseline/form/src/types/types'

let options: FormOptions[] = [
    {
        type: 'input',
        value: '',
        label: '用户名',
        prop: 'username',
        placeholder: '请输入用户名',
        rules: [
            {
                required: true,
                message: '用户名不能为空',
                trigger: 'blur',
            },
            {
                min: 2,
                max: 10,
                message: '用户名长度在2-10位之间',
                trigger: 'blur',
            },
        ],
        attrs: {
            clearable: true,
        },
    },
    {
        type: 'input',
        value: '',
        label: '密码',
        prop: 'password',
        placeholder: '请输入6-20位密码',
        rules: [
            {
                required: true,
                message: '密码不能为空',
                trigger: 'blur',
            },
            {
                min: 6,
                max: 20,
                message: '密码长度在6-20位之间',
                trigger: 'blur',
            },
        ],
        attrs: {
            showPassword: true,
            clearable: true,
        },
    },
    {
        type: 'select',
        value: '1', //初始化表单数据
        label: '职位',
        prop: 'role',
        placeholder: '请选择职位',
        rules: [
            {
                required: true,
                message: '职位不能为空',
                trigger: 'blur',
            },
        ],
        children: [
            { type: 'option', label: '经理', value: '1' },
            { type: 'option', label: '主管', value: '2' },
            { type: 'option', label: '员工', value: '3' },
        ],
        attrs: {
            style: {
                width: '100%',
            },
        },
    },
    {
        type: 'checkbox-group',
        value: [],
        prop: 'like',
        label: '爱好',
        rules: [
            {
                required: true,
                message: '爱好不能为空',
                trigger: 'blur',
            },
        ],
        children: [
            {
                type: 'checkbox',
                label: '足球',
                value: '1',
            },
            {
                type: 'checkbox',
                label: '篮球',
                value: '1',
            },
            {
                type: 'checkbox',
                label: '乒乓球',
                value: '3',
            },
        ],
    },
    {
        type: 'radio-group',
        value: '',
        prop: 'gender',
        label: '性别',
        rules: [
            {
                required: true,
                message: '性别不能为空',
                trigger: 'blur',
            },
        ],
        children: [
            {
                type: 'radio',
                label: '男',
                value: '1',
            },
            {
                type: 'radio',
                label: '女',
                value: '2',
            },
            {
                type: 'radio',
                label: '保密',
                value: '3',
            },
        ],
    },
]
</script>
<style lang="scss" scoped></style>

修改src\components\baseline\form\src\index.vue

<template>
    <div>
        <!-- validate-on-rule-change="false"不需要一进来就验证 -->
        <el-form
            ref="form"
            v-if="model"
            :validate-on-rule-change="false"
            :model="model"
            :rules="rules"
            v-bind="$attrs"
        >
            <template v-for="(item, index) in options" :key="index">
                <el-form-item
                    :prop="item.prop"
                    :label="item.label"
                    v-if="!item.children || !item.children!.length"
                >
                    <component
                        :placeholder="item.placeholder"
                        v-bind="item.attrs"
                        :is="`el-${item.type}`"
                        v-model="model[item.prop!]"
                    ></component>
                </el-form-item>
                <el-form-item
                    :prop="item.prop"
                    :label="item.label"
                    v-if="item.children && item.children.length"
                >
                    <component
                        v-bind="item.attrs"
                        :placeholder="item.placeholder"
                        :is="`el-${item.type}`"
                        v-model="model[item.prop!]"
                    >
                        <component
                            v-for="(child, i) in item.children"
                            :key="i"
                            :label="child.label"
                            :value="child.value"
                            :is="`el-${child.type}`"
                        ></component>
                    </component>
                </el-form-item>
            </template>
        </el-form>
    </div>
</template>
<script lang="ts" setup>
import { PropType, ref, onMounted, watch } from 'vue'
import { FormOptions } from './types/types'
let props = defineProps({
    options: {
        type: Array as PropType<FormOptions[]>,
        required: true,
    },
})
//局部引入，深拷贝
import cloneDeep from 'lodash/cloneDeep'

const model = ref<any>()
const rules = ref<any>()

const initForm = () => {
    let m: any = {}
    let r: any = {}
    props.options.map((item: FormOptions) => {
        m[item.prop!] = item.value
        r[item.prop!] = item.rules
    })
    model.value = cloneDeep(m)
    rules.value = cloneDeep(r)
    console.log('model', model.value)
    console.log('rules', rules.value)
}

onMounted(() => {
    if (props.options && props.options.length) {
        initForm()
    }
})
//监听父组件传递进来的options的变化
watch(
    () => props.options,
    val => {
        initForm()
    },
    { deep: true }
)
</script>
<style lang="scss" scoped></style>

效果如下：

image.png
我睡醒刚刚
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vite+vue3+ts简单例子todolist
jason_renyu的博客
03-01 4778
vue3发布以来备受瞩目，与之起来的vite都是倍感神秘，在这里我们用一个todolist的小例子，来揭秘vue3+vite的面纱。 本文是在《Vite + Vue3 初体验 —— Vue3 篇》的启发下写的，由于原文的代码和过程有一些需要注意的坑点，在这里我们会把步骤详细的整理以及简单的优化。 创建项目 使用vite创建 npm init vite@latest 输入项目名 如 vue-todolist vite可以构建多种框架的项目，这里选用vue 选用vue-ts的组合，如果你对ts还不熟，需要
Vue+Vite+TS
weixin_44374471的博客
11-14 3983
【代码】Vue+Vite+TS。
Vue3(TypeScript)-CSSProperties代码示例及用法详解
最新发布
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
05-27 516
TypeScript中定义CSS Properties
vite + vue3 + ts 使用总结
小帅の技术博客
01-17 1945
现阶段开发 `vue3` 项目使用 `vite` + `ts` 应该已成为标准范式了吧，新的语法体验 `vue composition api` 再配合 `script setup` 谁用谁知道啊，开发和构建方面，`vite` 作为下一代构建工具，想必大家也有所了解，使用 `ES6 module` + `ESbuild` 支持本地开发，速度和效率起飞啊，就一个字——爽，对于 `TypeScript`，感觉都没必要说了，现在还没上车的赶紧的了~
vite+vue3+ts项目构建详细步骤（配置多语言版本）
热门推荐
失眠时间的博客
05-15 1万+
由于之前几乎都是使用Webpack 构建项目，偶尔使用了gulp。最近两年才开始使用Vue3开发项目，所以特意记录下Vite构建期间的使用方式。后续也会花时间写下webpack构建项目的文章，期待后期的更新～
Vue3+Vite+TS后台项目 ~ 6.用户登录校验
yuan
12-24 3928
一、登录 1. 登录静态页 编辑 src / views / login / index.vue 文件 <template> <div class="login-container"> <el-form class="login-form" :rules="rules" ref="form" :model="user" size="medium" @submit.prevent="handl..
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
Vue3+Vite4+TS 后台模板
06-08
Vue3+Vite4+TS 后台模板是一款基于最新技术栈构建的高效、现代化的前端开发框架，专为后台管理界面设计。该模板利用了Vue.js的最新版本Vue3，搭配快速构建工具Vite4，以及TypeScript的静态类型检查，提供了强大的...
vue3+vite+ts 仿淘宝放大镜效果
09-17
在本项目中，我们主要探讨的是如何利用Vue3、Vite和TypeScript来实现一个类似于淘宝网站中的商品图片放大镜效果。这个效果通常用于增强用户的购物体验，让他们能更清晰地查看商品细节。以下是实现这一功能所涉及的...
vue3+ts+vite+router+vuex+api请求封装
12-29
综合以上，Vue3+TS+Vite+Router+Vuex+API请求封装的组合为开发后台管理系统提供了强大的工具链。开发者可以利用这个脚手架快速初始化项目，专注于业务逻辑的实现，而不必花费大量时间在基础架构上。同时，这套技术栈...
vue3+ts+vite搭建项目（保姆级）
weixin_60513652的博客
09-08 871
其它名也可以，因为pinia它有一个根文件，会把 defineStore 第一个参数当id值，相当于vuex中的 module 自动引入，也会在Vue.js devtools 插件中以第一个参数名展示（下面展示）它的命名在devtools 插件能方便找到这个文件的数据，方便调试。:返回的函数统一使用useXXX作为命名方案，这是约定的规矩。想要方便使用axios，想要封装统一的请求头处理，便于接口的统一管理，以及解决出现回调地狱。1.在vite-env.d.ts下面写入。一个不解构，一个不解构看看区别。
基于vue3+ts+vite封装的动态表单，支持手动编辑生成页面表单配置并渲染使用，所有源码都在文章中
jsmeng626的博客
02-28 3321
前端动态表单，一个生成器，一个渲染器，主要功能就是生成器会制造出提供表单渲染的数据结构，再传递给渲染器去渲染使用
从回调（callback）到 Promise 到异步函数（async await）
Corey
11-28 683
在 promise 被加入到 JavaScript 语言之前，异步代码一般使用基于回调的 API，尤其是在 Node.js 中。这是一个例子： function handler(done) { validateParams((error) =&gt; { if (error) return done(error); dbQuery((error, dbResults) =&...
React.CSSProperties
sc0002的博客
04-17 3159
React.CSSProperties React TS css 类型
【学习笔记】vue3 ant design项目个性化编辑组件样式问题 ：不能将类型“string”分配给类型“CSSProperties”
giMeMor的博客
08-27 1263
所需类型来自属性 "headStyle"，在此处的 "Partial> & VNodeProps & AllowedComponentProps & ComponentCustomProps, "loading" | ... 3 more ....." 类型上声明该属性。但我发现其他组件也要改，于是我决定把headStyle写在父页面，然后通过props传入。在使用Card组件时有一个需求，就是需要将card组件的标题下方的横线缩短。
vue3+elementPlus+ts封装form表单组件
yancy_peng的博客
03-24 808
vue3+elementPlus+ts封装的form表单组件
基于vue3+ts配置化form表单组件实现浅析
junner443的博客
06-20 5446
基于vue3+ts配置化form表单组件实现浅析，同时兼容element-plus和ant-design-vue
Record＜string, unknown＞`是 TypeScript 中的一种类型定义
pig_ning的博客
09-21 645
在使用 `unknown` 类型的值时，需要进行类型检查或类型断言来确定其具体类型。
怎么再vue3+ts+vite插入视频组件
01-16
在Vue3 + TypeScript + Vite中插入视频组件的方法如下： 1. 首先，你需要安装一个适用于Vue3的视频播放器库，例如vue-video-player。你可以使用以下命令进行安装： ```shell npm install vue-video-player --save `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值