vue封装指令的directives小功能

vue组件封装的时候我们需要注意的问题,事件监听的销毁是这样做的,生命周期钩子可以查询相关的文档

export default {
  inserted(el, bindings, vnode) {
    console.log(el, bindings, vnode);
    document.addEventListener("click", (e) => listener(e, el, bindings), false);
  },
  //组件卸载的时候销毁事件
  unbind(el, bindings) {  
    console.log("我被卸载了");
    document.removeEventListener("click", (e) => listener(e, el, bindings));
  },
};
  • 抽取出来的方法
const listener = (e, el, bindings) => {
  if (e.target == el || el.contains(e.target)) {
    return false;
  }
  bindings.value(); //真实的close事件
};

每天坚持一点,多积累,一定可以看到星辰大海

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过 Vue 自定义指令来实现 loading 指令封装。 代码示例: ```javascript // 定义 loading 指令 Vue.directive('loading', { // 当被绑定的元素插入到 DOM 中时 inserted: function(el, binding) { // 创建 loading 元素 const loadingEl = document.createElement('div') loadingEl.className = 'loading-wrapper' loadingEl.innerHTML = '<div class="loading"></div>' // 根据传入的参数设置 loading 框的样式 if (binding.value && typeof binding.value === 'object') { const { color, size } = binding.value loadingEl.querySelector('.loading').style.borderTopColor = color || '#fff' loadingEl.querySelector('.loading').style.width = size || '20px' loadingEl.querySelector('.loading').style.height = size || '20px' } // 将 loading 元素添加到被绑定的元素中 el.appendChild(loadingEl) // 设置被绑定元素的 position 属性为 relative,以便让 loading 元素以相对于被绑定元素的位置进行定位 el.style.position = 'relative' }, // 当指令所在的组件的 VNode 更新时调用 update: function(el, binding) { // 如果传入的值为 true,则显示 loading 元素;否则隐藏 loading 元素 if (binding.value) { el.querySelector('.loading-wrapper').style.display = 'block' } else { el.querySelector('.loading-wrapper').style.display = 'none' } } }) ``` 在上述代码中,我们定义了一个名为 `loading` 的指令,当该指令绑定到某个元素上时,会在该元素下方添加一个 loading 框。当传入的值为 true 时,显示 loading 框,否则隐藏 loading 框。同时,我们还可以通过传入参数来自定义 loading 框的样式。 在组件中使用该指令,示例代码如下: ```html <template> <div v-loading="isLoading"></div> </template> <script> export default { data() { return { isLoading: false } }, methods: { fetchData() { this.isLoading = true // 发送请求 // 请求成功后,将 isLoading 设为 false } } } </script> ``` 在上述代码中,我们将 `isLoading` 变量绑定到 `v-loading` 指令上,当 `isLoading` 为 true 时,loading 框会显示出来。在发送请求前,我们将 `isLoading` 设为 true,请求成功后再将其设为 false,这样就可以在请求过程中显示 loading 框了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值