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

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  }});