Vue项目中Storybook内导航链接组件点击跳转问题求助

问题场景 #

在Vue项目中用Storybook展示NavigationLink组件时，点击组件内的<a>标签会跳转到Storybook的Introduction页面，需要完全禁止跳转并让链接呈现不可点击的状态。

现有组件代码（NavigationLink.vue） #

<ul>
    <li :class="{selected: isSelected}">
        <a :href="linkUrl">
            <i :class="'isax isax-' + linkIcon"></i>
            {{ linkName }}
        </a>
    </li>
</ul>

现有Story代码（NavigationLink.stories.js） #

import NavigationLink from '../app/javascript/components/NavigationLink.vue'

export default {
    title: 'Navigation/Links',
    component: NavigationLink,
    argTypes: { ...argTypes here... }
}

const Template = (args) => ({
    components: { NavigationLink },
    setup() {
        return { args };
    },
    template: '<NavigationLink v-bind="args"></NavigationLink>',
});

export const UnselectedLink = Template.bind({});
UnselectedLink.args = { ...args here... }

export const SelectedLink = Template.bind({});
SelectedLink.args = { ...args here... }

可行解决方案 #

方案一：在Story模板中直接阻止点击事件 #

不用修改组件代码，直接在Story模板里绑定事件阻止默认跳转，同时添加样式让链接看起来不可点击：

const Template = (args) => ({
    components: { NavigationLink },
    setup() {
        return { args };
    },
    template: `
        <NavigationLink 
            v-bind="args" 
            @click.prevent
            style="pointer-events: none; cursor: default;"
        ></NavigationLink>
    `,
});

方案二：给组件添加环境判断，动态禁用链接 #

让组件自动识别Storybook环境，在该环境下禁用链接，生产环境正常工作：

1. 修改NavigationLink.vue组件代码：

<ul>
    <li :class="{selected: isSelected}">
        <a 
            :href="isStorybook ? 'javascript:void(0)' : linkUrl"
            :style="isStorybook ? { pointerEvents: 'none', cursor: 'default' } : {}"
            @click="isStorybook && $event.preventDefault()"
        >
            <i :class="'isax isax-' + linkIcon"></i>
            {{ linkName }}
        </a>
    </li>
</ul>

<script setup>
import { ref } from 'vue';

const props = defineProps(['linkUrl', 'linkIcon', 'linkName', 'isSelected']);

// 判断是否处于Storybook环境
const isStorybook = ref(
    import.meta.env.STORYBOOK || window.location.pathname.includes('/storybook/')
);
</script>

方案三：通过Story的args覆盖链接地址并添加禁用样式 #

直接在Story的示例参数里把链接设为无效值，再添加样式禁用点击：

1. 修改Story中的示例args：

export const UnselectedLink = Template.bind({});
UnselectedLink.args = {
    linkUrl: 'javascript:void(0)',
    linkIcon: 'home',
    linkName: '首页',
    isSelected: false
}

export const SelectedLink = Template.bind({});
SelectedLink.args = {
    linkUrl: 'javascript:void(0)',
    linkIcon: 'home',
    linkName: '首页',
    isSelected: true
}

2. 在Story模板里添加样式（或在preview.js全局配置）：

const Template = (args) => ({
    components: { NavigationLink },
    setup() {
        return { args };
    },
    template: `
        <div>
            <NavigationLink v-bind="args"></NavigationLink>
            <style>
                .NavigationLink a {
                    pointer-events: none;
                    cursor: default;
                }
            </style>
        </div>
    `,
});

注意：需替换.NavigationLink为组件实际的类名来定位<a>标签。

内容的提问来源于stack exchange，提问作者nope2023