我在我的应用程序上使用vuetify
。设计团队创建了一个平面设计,我想改变vuetify
的主题,以匹配模型
我试图找到一个选项来禁用涟漪效应很容易在整个应用程序,但它不存在。
我尝试创建一个组件扩展,以避免在我使用的每个组件上重复:ripple="false"
。
我将以按钮组件为例。
<v-btn :ripple="false">My Button</v-btn>
字符串
我的应用程序上的每个按钮都需要有ripple=false
我的目标是创建这样的组件
<my-button>My Button</my-button>
型
我尝试在另一个类似这样的组件中扩展v-btn
。
<template>
<v-btn v-bind="options" :ripple="false"></v-btn>
</template>
<script>
import { VBtn } from 'vuetify';
export default {
name: 'MyButton',
extend: VBtn,
computed: {
options() {
return this.props;
},
},
};
</script>
<style scoped>
型
我尝试这种方式来避免复制/粘贴v-btn
的所有 prop 。
我尝试过的所有解决方案都失败了。
7条答案
按热度按时间bfhwhh0e1#
您可以在注册后全局修改Vue.js组件。
在这种情况下,您可以简单地这样做:
字符串
例如,您可以将其添加到
vuetify.js
文件中的export default new Vuetify (...)
之前。dgtucam12#
您可以将完整容器设置为不可见。
字符串
n6lpvg4x3#
根据Vuetify文档,您可以修改Stylus变量-因此您可以尝试根据自己的喜好重新定义这些变量,例如将其设置为
none
:字符串
gk7wooem4#
在main.js中使用全局mixin的涟漪指令
字符串
mdfafbf15#
添加一个类到按钮并使用CSS..
字符串
4c8rllxm6#
在Vuetify 3.3.22上,prop默认值接受组件键引用,以根据组件层次结构应用样式更改。更多信息请参阅文档
范例:
字符串
uurv41yg7#
随着Vuetify 2.0的发布,你实际上可以通过修改你的
vuetify.js
文件来全局关闭ripple。字符串