如何使用 bootstrap-vue 图标自定义 bootstrap-vue 下拉菜单？答案

【问题标题】：How to customize bootstrap-vue dropdown menu using bootstrap-vue icon?如何使用 bootstrap-vue 图标自定义 bootstrap-vue 下拉菜单？
【发布时间】：2021-06-15 05:20:22
【问题描述】：

我正在使用 vue js 和 bootstrap-vue。我正在尝试实现引导 vue 数据表。在表中，我想在操作列中使用树点垂直图标使用下拉菜单。这是我的表格视图..

My table view

在上表中，动作栏中的图标下拉菜单有两个图标。一个是三点垂直图标，另一个是箭头符号。我想从下拉菜单中删除箭头符号和边框。

这里是下拉菜单的代码..

<template v-slot:cell(actions)="data">
  <div>
    <b-dropdown id="dropdown-1" variant="outline-info">
      <template #button-content>
        <b-icon
          icon="three-dots-vertical"
          aria-hidden="true"
        ></b-icon>
      </template>

      <b-dropdown-item
        variant="primary"
        :to="{
          name: 'QuizEditPage',
          params: { id: data.item.id },
        }"
        >Edit</b-dropdown-item
      >
      <b-dropdown-item
        variant="danger"
        @click="deleteQuiz(data.item.id)"
        >Delete</b-dropdown-item
      >
    </b-dropdown>
  </div>
</template>

如何解决这个问题？请帮忙。

【问题讨论】：

您是否尝试将no-caret 添加到<b-dropdown>？
不，我没用过。

标签： vue.js drop-down-menu datatable icons bootstrap-vue

【解决方案1】：

使用no-caret 可以解决您的问题。

请注意，您可以将<custom-icon /> 替换为<b-icon icon='three-dots-vertical' />

Vue.component('customIcon', {
  template: `<svg xmlns="http://www.w3.org/2000/svg" width="15.352" height="15.355" viewBox="0 0 15.352 15.355">
        <path id="Union_19" data-name="Union 19" d="M-19.5-15958.5l-7.5,7.5,7.5-7.5-7.5-7.5,7.5,7.5,7.5-7.5-7.5,7.5,7.5,7.5Z" transform="translate(27.176 15966.178)" fill="none" stroke="#bbb" stroke-width="0.5"/>
    </svg>`
})

new Vue({
  el: "#app",
});

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <b-dropdown no-caret>
    <template #button-content>
        Custom Dropdown
        <custom-icon /> // or any other icons for example b-icon
    </template>
    <b-dropdown-item>First Action</b-dropdown-item>
    <b-dropdown-item>Second Action</b-dropdown-item>
  </b-dropdown>
</div>

【讨论】：