vuetify：带有图像作为标签的 v-checkbox

Question

我正在尝试创建一个带有图像作为标签的 v-checkbox。我遇到的问题是我无法为图像指定特定大小（宽度），以便它保持在给定的 v-col space 中。图像总是比给定的 v-col space.

宽很多

模板中的#append 也不起作用。

代码如下：

    <v-col
      xs="12"
      lg="3"
    >
      <v-checkbox
        v-model="selectedItem"
        :value="item.id"
      >
        <template #label>
          <v-img
            :src="item.logo"
            style="width: 100%"
          />
        </template>
      </v-checkbox>
    </v-col>

我的目标是用几个列排成一行。第一个应该是带有图像而不是标签的复选框。复选框和图像应在一行中彼此相邻且图像不应比列宽。

也许有人有想法。

Answer 1

您可以在标签槽内使用v-avatar来控制图像大小。查看下面的演示：

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    checkbox: false,
    imageSize: 50,
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-slider v-model="imageSize" label="image size" min="25" max="128" style="width: 200px"></v-slider>
        <v-checkbox v-model="checkbox">
          <template v-slot:label>
            <v-avatar tile :size="imageSize">
              <img
                src="https://picsum.photos/id/1025/200"
              > 
            </v-avatar>
          </template>
        </v-checkbox>
      </v-container>
    </v-main>
  </v-app>
</div>

vuetify：带有图像作为标签的 v-checkbox

vuetify: v-checkbox with image as label

vuetify.js