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

Question

我正在使用vue js和bootstrap-vue。我正在尝试实现bootstrap vue datatables.In表，我想使用dropdownt在操作列中使用树-点-垂直图标。这是我的表视图..

My table view

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

下面是下拉菜单的代码。

<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>

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

Answer 1

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

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

​

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>

​