Vue3.0+TS打造企业级组件库 前端中高级开发者必修课,vue3 ts开发
当市面上主流的组件库不能满足我们业务需求的时候，那么我们就有必要开发一套属于自己团队的组件库，下面这篇文章主要给大家介绍了如何使用vue3 TS实现简易组件库的相关资料，需要的朋友可以参考下
目录
前置组件编写下落式验证总结
前置
首先下载vue-cli，搭建我们的环境，vue-create-luckyUi，选择vue3和打字稿。在科学研究委员会目录下创建包裹作为组件目录。再安装自举，用引导程序里面的样式来完成我们的组件。
组件编写
dropdown
首先查看boorstrap文档，是这样用的
div class=dropdown
button class= BTN BTN-辅助下拉开关 type= button id= dropdownMenuButton data-toggle=下拉 aria-expanded= false
下拉按钮
/按钮
div class=下拉菜单 aria-label edby= dropdownMenuButton
a class= drop down-item href= # rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随操作/a
a class= drop down-item href= # rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随其他操作/a
a class= drop down-item href= # rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随此处的其他内容/a
/div
/div
首先那个按钮按钮就是我们下拉式按钮的内容，将这部分作为属性传入，而下拉菜单的内容是作为下拉项目的，明显这里不能固定写三个，这里就用插槽占位，再封装一个下拉项目组件。
首先下拉式组件内容如下：
模板
div class= drop down ref= dropdownRef
a
href=# rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部“不跟随”
BTN BTN-轮廓-轻型my-2下拉菜单-切换
@click.prevent=toggleOpen
{{ title }}
/a
ul class=下拉菜单:style= { display: block } v-if=是打开的
插槽/插槽
/ul
/div
/模板
下拉项目的内容就是：
模板
里
class=下拉选项
:class= { is-disabled :disabled }
插槽/插槽
/李
/模板
脚本语言
从“vue”导入{定义组件}
导出默认定义组件({
名称： DropdownItem ，
道具：{
已禁用：{
类型：布尔型，
默认值：错误
}
}
})
/脚本
风格。下拉选项。is-禁用* {
颜色：# 6c757d
指针事件：无；
背景色：透明；
}
/风格
还要实现一个点击下拉列表，下拉列表-项目会随之收起来的功能，这个比较简单，在下拉式上绑定一个点击事件来控制变量同相线为真实的或者假的，在加上控制显示即可实现功能。接下来还要实现一个点击页面的其他地方也能实现下拉项目收缩，这里有两个思路：
首先在文件上添加一个点击事件，一旦触发就设置同相线为假的，给下拉式也添加一个点击事件，加上一个事件修饰符停止来阻止事件冒泡，这样除了点击下拉式意外的任何地方，文档都会触发点击事件。第二个思路就是让事件冒泡到文档，通过判断事件对象包不包括我们的目标对象，如果不包括说明点击的是页面的其他地方，就设置同相线为错误。这里用了到了组合式api，新建文件包装/挂钩/使用点击外部。ts，从“vue”导入{ ref，onMounted，onUnmounted，Ref }
const useClickOutside=(element ref:ref null html element)={
const isClickOutside=ref(false)
常量处理程序=(e: MouseEvent)={
if (elementRef.value) {
如果(元素引用。价值。包含(例如，作为html元素的目标)){
isClickOutside.value=false
}否则{
isClickOutside.value=true
}
}
}
onMounted(()={
文档。addevent侦听器( click ，处理程序)
})
未安装(()={
文档。removeeventlistener( click ，处理程序)
})
返回isClickOutside
}
导出默认使用单击外部
然后直接导入即可使用定义的使用单击外部函数。这里监听isClickOutside的状态来更改同相线的状态。
导入使用单击外部来源./hooks/use click outside ；
.
const isClickOutside=useClickOutside(dropdownRef)；
手表(isClickOutside，()={
如果(是打开的。值在外部单击。值){
isOpen.value=false
}
});
form
首先看下文档用法
形式
div class=窗体-组
=exampleInputEmail1 电子邮件地址的标签/标签
input type= email class= form-control id= example input mail 1 aria-descripted by= email help
small id=电子邮件帮助 class=窗体-文本文本-静音我们绝不会与任何人共享您的电子邮件。/小
/div
div class=窗体-组
=exampleInputPassword1 密码的标签/标签
输入类型= password class= form-control id=示例输入密码1
/div
div class=窗体-组窗体-检查
输入类型= checkbox class= form-check-input id=示例检查1
“示例检查1”的label class=“form-Check-label”签出我/标签
/div
按钮类型=提交 btn btn-primary 提交/按钮
/表单
首先编写有效表单组件：
模板
form class=验证表单容器
插槽名称=默认/插槽
div class= submit-area @ click。防止=提交表单
插槽名称=提交
按钮类型=提交 btn btn-primary 提交/按钮
/插槽
/div
/表单
/模板
脚本语言
从“vue”导入{ defineComponent，onUnmounted }
从“米特”导入手
类型ValidateFunc=()=布尔值
export const emitter=mitt()
导出默认定义组件({
发出：[表单提交],
设置（道具、上下文){
let funcArr: ValidateFunc[]=[]
const submitForm=()={
常量结果=函数数组。map(func=func()).每（结果=结果)
context.emit(表单提交，结果)
}
常数回调=(func？ValidateFunc)={
if (func) {
推送(函数)
}
}
emitter.on(表单-项目-已创建，回调)
未安装(()={
emitter.off(表单-项目-已创建，回调)
funcArr=[]
})
返回{
提交表单
}
}
})
/脚本
接着编写验证输入。某视频剪辑软件组件：
模板
div class=验证输入容器铅-3
投入
class=窗体-控件
:class= { 是无效的:输入引用。错误}
@blur=validateInput
v-model=inputRef.val
v-bind=$attrs
span v-if=输入参考。错误 class= invalid-feedback " { input ref。邮件} }/span
/div
/模板
脚本语言
从“vue”导入{ defineComponent，reactive，PropType，onMounted，computed }
从导入{发射器}。/ValidateForm.vue
const emailReg=/^[a-zA-Z0-9.#$%* /=?^_`{}~-] @[a-zA-Z0-9-](？\.[阿-扎-Z0-9-] )*$/
界面规则属性{
类型："必需的""电子邮件""自定义";
消息：字符串；
验证器？()=布尔值
}
导出类型RulesProp=RuleProp[]
导出类型标记类型=输入
导出默认定义组件({
道具：{
规则：数组为PropTypeRulesProp，
模型值：字符串，
标签:{
类型：字符串作为PropTypeTagType，
默认："输入"
}
},
继承者：假的，
设置（道具、上下文){
const inputRef=reactive({
val:计算的({
get: ()=props.modelValue ，
set: val={
语境。发出(更新：模型值，val)
}
}),
错误：错误，
消息：""
})
const validateInput=()={
if (props.rules) {
const全部通过=props。规则。每(规则={
让通过=真
inputRef.message=rule.message
开关(rule.type) {
案例"必需":
passed=(inputRef.val.trim()！==)
破裂
案例"电子邮件":
通过=电子邮件注册。测试(输入参考。val)
破裂
案例"自定义":
passed=rule.validator？rule.validator() : true
破裂
默认值：
破裂
}
退货通过
})
inputRef.error=！全部通过
返回全部通过
}
返回真实的
}
onMounted(()={
发射器。发出(表单-项目-已创建，validateInput)
})
返回{
输入参考，
验证输入
}
}
})
/脚本
这里核心的地方有两点：
自定义组件实现v型，vue2中自定义组件实现v-mdel必须要绑定一个价值属性和投入事件，在投入事件中将输入的值传递给价值。在vue3中就需要绑定一个模型值和更新：模型值事件还有就是父子组件之间的传值问题，因为有插槽，没办法使用常规的属性传值，这里使用的事件传值采用了一个第三方库米特。在父组件中通过emitter.on(表单-项目-已创建，回调)来注册事件，在子组件中通过发射器。发出(表单-项目-已创建，validateInput)触发事件。
验证
新建文件包/索引。分时（同timesharing）
导入自举/dist/CSS/自举。量滴 CSS
//导入组件
从导入下拉列表/下拉/下拉。vue ；
从""导入DropdownItem ./下拉/下拉项目。vue ；
常量组件=[
下拉菜单，
下拉项目
]
const install=(Vue: any)={
components.forEach((_: any)={
Vue.component(_ .姓名，_);
});
};
导出默认值{
安装
};
将写的组件依次导入，然后定义一个安装函数，该函数有一个某视频剪辑软件实例的参数，在函数中依次遍历我们的导入组件数组，然后将组件挂载到某视频剪辑软件实例上，导出安装函数。
在根目录下的主页面上使用我们的新组件：
从“vue”导入{ createApp }
从导入应用程序 App.vue
从进口luckyUi ./package/index ；
const app=createApp(App)
app。使用(luckyUi)；
app。装载(应用数量)
在app.vue中进行测试：
模板
差异
div class=dropdown
！-测试下拉菜单-
下拉列表：标题=你好啊`
下拉列表-itema href= # rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随 rel=外部不跟随王大/a/下拉式项目
下拉项目
a href=# rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部nofollow rel=外部“不跟随”王二/a
/下拉列表-项目
下拉项目已禁用
a href= # rel=外部不跟从 rel=外部不跟从 rel=外部不跟从 rel=外部不跟从 rel=外部不跟从 rel=外部不跟从 rel=外部不跟从 class= drop-item 王三/a/下拉式项目
下拉项目
a href= # rel= external no follow rel= external no follow rel= external no follow rel= external no follow rel= external no follow rel= external no follow class= external no follow 王思/a/dropdown-item
/下拉菜单
/div
/div
/模板
最后用vue自己的脚手架打包。有关详细信息，请参见文档。
在包中配置打包命令：
lib : vue-CLI-service build-target lib-name lucky-ui。/src/package/index.ts
运行npm run lib以在dist目录中查看它。
代码地址
总结
关于用vue3 TS实现简单组件库的这篇文章到此为止。关于vue3 TS简单组件库的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。