目录
1.尝试封装自己的ui组件
随着V3的到来，不同的组件库也随之的 扩展，element-plus，naive-ui，vant等等，
在不知道选择哪款组件库的同时...
要不要尝试做一个自己UI组件....库？？？？？
像大多数封装组件是不是特别麻烦，创建vue组件，然后import引用，然后再写上标签呢，当然大家在开发时直接使用现成的组件库，就是刚刚说的那些啊 反正眼花缭乱的，组件库当然也不止那些
但是今天呢，尝试做一个自己的 ui 组件（还没到库那么一说呢，我这才写了一个，也是赶鸭子上架...）
2.这就开干！！！！！
今天就写一个 "Message" 组件，当然不像咱们平常一样，
封装好组件→import引入→然后写上标签→传递布尔值，来是否展示当前组件
当然我平时也是这么干（我是个菜鸡）
但今天不一样 是直接 将组件当成方法使用
写组件→引入组件→然后使用
这.这.这？？？ 这不和刚刚一样
等等 听我细说，使用不像第一种那样 传递一个值啊 ，又涉及到那子父子传参，子父传参，一想到这个就头疼
重点！！！关键在最后一步
使用？？？ 这一点，不同在这里 我们将它当成一个function一样 直接进行一个调用，而不是说在进行传递一个参数，来判断是否显示
先看一下如何使用！（要不你们还想往后读吗？？？o(╥﹏╥)o）
图片...
多少也是有一点不一样吧
只需要引入一个“$Message“ （注意看：这可是引入一个js，不是vue组件）
然后通过一个事件来触发他，就OK了 ！当然还可以传递一些数据
当然现在很多组件库也都是这样的吧（小声嘀咕）
不重要！咱们就是说，教大家如何封装嘛
教大家之前我先给大家讲一下思路，我们要分为哪些模块才能像刚刚一样，
引用js方法，来展示vue组件
画的有点丑，也选错了颜色（原谅色）
封装好的组件→js文件→使用者(user)
看起来有点抽象吗，可能会问？这不多此一举吗？
emmm....确实 多此一举，但是封装的时候麻烦，不得不说使用的时候爽啊！！！
不唠了，下面开始展示
2.1第一步创建vue组件（样式）
真是的 ，刚截图发现注释没写全
主要是div中的吧
backgroundColor:背景颜色
color:文字颜色
animationDuration：倒计时
content：内容
我怎么感觉我不解释，你们应该也看得懂吧，毕竟我写的变量都是蛮有语义化的
这只是vue组件
下面是需要存储的变量↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
2.1.1 存储vue的属性
这个还是很重要的，这个文件还单独创建一个文件来存储，方便后期拓展其他的属性
下面是最重要的js文件 登场！！！！
2.2 创建js 嫁接
我感觉我注释应该将的还是比较清楚的，我再展示一个向dom节点增添图中的所说的“父节点”
刚刚那个js代码是怎么个意思呢
点击按钮
↓↓↓↓↓↓↓
在父元素clas类名为“abc”，添加一个子节点（我承认我这名字有些随意）
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
然后倒计时移除这个子节点
你看return里面还有一个unmount方法，他就是一个倒计时的工具人，在规定的多少秒厚再将它刚刚创建的那个子元素移除，来达到展示的效果
下面return的方法是最重要的，可能有些抽象
我也不知道该怎么讲，大家应该能看懂吧.... 主要看最后两行，
使用刚刚上面的方法传递一个vue组件，然后结构出来两个属性，然后在进行短路运算，就OK了！
2.3开始使用！！！！
基本目录就是这样的↑↑↑↑↑↑↑↑↑，因为上传了npm，也可以直接下载进行使用了，v2可不兼容哦！
这都写1400字了 先等会 我上传一个github吧，
3.代码仓库，以及npm地址
(After 40 minutes)
这github 怎么和gitee 不一样呢，绑定秘钥提交代码搞半天
这是我的github仓库：https://github.com/121949793/zcq-prompt
这是我的npm网址：zcq-prompt - npm
使用的话直接就：npm install zcq-prompt 就ok了，后面的步骤就直接引入 使用就好了 上面有图的！
第一次搞博客，可能我做的组件也不太行，
哪有问题大佬尽管提出，晚上（毕竟我也是打工人！）我会尽快查看更改的，
后期在业余时间会更新更多的ui组件... ps：尽管做的很拉
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
