vue.js - 如何减小v-switch的宽度

Question

v-switch 似乎总是占用 100% 的宽度，如下所示。有没有办法将其可点击区域减少到最小？谢谢！

空白处可点击的 v-switch：https ://vuetifyjs.com/en/components/switches/#usage

标签： vue.jsvuetify.js

Answer 1

我建议您从vuetify文档中阅读此链接。v-switch继续在页面右侧的原因是它上面的v-container。您可以使用vuetify 网格系统修改布局，如下所示：

一个 Vue js 页面

<template>
  <div class="about">
    <v-container
      class="px-0"
      fluid
    >

      <v-row>
        <v-col md="4">
          <v-switch
            class="my-border"
            v-model="switch1"
            :label="`Switch 1: ${switch1.toString()}`"
          ></v-switch>
        </v-col>
      </v-row>
      
    </v-container>
  </div>
</template>

<script>
export default {
  data () {
      return {
        switch1: true,
      }
    },
}
</script>

<style scoped>
.my-border {
  border: 1px solid #000;
}
</style>