使 Vuetify 的 v-select 更小，以便它可以很好地适合段落答案

【问题标题】：Make Vuetify's v-select smaller so that it can nicely fit within a paragraph使 Vuetify 的 v-select 更小，以便它可以很好地适合段落
【发布时间】：2020-11-17 17:20:21
【问题描述】：

我有一个段落，需要在它的中间有一个选择框。但是，v-select 有点太大了，似乎无法控制它的宽度。

这是目前的样子：

new Vue({
  el: '#root',
  vuetify: new Vuetify(),
  template: `
  <div style="{ margin: '20px' }">
    <v-row>
      <v-col col="12">
        <p>I would like to have the following select: <v-select placeholder="0"/> shrunk and displayed with this text all in line. How can I do that?</p>
      </v-col>
    </v-row>
   </div>
  `
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<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>
<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">

<div id="root"></div>

基于API docs，似乎没有一种简单的方法来控制它的大小。完成这项工作的正确方法是什么？

【问题讨论】：

标签： javascript css vue.js vuejs2 vuetify.js

【解决方案1】：

您必须使用自己的样式覆盖 Vuetify css。这样做的一个好方法是为您的 UI 或您需要在级联中具有更高级别的特定事物创建某种覆盖类。然后您可以在该类中调用 Vuetify 类，并且大多数情况下它会使您的样式最后触发。如果仍然失败，您可以诉诸于在无法识别的样式之后添加!important。

new Vue({
          el: '#root',
          vuetify: new Vuetify(),
          template: `
          <div class="override-class" style="{ margin: '20px' }">
            <v-row>
              <v-col col="12">
                <p>I would like to have the following select: <v-select placeholder="0"/> shrunk and displayed with this text all in line. How can I do that?</p>
              </v-col>
            </v-row>
           </div>
          `
          })

.override-class .v-input {
  display: inline-block;
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
        <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>
        <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">

        <div id="root"></div>

【讨论】：

【解决方案2】：

您可以应用内联 CSS 样式 style="width:64px;display:inline-flex"

new Vue({
  el: '#root',
  vuetify: new Vuetify(),
  template: `
  <div style="{ margin: '20px' }">
    <v-row>
      <v-col col="12">
        <p>I would like to have the following select: <v-select style="width:64px" placeholder="0"/> shrunk and displayed with this text all in line. How can I do that?</p>
      </v-col>
    </v-row>
   </div>
  `
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <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>
    <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">

    <div id="root"></div>

【讨论】：