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

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

// directives/pickerClearable.js
const pickerClearable = {
  // 使用 bind 钩子，更早地获取组件实例并尝试监听
  bind (el, binding, vnode) {
    const picker = vnode.componentInstance
    if (!picker) {
      console.warn('[pickerClearable] 未获取到组件实例')
      return
    }

    // console.log('[pickerClearable] 指令已绑定', picker)

    // 标记是否已插入按钮，避免重复操作
    let inserted = false

    // 使用 $watch 来监听 pickerVisible 属性的变化，
    // 这比 $on('visible-change') 更底层、更可靠，因为它直接关联到组件内部状态。
    // 需要在组件实例上 $watch，因为它不是响应式的。
    // 注意：pickerVisible 是组件内部属性，这种监听方式需要确保组件已初始化，但它仍然比事件监听更直接。
    // 我们可以结合 $nextTick 来确保组件内部状态已就绪。
    picker.$nextTick(() => {
      // 监听 pickerVisible 的变化
      picker.$watch('pickerVisible', (newVal) => {
        // console.log('[pickerClearable] pickerVisible 变为: ', newVal)
        if (newVal && !inserted) {
          // 面板打开，且按钮未插入，执行插入逻辑
          // 等待 DOM 更新，确保面板元素已渲染
          picker.$nextTick(() => {
            // ... (查找 panel 和 footer 并插入按钮的代码，与之前一致) ...
            // 为了简洁，此处省略查找和插入的 DOM 操作代码，直接复用你之前的逻辑。
            // 关键变化是触发的时机改为了监听 pickerVisible。
            let panel = el.querySelector('.el-picker-panel')
            if (!panel) {
              const panels = document.querySelectorAll('.el-picker-panel')
              if (panels.length) panel = panels[panels.length - 1]
            }
            if (!panel) return
            const footer = panel.querySelector('.el-picker-panel__footer')
            if (!footer ||
              footer.querySelector('.custom-picker-clear-btn')) return

            const 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', (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 处理')
  } */
}

export default pickerClearable