Arco-design ＜a-range-picker＞ 快捷键日期点击后不关闭面板

需求：点击快捷日期，面板预览日期，点击确定后触发事件

思路：手动控制面板开启和关闭，点击input时开启，点击面板确定或除input和面板的其他位置时关闭面板

 <a-range-picker
        id="input"
        v-model="dateDault"
        :popup-visible="popupVisible"
        shortcuts-position="left"
        :show-confirm-btn="true"
        :shortcuts="rangeShortcuts"
        @click="openPanel"
        @ok="onChange"
      />

快捷选项如下：

const rangeShortcuts = reactive([
    {
      label: '昨日',
      value: [
        moment().subtract(1, 'day'),
        moment().subtract(1, 'day'),
      ],
    },
    {
      label: '今日',
      value: [moment(), moment()],
    },
    {
      label: '最近一周',
      value: [
        moment().subtract(1, 'week'),
        moment(),
      ],
    },
    {
      label: '最近一个月',
      value: [
        moment().subtract(1, 'month'),
        moment(),
      ],
    },
    {
      label: '最近三个月',
      value: [
        moment().subtract(3, 'month'),
        moment(),
      ],
    },
    {
      label: '最近半年',
      value: [
        moment().subtract(6, 'month'),
        moment(),
      ],
    },
    {
      label: '最近一年',
      value: [
        moment().subtract(1, 'year'),
        moment(),
      ],
    },
  ]);

 控制面板显示的事件：

  // 关闭弹窗
  const closePanel = () => {
    popupVisible.value = false;
    // 移除点击事件监听器
    document.removeEventListener('click', outsideClick);
  };

  // 开启弹窗
  const openPanel = () => {
    popupVisible.value = true;
    document.addEventListener('click', outsideClick);
  };

  // 点击弹窗外部时的事件处理函数
  const outsideClick = (e) => {
    const popup = document.querySelector('.arco-picker-range-container');
    const inputDom = document.getElementById('input');
    if (!popup.contains(e.target) && !inputDom.contains(e.target)) {
      closePanel();
    }
  };

  // 点击确定时触发
  const onChange = () => {
    // 关闭弹窗
    closePanel();
    // 触发事件（自定义）
    emit('search');
  };