最近想体验下自定义指令功能，看了看文档和 vue2 差异不大，语法如下：,起初，最大的痛点是需要手动创建 dom ，然后插入 el 中。,这样好难受啊，我不想写原生 dom ，能不能写个组件渲染到指令里呢？,我想起了我之前看到的几个 vue 接口，,h函数用法如下：,例如：,我们使用h函数创建了一个 VNode，它表示一个包含 div、h1、p 的 DOM 结构。其中，div 的 class 属性为 container,然而，当我使用 props 为组件传递值时，发现是徒劳的。,仅仅如下图一样，我以为是给组件的 props，实际上是 dom 的 props。,
图片,此时我们的组件只能通过 $attrs 来获取这些 props 了，如下：,接着我们给组件实现 loading 动画，当然你也可以直接使用组件库的 loading 组件。,我的实现如下：,接下来我们封装自定义指令。,我们的思路是：,为了可以应对更多场景，我们期望可以配置加载中的提示信息，不配置使用默认值，如果是 false ，那么仅展示 loading 图。所以参数类型如下：,由于可能是布尔值，也可能是对象，我们需要初始化配置参数,接着再 mounted 阶段获取格式化后的 loading 和 option，如果为 true 则直接渲染组件。,如果进入 update 阶段，则根据情况选择渲染 laoding 组件还是 vnode。,我们验证下功能：,
图片,
图片,
图片,今天的分享就到这了，如果有问题，可以评论区告诉我，我会及时更正。,以下是完整的代码。,
文章版权声明
1 原创文章作者：cmcc，如若转载，请注明出处： https://www.52hwl.com/27681.html
2 温馨提示：软件侵权请联系469472785#qq.com（三天内删除相关链接）资源失效请留言反馈
3 下载提示：如遇蓝奏云无法访问，请修改lanzous(把s修改成x)
4 免责声明：本站为个人博客，所有软件信息均来自网络 修改版软件，加群广告提示为修改者自留，非本站信息，注意鉴别
微信扫一扫 
支付宝扫一扫 