当前位置: 首页 > Web前端 > JavaScript

创建基础公共组件

时间:2023-03-26 22:42:19 JavaScript

公共模块。基础模块参考了vant的思想,使用了bem的命名规范。首先创建一个命名空间,它返回创建组件和生成命名方法的函数。createcomponent函数中createname和install属性注册vue组件createcomponent函数createthebasecomponentnpmrunplop#输入组件名获取packages/basemodule在src文件夹下创建create文件夹并创建用于创建组件方法的component.ts文件。创建一个具有name属性和install方法的组件来注册组件/***创建一个具有公共选项的基础组件*/import{App,defineComponent,ComponentOptionsWithObjectProps}from'vue'/****@descriptioncreatecomponent*@exportcreateComponent*@param{string}name*@return{*}defineComponent*/exportfunctioncreateComponent(name:string){returnfunction(sfc:ComponentOptionsWithObjectProps){sfc.name=namesfc.install=(app:App)=复制代码>{app.component(nameasstring,sfc)app.component(name),sfc)}returndefineComponent(sfc)}astypeofdefineComponent}因为我们的组件名称可能包含多个单词,所以我们将其转换为驼峰式并创建src/format/string.ts文件导出驼峰命名函数//base/src/format/string.tsconstcamelizeRE=/-(\w)/g/****@descriptionReplace-withcamelcasenaming*@exportcamelize*@param{string}str*@return{*}{string}*/exportfunctioncamelize(str:string):string{returnstr.rep复制代码lace(camelizeRE,(_,c)=>c.toUpperCase())}//base/src/create/component.tsimport{camelize}from'../format/string'//修改这段代码,转成驼峰命名法//'button'b('text')//'button__text'b({disabled})//'buttonbutton--disabled'b('text',{disabled})//'button__textbutton__text--disabled'b(['disabled','primary'])//'buttonbutton--disabledbutton--primary'exporttypeMod=string|{[key:string]:任何};导出类型Mods=Mod|模[];functiongen(name:string,mods?:Mods):string{if(!mods){return''}if(typeofmods==='string'){return`${name}--${mods}`}}if(Array.isArray(mods)){returnmods.reduce((ret,item)=>ret+gen(name,item),'')}returnObject.keys(mods).reduce((ret,key)=>ret+(mods[key]?gen(name,key):''),'')}/****@description创建名为空的BEM*@export*@param{string}name*@return{*}string*/exportfunctioncreateBEM(name:string){返回函数(el?:Mods,mods?:Mods):Mods{if(el&&typeofel!=='string'){mods=elel=''}el=el?`${name}__${el}`:namereturn`${el}${gen(el,mods)}`}}exporttypeBEM=ReturnType;创建一个create/index.ts文件,导出一个函数。这个函数有一个参数,就是要创建的组件的名称,返回一个数组,其中第一项是创建组件的方法,第二项是根据组件创建bem命名规则的函数nameimport{createBEM}from'./bem'import{createComponent}from'./component'/****@description创建命名空间*@export*@param{string}name*@return{*}[createComponent(name),createBEM(name)]*/exportfunctioncreateNamespace(name:string){name='two-'+namereturn[createComponent(name),createBEM(name)]asconst}后面的公共东西也会被提取到公共基础模块原文地址:https://kspf.xyz/archives/142/