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

Question

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

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>

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

Answer 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88eae7e7fcfbfcfae9f8c8bca6bda6bb" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="40222f2f3433343221306d36352500726e72716e72" rel="noreferrer noopener nofollow">[email protected]</a>/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b0d0e1e3b49554d554a49" rel="noreferrer noopener nofollow">[email protected]</a>/dist/vue.min.js"></script>
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a5a8a8b3b4b3b5a6b7eab1b2a287f5e9f5f6e9f5" rel="noreferrer noopener nofollow">[email protected]</a>/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>