在选择时更改 v-select 的样式答案

【问题标题】：Change the style of v-select on selection在选择时更改 v-select 的样式
【发布时间】：2021-09-06 20:41:38
【问题描述】：

我正在使用 Vuetify 库，并且我试图在用户进行选择后覆盖 v-select 的属性，即更改边框的颜色、文本的颜色和向下图标的颜色。这是我的 v-select 组件的代码。

<v-select
        :items="items"
        :label="$t('select.label.all')"
        :menu-props="{ offsetY: true }"
         multiple
        rounded
        solo
       :style="getSelectedStyle.style"
       @change="onChange"
></v-select>

在getSelectedStyle上，我检查是否选择了任何东西并尝试在计算机方法中覆盖以下样式：

  getSelectedStyle() {
            let result = {
                style: '',
            };

            if(this.selectedSkills){   
            result.style = `
                .v-text-field.v-text-field--solo .v-input__control {
                    border: 1px solid #3E82F1 !important;
                };

                i.v-icon.v-icon {
                    color: #3E82F1 !important;
                };

                .v-select__selection--comma,
                .v-select.v-text-field input {
                    color: #3E82F1 !important;
                }
            `;

            return result;
        },
    },

不幸的是，使用计算方法的样式 OVERRIDE 不起作用。有什么想法吗？

【问题讨论】：

标签： javascript vue.js vue-component vuetify.js

【解决方案1】：

尝试使用类更改样式

Codepen example

html
             <v-select
           :class="{'azul':!color, 'gris':color,}"
           :dark="color"
           :items="items"
           label="Standard"
           @change="color=true"
         ></v-select>

css

   .gris{
 background-color: gray;
 border: 1px solid red !important;
}

.azul{
 border: 2px solid red !important;
}

js

   new Vue({
 el: '#app',
 vuetify: new Vuetify(),
 data: () => ({
   items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
   color: false,
 }),
})

【讨论】：

【解决方案2】：

有关如何将样式应用于 Vuetify 组件的内部元素的示例，请参阅 Vuetify v-select component width changing。

如果您在<v-select> 级别或样式块中应用样式，则需要比 Vuetify 样式更具体。

最好在元素上添加样式内联，因为它具有最高优先级，并使用指示角色的单个类，例如.v-input__control.

<!DOCTYPE html>
<html>

<head>
  <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.0.1/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app>
      <v-select 
        ref="select"
        solo
        :items="items"
        label="Standard"
        @change="onChange(); applyCustomStyles();"
      ></v-select>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.0.1/dist/vuetify.js"></script>
  <script>
    const customStyles = {
      ".v-input__control": {
        border: "1px solid #3E82F1",
      },
      ".v-icon": {
        color: "#3E82F1",
      },
      ".v-select__selection--comma": {
        color: "#3E82F1",
      },
    };

    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      mounted() {
        this.applyCustomStyles();
      },
      methods: {
        onChange() {
          console.log("onChange");
        },
        applyCustomStyles() {
          Vue.nextTick(() => {
            const vSelects = [].concat(this.$refs.select); // handle one or many selects
            vSelects.forEach((vSelect) => {
              Object.entries(customStyles).forEach(([selector, styles]) => {
                Object.entries(styles).forEach(([style, value]) => {
                  const element = vSelect.$el.querySelector(selector);
                  if (element) {                    // selector may not be present on mount
                    element.style[style] = value;
                  } else {
                    console.warn(`Could not find element "${selector}"`);
                  }
                });
              });
            });
          });
        },
      },
      data: () => ({
        items: ["Foo", "Bar", "Fizz", "Buzz"],
      }),
    })
  </script>
</body>

</html>

【讨论】：