动态更改customButtons上的文本

德米特里·康普

我想要日历的“编辑/只读”按钮。

一切正常，但是当我单击一天后更改视图/天后，按钮的默认名称被添加到自定义按钮中，例如：“ stopedit”而不是“ stop”

知道如何解决吗？

customButtons: {
  toggleEditButton: {
    text: "edit",
    click: function () {
      if (calendar.getOption("editable")) {
        calendar.setOption("editable", false);
        calendar.setOption("selectable", false);
        event.target.innerHTML = "edit";
      } else {
        calendar.setOption("editable", true);
        calendar.setOption("selectable", true);
        event.target.innerHTML = "stop";
      }
    }
  }
}

https://codepen.io/DimaKompot/pen/NWGJJxB?editors=0011

塞巴斯蒂安·B。

我以前从未使用过Fullcalendar，但似乎在重新渲染时，Fullcalendartext: "edit"通过将文本附加到DOM中来设置（第3行）定义的按钮文本。由于您已经通过设置了内容innerHTML，在这种情况下，您将获得editedit或stopedit。

摆弄其他组件的DOM总是很危险的，因为我们自己的更改经常会与组件的渲染逻辑相冲突，并且很难找到正式的（或非正式的）和足够好的扩展点。因此，如果可能的话，最好遵循组件规则。）

由于customButtonsAPI不公开任何渲染逻辑，因此在下一个最佳想法是text在运行时更改选项setOption。

一些组件库（例如DevExpress）提供了类似的路径语法calendar.setOption('customButtons.toggleEditButton.text', 'stop')，但是没有用。

但幸运的是，在替换整个 customButtons选项时，Fullcalendar尊重更改并重新渲染按钮的方法：

var customButtonsOption = calendar.getOption('customButtons');
calendar.setOption("customButtons", {
    ...customButtonsOption,
    toggleEditButton: {
        ...customButtonsOption.toggleEditButton,
        text: 'edit'
    }
});

完整的工作示例：https : //codepen.io/sbusch/pen/abvxYXm?editors=0010

注意：我使用对象传播运算符...，根据您的构建环境和目标浏览器，该运算符可能不可用。在这种情况下，（非常冗长）的解决方法是使用Object.assign。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。