show-menu about naive-ui HOT 3 OPEN

这是因为受控模式导致的，菜单会优先使用 show-menu 这个 props 来控制显示状态。

你将 show-menu 设置为 true 的需求是什么呢，或许我们可以根据需求来探讨更好的使用方式。

from naive-ui.

这是因为受控模式导致的，菜单会优先使用 show-menu 这个 props 来控制显示状态。

你将 show-menu 设置为 true 的需求是什么呢，或许我们可以根据需求来探讨更好的使用方式。

我希望是初始状态为显示让用户知道这个菜单有哪些功能，然后为了为了方便阅读，可以对菜单进行收缩和展开

from naive-ui.

这是因为受控模式导致的，菜单会优先使用 show-menu 这个 props 来控制显示状态。
你将 show-menu 设置为 true 的需求是什么呢，或许我们可以根据需求来探讨更好的使用方式。

我希望是初始状态为显示让用户知道这个菜单有哪些功能，然后为了为了方便阅读，可以对菜单进行收缩和展开

创建一个初始值为 true 变量，假设是 const showMenu = ref(true)，然后给组件加上 v-model:show-menu="showMenu" 应该就可以解决了。

有一种特殊情况是，当 menu-trigger 为 'hover' 的时候，鼠标外部移动会使 FloatButton 自动隐藏。如果你希望用户在首次碰到 FloatButton 的之前 FloatButton 不要自动隐藏，你可以自主监听 mousemove 事件，然后调控 showMenu 的受控行为，例如：

const floatButtonRef = ref();

const showMenu = ref(true);
let allowModifyShowMenu = false;

const setShowMenu = (value: boolean) => {
  if (allowModifyShowMenu) {
    showMenu.value = value;
  }
};

const handleMousemove = (e: MouseEvent) => {
  if (floatButtonRef.value?.$el.contains(e.target)) {
    allowModifyShowMenu = true;
    document.removeEventListener("mousemove", handleMousemove);
  }
};

document.addEventListener("mousemove", handleMousemove);

这里是在线用例 https://codesandbox.io/p/sandbox/wonderful-lovelace-vc32yp?file=%2Fsrc%2FDemo.vue%3A41%2C1-59%2C57

from naive-ui.