yw-common-list/lib/advanced-query/src/pickerClearable.js

基于vxe-table封装的自定义可配置表格

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
// directives/pickerClearable.js
var pickerClearable = {
  // 使用 bind 钩子，更早地获取组件实例并尝试监听
  bind: function bind(el, binding, vnode) {
    var picker = vnode.componentInstance;

    if (!picker) {
      console.warn('[pickerClearable] 未获取到组件实例');
      return;
    } // console.log('[pickerClearable] 指令已绑定', picker)
    // 标记是否已插入按钮，避免重复操作


    var inserted = false; // 使用 $watch 来监听 pickerVisible 属性的变化，
    // 这比 $on('visible-change') 更底层、更可靠，因为它直接关联到组件内部状态。
    // 需要在组件实例上 $watch，因为它不是响应式的。
    // 注意：pickerVisible 是组件内部属性，这种监听方式需要确保组件已初始化，但它仍然比事件监听更直接。
    // 我们可以结合 $nextTick 来确保组件内部状态已就绪。

    picker.$nextTick(function () {
      // 监听 pickerVisible 的变化
      picker.$watch('pickerVisible', function (newVal) {
        // console.log('[pickerClearable] pickerVisible 变为: ', newVal)
        if (newVal && !inserted) {
          // 面板打开，且按钮未插入，执行插入逻辑
          // 等待 DOM 更新，确保面板元素已渲染
          picker.$nextTick(function () {
            // ... (查找 panel 和 footer 并插入按钮的代码，与之前一致) ...
            // 为了简洁，此处省略查找和插入的 DOM 操作代码，直接复用你之前的逻辑。
            // 关键变化是触发的时机改为了监听 pickerVisible。
            var panel = el.querySelector('.el-picker-panel');

            if (!panel) {
              var panels = document.querySelectorAll('.el-picker-panel');
              if (panels.length) panel = panels[panels.length - 1];
            }

            if (!panel) return;
            var footer = panel.querySelector('.el-picker-panel__footer');
            if (!footer || footer.querySelector('.custom-picker-clear-btn')) return;
            var btn = document.createElement('button');
            btn.textContent = '清空';
            btn.className = 'el-button el-button--text el-button--mini el-picker-panel__link-btn';
            btn.classList.add('custom-picker-clear-btn');
            btn.addEventListener('click', function (e) {
              e.stopPropagation();
              picker.$emit('input', null);
              picker.handleClose();
            });
            footer.insertBefore(btn, footer.firstChild);
            inserted = true; // console.log('[pickerClearable] 清空按钮已插入')
          });
        }
      });
    });
  }
  /*,
  // 可以保留 inserted 作为备用，但主要逻辑移到 bind 中
  inserted (el, binding, vnode) {
   // 可以留空或添加简单日志，但核心逻辑已在 bind 中处理
   // console.log('[pickerClearable] inserted 触发，逻辑已由 bind 处理')
  } */

};
var _default = pickerClearable;
exports.default = _default;