我正在使用 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 样式不起作用。有什么想法吗？
尝试使用类来更改样式
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,
}),
})
请参阅 Vuetify v-select 组件宽度更改，了解如何将样式应用于 Vuetify 组件的内部元素的示例。
如果您在
<v-select>最好在元素上添加内联样式，因为它具有最高优先级，并使用单个类来指示角色，例如
.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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>