因此,我试图将复选框图标选中更自定义的东西,也许是不同的图标,但是,我尝试了一些不同的东西,例如伪元素,但没有成功。现在它所做的是遍历数据并显示名称,并在选中时根据 css 类突出显示它。我想要做的是检查更改复选框图标时。
css
.unchecked{
color: gray;
}
.checked{
background-color: #ffff00;
}
Vuejs 组件。Vue.component('check-list', {
template: `
<v-container>
<v-row >
<v-col >
<v-checkbox
v-for="item in values"
:key="item.id"
:value="item.id"
v-model="selected"
>
<template v-slot:label>
<div :class="selected.includes(item.id) ? 'checked' : 'unchecked'">
{{item.name}}
</div>
</template>
</v-checkbox>
</v-col>
</v-row>
<pre>{{selected}}</pre>
</v-container>
`,
data: function () {
return {
selected: [],
values: [
{id:'1',name:'Name 1'},
{id:'2', name:'Name 2'},
{id:'3', name:'Name 3'},
],
ex4: ['red']
}
},
methods: {
},
})
new Vue({
el: '#components-demo',
vuetify: new Vuetify({
icons: {
iconfont: 'md',
},
}),
data: () => ({
}),
})
最佳答案
@chewie,可以在 Vuetify 中更改复选框图标,有一个特殊的 Prop 来处理这个问题
:on-icon="'图标名称'"
:off-icon="'icon-name'"
请在下面找到完整的代码
<div id="app">
<v-app id="inspire">
<v-container
class="px-0"
fluid
>
<v-row >
<v-col >
<v-checkbox
:on-icon="'mdi-heart'"
:off-icon="'mdi-home'"
v-for="item in values"
:key="item.id"
:value="item.id"
v-model="selected"
>
<template v-slot:label>
<div :class="selected.includes(item.id) ? 'checked' : 'unchecked'">
{{item.name}}
</div>
</template>
</v-checkbox>
</v-col>
</v-row>
<pre>{{selected}}</pre>
</v-container>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
selected: [],
values: [
{id:'1',name:'Name 1'},
{id:'2', name:'Name 2'},
{id:'3', name:'Name 3'},
],
ex4: ['red']
}
},
})
Please find the working codepen here: https://codepen.io/chansv/pen/QWdEPvB?editors=1010
关于javascript - 选中 Vuejs Vuetify 时更改复选框图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66840492/