如何修改 bootstrap-vue 中的下拉项以打开模式？答案

【问题标题】：How can I modify a dropdown item in bootstrap-vue to open a modal?如何修改 bootstrap-vue 中的下拉项以打开模式？
【发布时间】：2021-03-25 16:08:48
【问题描述】：

如何修改下面的下拉菜单以在 bootstrap vue 中包含模式：

我希望我的一些下拉项打开一个模态，一些成为 href。我对href没问题。但是我该如何让这些下拉项目中的一些打开模式呢？

<template>
  <b-dropdown-item v-bind="$props" :href="to ? undefined : href || '#'">
    <feather-icon size="1x" :icon="icon"/>
      {{name}}
  </b-dropdown-item>
</template>
<script>
import FeatherIcon from '@/components/FeatherIcon';
export default {
  name: 'feather-dd-item',
  props: ['icon', 'name', 'href', 'to'],
  components: { FeatherIcon }
};
</script>

【问题讨论】：

标签： javascript vue.js bootstrap-vue

【解决方案1】：

看起来您正在将组件的 $props 传播到 <b-dropdown-item> 上。

您不能真正将v-b-modal 添加到组件的道具中，因为这意味着在包装器上设置v-b-modal，这将使包装器打开模式，而不是下拉项。所以我们需要一个替代道具来传输模态的id。我建议modalTarget.
在标记内，只需将 modalTarget（包含模态 ID）映射到 v-b-modal 指令：
<b-dropdown-item v-b-modal='modalTarget' />。

显然，您必须将modalTarget 添加到props 数组中。最终标记应如下所示：

<template>
  <b-dropdown-item v-b-modal="modalTarget"
                   v-bind="$props"
                   :href="to ? undefined : href || '#'">
    <feather-icon size="1x" :icon="icon"/>
    {{name}}
  </b-dropdown-item>
</template>
<script>
import FeatherIcon from '@/components/FeatherIcon';
export default {
  name: 'feather-dd-item',
  props: ['icon', 'name', 'href', 'to', 'modalTarget'],
  components: { FeatherIcon }
};
</script>

应该可以。现在你可以使用

<feather-dd-item modalTarget="my-modal" />

，如果找到id="my-modal"，它将打开模态框。

【讨论】：