yc-config-create-setting

介绍

yc-config-create-setting 起源于低代码设计研发。为了方便对节点的操作，以及方便数据库存储。

它是一个基于 Vue3 & Typescript 进行实现的全新编程方式 - (函数配置化编程)。它所带来的就是能够让你以函数式的方式进行编程。在 Typescript 的加持下，有着良好的配置项推导能力，同时也去除掉了 HTML 标签的编写。也方便了快速进行定位排除问题。

它和传统的 Vue 代码编写的区别就是在于，Setting 它是完全采用了脚本的方式进行编写，也类似于 Vue3 的组合式API。它以最简单最明了的方法进行实现组件信息。让其每一个节点都能够有独立自主的能力，并且让每一个节点都能够实现 export ,有效的省去了重复性的代码，在设计的时候也逐步遵循着 低耦合高内聚 。

优点

1、支持配置化开发项目。

2、实体节点独立控制，让每一个组件节点只负责根据数据信息去处理自身的效果。

3、支持二次封装，支持多种UI框架，以及自定义的组件和自定义方法输出，使用它更加贴合你的项目。

4、减少HTML标签，让文件中表单代码更加简洁，事务节点追踪更加的简单清晰。

5、支持 Typescript 有着良好的推导能力，支持自定义组件 Typescript 的处理。

6、可支撑配置信息进行数据库存储。充分发挥处理节点的作用域能力。

7、整合组件资源信息，统一进行管理。开发者只需要处理好Setting的搭建信息即可。

案例

插件：yc-setting-element-plus

项目：天幕 - 能够让你进行在线创作前端项目工程

安装使用

npm方式

npm install yc-config-create-setting

创建环境

import * as Vue from 'vue';
import { ElInput } from 'element-plus'

const mapping = const ElSettingMapping = {
  // 组件映射配置
  COMPONENT_MAPPING: {
    ElInput,
  },
  // 组件数据双向绑定的 prop 名称
  MODEL_NAME_MAPPING: {
    modelValue: ['ElInput'],
  },
  // 组件数据双向绑定更新的对应事件信息
  EMIT_NAME_MAPPING: {
    'update:modelValue': ['ElInput']
  },
};

const $Setting = YcConfigCreateSetting(Vue, mapping, { autoMappingComponent: true });
// 开始搭建环境
const { UI, Generate } = $Setting('App', { text: 'WelCome Use Entity' );
// 创建节点信息
const WelComeText = UI('div').setContent(vm => vm.text);
// 获取组件信息
const { Component } = Generate(WelComeText);
// 导出组件信息
export default Component

参数配置

yc-config-create-setting 共接收三个参数: Vue、 Mapping、 options。

参数一 Vue

介绍

该参数很简单，就是Vue3，使用 import * as Vue from 'vue' 就可以拿到。其实原本在设计的时候是不用传入 Vue3 ，但是近几年来 vue 也在持续的更新迭代，为了后期能够更好的去介入以及兼容未来高版本的Vue，所以才把 Vue3 进行单独拎出来作为参数进行处理。

参数二 Mapping

介绍

Mapping 参数它主要的作用就是告知 yc-config-create-setting 在 Vue 中，组件配置信息的映射关系。它主要包含的映射关系含有：组件名称、组件数据双向绑定的 prop 名称、组件数据双向绑定更新的对应事件信息。

Typescript

 export interface Mapping {
	    // 组件映射配置
      COMPONENT_MAPPING?: Record<string, unknown>;
	    // 组件数据双向绑定的 prop 名称
      EMIT_NAME_MAPPING?: Record<string, string[]>;
	    // 组件数据双向绑定更新的对应事件信息
      MODEL_NAME_MAPPING?: Record<string, string[]>;
   		// 组件双向绑定的时候，默认的初始值信息
      DEFAULT_VALUE_MAPPING?: Record<string, unknown>;
      // 组件数据必填的校验信息
      DEFAULT_REQUIRED_RULE_MAPPING?: Record<string, (config: Record<string, unknown>, message: string | string[]) => Array<{
          required?: boolean;
          message?: string;
          trigger: string;
      }>>;
  }

配置案例

// element-plus，这里采用的是组件名称，自动去全局注册信息里面查找的配置方式
const ComponentNames = [ 'ElButton',  'ElInput', 'ElInputNumber', 'ElRadio', 'ElPopover', 'ElTooltip','ElPagination' ] as const;
// 创建组件映射关系对象
const COMPONENT_MAPPING = ComponentNames.reduce(
  (obj, key: ComponentNameType) => {
    obj[key] = key;
    return obj;
  },
  {} as Record<ComponentNameType, ComponentNameType>
);

const ElSettingMapping = {
  // 组件映射配置
  COMPONENT_MAPPING,
  // 组件数据双向绑定的 prop 名称
  MODEL_NAME_MAPPING: {
    modelValue: ['ElInput', 'ElInputNumber', 'ElRadio'],
    checked: ['ElCheckTag'],
    visible: ['ElPopover', 'ElTooltip'],
    pageSize: ['ElPagination'],
    currentPage: ['ElPagination'],
  },
  // 组件数据双向绑定更新的对应事件信息
  EMIT_NAME_MAPPING: {
    'update:modelValue': ['ElInput','ElInputNumber', 'ElRadio'],
    'update:checked': ['ElCheckTag'],
    'update:visible': ['ElPopover', 'ElTooltip'],
    'update:pageSize': ['ElPagination'],
    'update:currentPage': ['ElPagination'],
  },
};

export default ElSettingMapping;

参数三 Options

介绍

它是一个选项配置信息，它主要所需要发挥的作用就是，便于后期未来的扩展处理。目前它只有两个配置项字段。

Typescript

export interface Options {
  	// 是否自动映射，它的作用就是，当你配置的 `COMPONENT_MAPPING` 中没有找到对应的组件信息的时候，就会自动去全局组件注册的信息对象里面去查找匹配。
    autoMappingComponent?: boolean;
  	// 拦截器配置，它目前也只是做了个组件信息拦截的处理。
    interceptMapping?: {
      	// 它的作用就是能够让你优先拿到【组件名称】去处理拦截处理，也就是它能有更高的对组件映射关系的控制权限
        component?: (name: string) => string | Vue.Component;
    };
}

配置案例

const ComopnentMapping: Record<string, string> = {
  box: 'div',
}

const options = {
  autoMappingComponent: true,
  interceptMapping: {
    component: (name) => {
        if (name in ComopnentMapping) {
            return ComopnentMapping[name]
        }
        return name
    }
  }
}

export default options;

实体方法

介绍

在 yc-config-create-setting 中会把为一个组件配置的信息作为一个节点，为了能够更好的去管理这些节点信息。yc-config-create-setting 提供了一个 UI的方法，该方法就是用来管理组件的配置项信息。它最大的作用就是不仅能够以链式调用的方式去配置，还可以进行去调用你配置信息。例如：当你的组件渲染完毕以后，它就可以快速直接去使用组件节点信息。

// 利用已经封装好的element-plus进行快速搭建
import BuildElSetting from "@/yc-setting-element-plus";
// 获取环境信息
const ElSetting = BuildElSetting();
// 开始搭建环境，并获取element-plus的组件工具 El 和 生成组件的方法 Generate
const { El, Generate } = ElSetting('App');
// 创建一个案例实体
const button = El.Button({ type: 'primary' }).setContent('按钮').on('click', (_vm: any, name: string) => {
    return `[click]: ${name}, Welcome Use Entity.`
});
// 生成组件信息，以及 mounted 钩子
const { Component, mounted } = Generate(button);
// 添加钩子信息
mounted(() => {
    const result = button.trigger('click','戴向天') as string;
    console.log('result=>',result)
})
// 导出组件信息
export default Component

setType

设置当前组件信息

entity.setType(type: IEntity.Type<S>): Entity;

// 使用方法
entity.setType('div');

setModel

设置数据双向绑定的字段信息

entity.setModel(model: IEntity.String<S>): Entity;

// 使用方法
entity.setModel('userName')						// 字符串
  		.setModel((vm)=> 'userName');		// 通过函数进行返回字符串

setProps

设置组件的 props 信息。

entity.setProps<P extends U['props']>(props: ((vm: T) => P) | P): Entity;

// 使用方法
entity.setProps({ type: 'primary' })			// 直接传入 props
  		.setProps((vm)=>{										// 通过函数动态传入 props
        return {
          type: 'primary'
        }
      })

addProps

累加组件的 props 信息。

entity.addProps<P extends U['props']>(props: ((vm: T) => P) | P): Entity;

// 使用方法
entity.addProps({ type: 'primary' })			// 直接传入 props
  		.addProps((vm)=>{										// 通过函数动态传入 props
        return {
          disabled: true
        }
      })

setClass

设置 class 样式名称

entity.setClass(_class: IEntity.ClassName<S>): Entity;

// 使用方法
entity.setClass('item')																				// 字符串
			.setClass((vm) => 'item')																// 函数返回
			.setClass(['item', (vm)=> 'item1', { item2: true } ])		// 多种结构

addClass

添加 class 样式名称

entity.addClass(_class: IEntity.ClassName<S>): Entity;

// 使用方法
entity.addClass('item')																				// 字符串
			.addClass((vm) => 'item')																// 函数返回
			.addClass(['item', (vm)=> 'item1', { item2: true } ])		// 多种结构

setStyle

entity.setStyle(_style: IEntity.Config<S>['style']): Entity;

// 使用方法
entity.setStyle('background: red;')																				// 字符串
			.setStyle((vm) => 'background: red;')																// 函数返回
			.setStyle({background: 'red'})																			// 多种结构

setContent

设置默认的插槽。同理与 Entity.setSlot('default','xxxx') 。

entity.setContent<Info extends IEntity.SlotInfo<S> = IEntity.SlotInfo<S>>(slotInfo: Info) :Entity;

// 使用方式
entity.setContent('WelCome Use Entity')
			.setContent((vm,scoped)=>'WelCome Use Entity')

click

点击事件绑定。同理 entity.on('click',()=>{})

click<
    N extends 'click',
    K extends EN = EN,
    H = (N extends K ? E[N] extends ((...arg: any) => any) ? ((vm: T, ...agrs: Parameters<E[N]>) => ReturnType<E[N]>) : (vm: T, ...args: any) => any : (vm: T, ...args: any) => any),
  >(handler: H, modifier?: IEntity.Modifier<S>): Entity;

// 使用方法
entity.click((vm,...args)=>{
  console.log('【click】我被触发了')
})

input

点击事件绑定。同理 entity.on('input',()=>{})

click<
    N extends 'input',
    K extends EN = EN,
    H = (N extends K ? E[N] extends ((...arg: any) => any) ? ((vm: T, ...agrs: Parameters<E[N]>) => ReturnType<E[N]>) : (vm: T, ...args: any) => any : (vm: T, ...args: any) => any),
  >(handler: H, modifier?: IEntity.Modifier<S>): Entity;

// 使用方法
entity.input((vm,...args)=>{
  console.log('【input】我被触发了')
})

change

点击事件绑定。同理 entity.on('change',()=>{})

click<
    N extends 'change',
    K extends EN = EN,
    H = (N extends K ? E[N] extends ((...arg: any) => any) ? ((vm: T, ...agrs: Parameters<E[N]>) => ReturnType<E[N]>) : (vm: T, ...args: any) => any : (vm: T, ...args: any) => any),
  >(handler: H, modifier?: IEntity.Modifier<S>): Entity;

// 使用方法
entity.change((vm,...args)=>{
  console.log('【change】我被触发了')
})

keydown

点击事件绑定。同理 entity.on('keydown',()=>{})

click<
    N extends 'keydown',
    K extends EN = EN,
    H = (N extends K ? E[N] extends ((...arg: any) => any) ? ((vm: T, ...agrs: Parameters<E[N]>) => ReturnType<E[N]>) : (vm: T, ...args: any) => any : (vm: T, ...args: any) => any),
  >(handler: H, modifier?: IEntity.Modifier<S>): Entity;

// 使用方法
entity.click((vm,...args)=>{
  console.log('【keydown】我被触发了')
})

trigger

触发自身配置的事件信息

entity.trigger<N extends string = string, K extends EN = EN>(eventName: N | K, ...args: unknown[]): unknow;

// 使用方式
entity.on('click',(vm,name)=>{
  return `你好！${name}`
})
const result = entity.trigger('click','Entity'); // result=> 你好！Entity

triggerNode

触发组件内置函数

entity.triggerNode<R = undefined>(eventName: string, ...args: unknown[]): R;

// 使用方法
entity.triggerNode('change');

getVNode

在渲染成功后，可以通过该方法进行获取当前节点的信息 h 方法所生成的 vnode 信息。

entity.getVNode(): unknow | null;

getRefNode

在渲染成功后, 可以通过该方法进行获取组件实体信息。也就是返回 this.$ref[xxx]。

entity.getRefNode(): unknow | null;

getValue

获取当前节点 model 数据信息。前提是需要进行绑定 model 字段信息。

entity.getValue<R = unknown>(): R;

setValue

设置当前节点 model 数据信息。前提是需要进行绑定 model 字段信息。

entity.setValue<T>(value: T): Entity;

// 使用方法
entity.setValue('Welcome Use Entity')

setAutoUpdate

是否在渲染成功后，再次进行修改 Entity 时进行强制组件重新渲染,从而让组件的视图更新。

entity.setAutoUpdate(isImmediatelyUpdate: boolean): Entity;

$forceUpdate

在渲染成功后，再次进行修改组件配置项信息的时候，若是视图没有得到更新，该方法可以进行强制性渲染更新视图。

entity.$forceUpdate(): Entity;

setKey

设置当前节点的唯一标识，等同于 :key="key" 。默认会自动生成。

entity.setKey(key: IEntity.String<S> | IEntity.Number<S>): Entity;

// 使用方法
entity.setKey('key')								// 字符串
			.setKey(1)										// 数字
			.setKey((vm) => 'key')				// 通过函数返回字符串
			.setKey((vm) => 1);						// 通过函数返回数字

setFilter

设置指定的配置项参数不做解析处理的字段信息。默认: ['type']。

entity.setFilter<K extends keyof IEntity.Config<S> & string>(keys: K[]): Entity;

// 使用方法
entity.setFilter(['type'])

addFilter

添加指定的配置项参数不做解析处理的字段信息。

entity.addFilter<K extends keyof IEntity.Config<S> & string>(key: K): Entity;

// 使用方法
entity.addFilter('type');

removeFilter

移除指定的配置项参数不做解析处理的字段信息。

entity.removeFilter<K extends keyof IEntity.Config<S> & string>(key: K): Entity;

// 使用方法
entity.removeFilter('type');

del

删除指定的属性信息

entity.del<K extends keyof IEntity.Config<S>>(key: K): Enity;

// 使用方法
entity.del('props');

setConfig

设置配置项信息

enityt.setConfig(config: IEntity.ConfigWithoutType<S> = {}): Entity;

// 使用方法
entity.setConfig({ style: 'background: red' })

setKeyValue

可进行对指定的字段数据信息进行设置。获取添加自定义的字段信息。

entity.setKeyValue(key: string, value: unknown): Entity;

// 使用方法
entity.setKeyValue('customField','Entity')
			.setKeyValue('type', 'span');

get

获取当前 Enityt 的配置项信息。

entity.get(): IEntity.Config

// 使用方法
const config = entity.get();
console.log('config=>', config);

copy

复制一个当前的 Entity 。并返回

entity.copy(): Entity

setAlias

设置当前Enityt的别名。

entity.setAlias(alias: IEntity.String<S>): Entity;

// 使用方法
entity.setAlias('组件别名')						// 字符串
  		.setAlias((vm)=> '组件别名');		// 通过函数进行返回字符串

setRef

设置组件ref信息。默认自动生成

entity.setRef(ref: IEntity.String<S>): Entity;

// 使用方法
entity.setRef('entityRef')						// 字符串
  		.setRef((vm)=> 'entityRef');		// 通过函数进行返回字符串

setIf

设置是否允许解析渲染。

entity.setIf(_if: IEntity.Boolean<S>): Entity;

// 使用方法
entity.setIf(false)						// 布尔值
			.setIf((vm) => false)		// 函数返回布尔值

setSyncKeyValue

设置指定同步更新的字段信息

entity.setSyncKeyValue(key: string, value: IEntity.SyncType = key): Entity;

// 使用方法
entity.setSyncKeyValue('currentPage')
			.setSyncKeyValue('currentPage', 'page')
			.setSyncKeyValye('currentPage', {
        key: 'page',
        emit: 'current-change'
      })

setSync

批量设置指定同步更新的字段信息

entity.setSync(sync: Record<string, IEntity.SyncType>): Entity;

// 使用方法
entity.setSyncKeyValue({
	currentPage: 'page',
  pageSize: {
    key: 'size',
    emit: 'sizeChange'
  }
})

setDirective

设置指令信息

entity.setDirective(directive: IEntity.IDirective<S>): Entity;

// 使用方法
entity.setDirective({ name: 'show', value: vm => vm.show })
			.setDirective({ name: vm => 'show', value: vm => vm.show })

setSlot

设置插槽信息

entity.setSlot(slotName: U['slots'] & string, slotInfo: IEntity.SlotInfo<S>): Entity;

// 使用方式
entity.setSlot('default','WelCome Use Entity')						// 字符串
			.setSlot('default',new Date().getTime())						// 数字
			.setSlot('default',false)														// 布尔
			.setSlot('default',['WelCome Use Entity'])					// 数组
			.setSlot('default', entity.copy())									// Entity
			.setSlot('default',(vm, scoped) => 'WelCome Use Entity')			// 函数返回字符串
			.setSlot('default',(vm, scoped) => ['WelCome Use Entity'])		// 函数返回数组
			.setSlot('default',(vm, scoped) => entity.copy())							// 函数返回 Entity
			.setSlot('default',(vm, scoped) => [entity.copy()])					// 函数返回数组 Entity

setSlotMap

批量设置插槽信息

entity.setSlotMap(slotMap: IEntity.Config<S>['slots']): Entity;

// 使用方式
entity.setSlotMap({
        default: 'Welcome Use Entity',
        header: (vm)=> 'Welcome Use Entity',
      })
			.setSlotMap((_vm)=>{
  			return {
           default: 'Welcome Use Entity',
        	 header: (vm)=> 'Welcome Use Entity',
        }
			})

on

设置事件信息，通常是用于组件通过 $emit 进行暴露出来的方法

entity.on<
    N extends string = string,
    K extends EN = EN,
    H = (N extends K ? E[N] extends ((...arg: any) => any) ? ((vm: T, ...agrs: Parameters<E[N]>) => ReturnType<E[N]>) : (vm: T, ...args: any) => any : (vm: T, ...args: any) => any),
  >(
    eventName: N | K | {
      name: N | K,
      handler?: H,
      modifier?: IEntity.Modifier<S>,
      event: boolean;
    },
    handler?: H,
    modifier?: IEntity.Modifier<S>
  ): Entity
  
// 使用方法
entity.on('click',(vm,...args)=>{
  console.log('【on】我被触发了')
})

setIntercept

设置自定义拦截器

entity.setIntercept(intercept: IEntity.Config<S>['intercept']): Entity;

// 使用方式
entity.setIntercept({
  before(configEntity, vm){
    return configEntity
  },
  after(analysisEntity, vm){
    return analysisEntity
  }
})

开发解答

Author：戴向天

QQGroup：602504799

Date: 2023-12-26

yc-config-create-setting

yc-config-create-setting

介绍

优点

案例

安装使用

npm方式

创建环境

参数配置

参数一 Vue

介绍

参数二 Mapping

介绍

Typescript

配置案例

参数三 Options

介绍

Typescript

配置案例

实体方法

介绍

setType

setModel

setProps

addProps

setClass

addClass

setStyle

setContent

click

input

change

keydown

trigger

triggerNode

getVNode

getRefNode

getValue

setValue

setAutoUpdate

$forceUpdate

setKey

setFilter

addFilter

removeFilter

del

setConfig

setKeyValue

get

copy

setAlias

setRef

setIf

setSyncKeyValue

setSync

setDirective

setSlot

setSlotMap

on

setIntercept

开发解答

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads