如何禁用故事书的键盘快捷键

Posted 2023-02-19

【中文标题】如何禁用故事书的键盘快捷键

【英文标题】：How to disable storybook's keyboard shortcuts

【发布时间】：2021-04-01 20:13:09

【问题描述】：

我正在将 storybook 6.0.25 用于我的 vue 项目文档之一，其中我在小于和大于键盘按钮的记录之间切换。 但是当我按下小于时，故事书会使用它自己的快捷方式来响应键盘，以打开“关于”页面。 有没有办法让故事书停止实现其所有或指定的快捷方式？ 其他快捷键是's'、'd'、'f'，开发人员显然可以将它们用于不同的目的！ 下面是我的故事书 vue 项目中的 main.js 配置文件：

const path = require('path');
module.exports = 
  stories: ['../../src/**/*.stories.@(js|ts)'],
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-actions',
    '@storybook/addon-controls'
  ],
  webpackFinal: async (config,  configType ) => 
    // Use Sass loader for vuetify components
    config.module.rules.push(
      test: /\.s(a|c)ss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    );
    config.module.rules.push(
      resolve: 
        alias: 
          '@': path.resolve(__dirname, '../src'),
          vue: 'vue/dist/vue.js',
          'vue$': 'vue/dist/vue.esm.js',          
        ,
      ,
    );
    // Return the altered config
    return config;
  ,

【参考方案1】：

您可以通过设置enableShortcuts:true/false 打开或关闭快捷方式。更多信息可以在here找到。

【讨论】：

是的，我看到了“做什么”，但不幸的是，我不知道在哪里用 vuejs 编写这个配置更改。我尝试在 vue.config 和 storybook 的配置中进行编辑，但没有任何区别！

【参考方案2】：

好的，我明白了。 清除浏览器的 localStorage 后，在我的“preview.js”文件中，我必须添加以下内容来更改配置

import  addons  from '@storybook/addons';

addons.setConfig(
  enableShortcuts: false
);

【参考方案3】：

我发现的其他解决方法是在 preview.js 文件中添加以下部分，但在故事书 v7 中再次不推荐使用上述解决方案（如故事书控制台中所建议的那样）：

import  addParameters  from '@storybook/vue';
addParameters(
  options: 
    enableShortcuts: false
  
);