组件封装
文章平均质量分 74
组件封装的一些技巧与案例
笑道三千
我今年两岁半了,学编程还来不来得及????
展开
-
基于vue2.x搭建组件库的流程-(五 )-二次封装dialog组件
基于element-ui封装组件库,我想要实现的效果是:接着之前的文章,现在开始二次封装一个element的dialog组件。我希望它能有默认的头部和底部。并且使用方法和element-ui的dialog一样。先写package/Dialog/index.js,为按需引入做准备:然后编写dialog组件的封装代码:package/Dialog/src/index.vue:二,封装的注意点1,无需变化的props的透传参考element的dialog的props,因为封装后,我希望开发者照着elem原创 2022-10-12 14:26:30 · 1206 阅读 · 0 评论 -
基于vue2.x搭建组件库的流程-(四 )-组件库中引入字体图标
组件库中引入字体图标库。原创 2022-10-10 17:39:23 · 363 阅读 · 0 评论 -
封装组件系列-(二)-父子组件传值
相比较之下,原创 2022-10-10 15:38:53 · 606 阅读 · 0 评论 -
封装组件系列-(一)-插槽及动态组件
插槽可以实现将标签或其他文本插入到子组件中。主要有以下四种插槽:一,默认插槽实现的效果:值得注意的是,父组件中提供的插槽内容是写在父组件中的。所以他的作用域是父组件。插槽内容的css样式可以直接写在父组件中而不用:deep()来样式穿透。数据也是直接使用父组件的而不需要组件传值。也是就是说: 任何父组件模板中的东西都只被编译到父组件的作用域中;而任何子组件模板中的东西都只被编译到子组件的作用域中。可以为插槽定义默认内容,就和给定义默认值一样,如果在父组件中没有传入,则使用默认内容。反之如果父组件有原创 2022-06-10 14:25:49 · 2118 阅读 · 0 评论 -
基于vue2.x搭建组件库的流程-(三)-组件库文档的搭建
当我们的组件库具备一些组件之后,需要开发者能够更流畅地使用,就需要有使用文档。这里我是用vuepress来搭建对应的开发文档。本文地内容也是和这个差不多,只不过整合了vue的组件使用范例。原创 2022-10-09 09:42:05 · 1065 阅读 · 0 评论 -
基于vue2.x搭建组件库的流程-(二)-新组件文件的初始化
上篇文章已经讲解了从零开始搭建一个组件库到发布npm,,然后第三方开发者下载使用的基本流程。这篇文章主要优化下组件库的开发之一:组件的自动初始化。在开发一个组件之前,需要创建组件目录、创建组件文件、初始化组件模板等一系列繁琐又重复的工作,这些其实都可以使用脚本自动化实现。原创 2022-10-08 14:44:35 · 309 阅读 · 0 评论 -
基于vue2.x搭建组件库的流程-(一)-组件库搭建与发布流程
这时候,我们已经正确地把包打出来了,因为第一次我们不知道打出来的包地入口文件是啥,这时才知道,所以需要修改package.json中地main值(上文我是预先修改了)。另外就是这个main,它设置了这个组件库打包之后的入口文件,现在我还不知道是这个值(先写上),等会npm run lib之后就会看到了。接下来需要配置.npmignore,配置文件类似于 .gitignore 文件,如果没有 .npmignore,会使用.gitignore来取代他的功能。利用它筛选掉没用的代码。原创 2022-09-30 17:03:49 · 1691 阅读 · 0 评论 -
vant组件二次封装-下拉刷新列表组件
一,二次封装的组件代码<template> <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="已为您刷新成功" > <van-list v-model:loading="myLoading" :finished="finished" finished-text="没有更多了" @load="o原创 2022-04-11 10:33:58 · 2997 阅读 · 8 评论