本帖最后由 Ellia.Duan 于 2022-10-28 16:08 编辑
在使用在线表格编辑器过程中,往往需要自定义一些符合需求场景的命令,如保存模板结构时,想要获取一些其他数据,这时候可以在execute方法中重写saveSchema命令。如下面的代码所示:
- let config = GC.Spread.Sheets.Designer.DefaultConfig;
- var command = GC.Spread.Sheets.Designer.getCommand("saveSchema");
- var oldExecute = command.execute;
- command.execute = function (context, propertyName){
- console.log('触发execute')
- oldExecute.call(this,context, propertyName)
- }
- config.commandMap = {
- "saveSchema":command
- }
复制代码 但是在Vue中使用路由跳转时,发现一个问题,随着路由跳转的次数增多,execute会执行越来越多,这是怎么回事了?
咱们先复现一个这个问题:
步骤一:访问http://127.0.0.1:5173/designer,点击”保存模板结构“按钮,观察控制台,随后点击”go“按钮,跳转至http://127.0.0.1:5173/test 页面
步骤二:在 http://127.0.0.1:5173/test 页面点击”返回“按钮,重新跳转回 http://127.0.0.1:5173/designer
步骤三:此时重复第一步骤,发现控制台打印了两条数据
重复上述步骤,发现打印次数越来越多。造成此结果的原因是:
每次,命令都是从全局静态命令映射 (GC.Spread.Sheets.Designer.getCommand) 中获取。然后重写了自定义命令覆盖了之前的,并注册回全局静态命令映射。
因此,下一次,得到的命令是之前覆盖的命令。
那么,怎么解决这个问题呢?这里可以设置一个开关。如下代码所示:判断command.flag是否为真,因为首次加载时,command.flag为undefined ,所以可以进行命令注册,注册结束后令command.flag为false。这样子路由跳转后,就不会再注册自定义命令啦。
- let config = GC.Spread.Sheets.Designer.DefaultConfig;
- var command = GC.Spread.Sheets.Designer.getCommand("saveSchema");
- var oldExecute = command.execute;
- if(!command.flag){
- command.execute = function (context, propertyName){
- console.log('触发execute')
- oldExecute.call(this,context, propertyName)
- }
- config.commandMap = {
- "saveSchema":command
- }
- command.flag = true;
- }
复制代码
|