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

Question

我正在使用 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;  },}

Answer 1

您可以通过设置打开或关闭快捷方式enableShortcuts:true/false。

Answer 2

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

import { addons } from '@storybook/addons';

addons.setConfig({

  enableShortcuts: false

});

Answer 3

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

import { addParameters } from '@storybook/vue';

addParameters({

  options: {

    enableShortcuts: false

  }

});