Vue.js Vuetify v-select与图像

我正在使用Vuetify v-select组件：

我想用如下图像进行选择：

---

但是我在文档中没有找到任何内容

您必须使用项目槽

---

jsIDLE:

您必须使用项目槽

---

jsIDLE:

您可以利用这些插槽将图像内容填充到select上。我过去常收到各国的国旗

请参阅示例代码笔： 我无法填写完整的国家名单。如果你能把它填好并分享，那就太好了，我也可以在某处使用它D

<v-select
  v-model="select"
  :items="countries"
  label="Select"
  item-text="name"
  >
  <template v-slot:item="slotProps">
    <i :class="['mr-2', 'em', slotProps.item.flag]"></i>
      {{slotProps.item.name}}
    </template>
 </v-select>

---

您可以利用插槽将图像内容填充到select上。我过去常收到各国的国旗

请参阅示例代码笔： 我无法填写完整的国家名单。如果你能把它填好并分享，那就太好了，我也可以在某处使用它D

<v-select
  v-model="select"
  :items="countries"
  label="Select"
  item-text="name"
  >
  <template v-slot:item="slotProps">
    <i :class="['mr-2', 'em', slotProps.item.flag]"></i>
      {{slotProps.item.name}}
    </template>
 </v-select>

---

我自己的组件实现使用

而不是

，因此从UI角度看，它看起来像是所需的模拟，没有

的所有UI（如底部边框、箭头、标签等…）

简介：我被要求创建一个下拉选择器来在不同语言之间切换。选择其他国家/地区将导致使用相应的选定语言翻译web应用程序

TL；DR:工作笔： （很抱歉添加了一些额外的样式，不知道为什么Vuetify的样式没有加载，而且看起来非常糟糕。在我的项目中，它看起来非常棒-我保证！）

模板：

<v-menu offset-y>
  <template v-slot:activator="{ on, attrs }">
    <img
      style="width: 32px"
      class="d-block"
      :src="getIcon()"
      v-bind="attrs"
      v-on="on"
    />
  </template>
  <v-list>
    <v-list-item
      v-for="(lang, index) in langs"
      :key="index"
      class="lang-menu-item"
    >
      <div class="d-flex align-center" @click="setLang(lang.value)">
        <img style="width: 32px"
              :src="lang.iconSrc"
              class="mr-2 d-block"/>
        <span>{{ lang.text }}</span>
      </div>
    </v-list-item>
  </v-list>
</v-menu>

对上面代码的一些解释

selectedLang

是我们将在选择新语言时更改的被动变量。将默认为当前在

i18n

区域设置中的任何内容

langs

：给定一个对象列表，其中包含语言名称（将在下拉列表中打印在屏幕上的文本）、稍后将应用于

i18n

元素以更改应用程序的区域设置的值，以及指向代表国家的图像的链接。也可以是svg的base64，也可以是标志字体的类名，等等

getIcon

：计算出一个语言值（如

en

或

fr

），并在

langs

中迭代所有语言，返回与下拉列表和activator元素中显示的给定值相匹配的图像

setLang

：从下拉列表中注册单击事件后更改语言的方法，触发此方法。当然，您将更改此方法以在项目中执行任何您想要的操作

CSS（语言sass）：

---

只要把清单弄清楚一点就行了。背景颜色是我在项目中为整个应用程序的默认背景使用的变量。

我自己的组件实现使用

而不是

，因此在UI方面它看起来像所需的模拟，没有

的所有UI（如底部边框、箭头、标签等）

简介：我被要求创建一个下拉选择器来在不同语言之间切换。选择其他国家/地区将导致使用相应的选定语言翻译web应用程序

TL；DR:工作笔： （很抱歉添加了一些额外的样式，不知道为什么Vuetify的样式没有加载，而且看起来非常糟糕。在我的项目中，它看起来非常棒-我保证！）

模板：

<v-menu offset-y>
  <template v-slot:activator="{ on, attrs }">
    <img
      style="width: 32px"
      class="d-block"
      :src="getIcon()"
      v-bind="attrs"
      v-on="on"
    />
  </template>
  <v-list>
    <v-list-item
      v-for="(lang, index) in langs"
      :key="index"
      class="lang-menu-item"
    >
      <div class="d-flex align-center" @click="setLang(lang.value)">
        <img style="width: 32px"
              :src="lang.iconSrc"
              class="mr-2 d-block"/>
        <span>{{ lang.text }}</span>
      </div>
    </v-list-item>
  </v-list>
</v-menu>

对上面代码的一些解释

selectedLang

是我们将在选择新语言时更改的被动变量。将默认为当前在

i18n

区域设置中的任何内容

langs

：给定一个对象列表，其中包含语言名称（将在下拉列表中打印在屏幕上的文本）、稍后将应用于

i18n

元素以更改应用程序的区域设置的值，以及指向代表国家的图像的链接。也可以是svg的base64，也可以是标志字体的类名，等等

getIcon

：计算出一个语言值（如

en

或

fr

），并在

langs

中迭代所有语言，返回与下拉列表和activator元素中显示的给定值相匹配的图像

setLang

：从下拉列表中注册单击事件后更改语言的方法，触发此方法。当然，您将更改此方法以在项目中执行任何您想要的操作

CSS（语言sass）：

---

只要把清单弄清楚一点就行了。背景颜色是我在项目中为整个应用程序的默认背景使用的变量。

这不再有效。查看codepen示例，注意选择框中显示的值为

[Object Object]

。你知道怎么解决这个问题吗？它正在工作，我刚刚拍了一张截图。兄弟，这很容易用item text=“name”属性修复。钢笔的想法是显示如何配置下拉列表以放置国旗和国家名称。对不起，我刚刚添加了。：）这不管用了。查看codepen示例，注意选择框中显示的值为

[Object Object]

。你知道怎么解决这个问题吗？它正在工作，我刚刚拍了一张截图。兄弟，这很容易用item text=“name”属性修复。钢笔的想法是显示如何配置下拉列表以放置国旗和国家名称。对不起，我刚刚添加了。：）我更新了答案，现在它又起作用了：）值得注意的是，它必须是名为

item

的变量，并且不能修改，因为它取决于

v-select

的

items

属性。因此，模板中内部变量的自定义命名是不可能的。例如，如果我有一个

：items=“dogs”

的列表，我无法暴露

dog

实例，必须使用

item

实例。我更新了答案，现在它再次工作：）它是工作的

<v-menu offset-y>
  <template v-slot:activator="{ on, attrs }">
    <img
      style="width: 32px"
      class="d-block"
      :src="getIcon()"
      v-bind="attrs"
      v-on="on"
    />
  </template>
  <v-list>
    <v-list-item
      v-for="(lang, index) in langs"
      :key="index"
      class="lang-menu-item"
    >
      <div class="d-flex align-center" @click="setLang(lang.value)">
        <img style="width: 32px"
              :src="lang.iconSrc"
              class="mr-2 d-block"/>
        <span>{{ lang.text }}</span>
      </div>
    </v-list-item>
  </v-list>
</v-menu>

data () {
  return {
    selectedLang: this.$i18n.locale,
    langs: [
      {
        value: 'en',
        text: 'English',
        iconSrc: require('../assets/flags/eng.svg')
      },
      {
        value: 'fr',
        text: 'French',
        iconSrc: require('../assets/flags/fr.svg')
      },
    ],
  }
},
computed: {
  getIcon () {
    return (item) => {
      let image = item || this.selectedLang
      let iconSrc = null
      Object.keys(this.langs).forEach( (index) => {
        if (this.langs[index].value === image) {
          iconSrc = this.langs[index].iconSrc
        }
      })
      return iconSrc
    }
  },
},
methods: {
  setLang(lang) {
    this.selectedLang = lang
    this.$i18n.locale = lang
  },
}

.lang-menu-item
  cursor: pointer
  &:hover
    background-color: var(--v-primaryBG-base)