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

【问题标题】：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;
  },
}

【问题讨论】：

标签： javascript typescript vue.js vuejs2 storybook

【解决方案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
  }
});

【讨论】：