我们定义了一个自定义按钮，在某个特定数值下处于禁用/启用状态。到目前为止，这一切都工作正常： 我在用Vue。

const updateMyCustomButton = async (): Promise<void> => {

  await nextTick();
  const btn = document.querySelector(".fc-my-custom-button") as HTMLButtonElement | null;

  if (btn) {
    if (buss.value?.startDay === undefined) {
      btn.classList.add("is-disabled");
    } else {
      btn.classList.remove("is-disabled");
    }
  }
};

这段现在可以工作。
但如果尝试像下面这样添加 'disabled' 属性：

btn.toggleAttribute("disabled", ?);
btn.setAttribute("disabled", "?");
btn.disabled = ?;

问号 "?" 将被替换为 'true' 或 'false'。该属性被添加，按钮因此被禁用。
但如果我点击日历，按钮却已经处于启用状态，而此时实际上没有发生任何变化，所以它应该保持禁用。
似乎fullcalendar在我点击日历时重新渲染日历并移除了 "disabled" 属性。
通过添加/移除CSS类 'is-disabled' 时就不会发生这种情况。
我已经尝试了 'viewDidMount'，也在尝试寻找其他的钩子函数，以调用 'updateMyCustomButton'。

我想使用该属性，因为这样整个应用中的行为将保持一致。比如说，我有cursor: not-allowed和 pointer-events: none，如果我把鼠标悬停在禁用按钮上，它不会显示任何东西，而其他禁用按钮会显示一个带红圈和横杠的图标。

解决方案

也许你还可以添加更多的代码 / HTML来帮助解决问题，例如，在点击日历时是否会发生某些动作 / 代码？

通常在像Vue这样的框架中，不建议直接查询DOM。最好是有一个变量的引用，模板中的HTML可以据此禁用或启用HTML元素（比如按钮）。例如：

<button :disabled="isDisabled" @click="updateMyCustomButton">Text</button>

然后在你的脚本中：

import { ref } from vue;
const isDisabled = ref(false);
const updateMyCustomButton = () => isDisabled.value = true;