Nuxt 和 Vue 社交聊天
我将 Vue 社交聊天模块安装到我的 Nuxt 应用程序中，但无法理解道具和颜色设置的工作原理。目前，一切工作正常，尽管显示的 Whatsapp 图标是黑色的，并且顶部栏位于语音气泡内。我将如何在 Nuxt 中更改此设置。作者说使用 css 变量，但我不知道将这些变量放在哪里以及如何在我的代码中使用它们。
Nuxt 也没有 App.vue，所以我直接导入了模块，这似乎可以工作，但我不确定我是否正确执行。
这就是我当前的 default.vue 页面的样子。我不会在其他地方导入该模块。
<template>
<v-app dark>
<v-main>
<Nuxt />
</v-main>
<div>
<SocialChat
icon
:attendants="attendants"
>
<p slot="header" >Chat to us on whatsapp for any question, or sales related topics.</p>
<template v-slot:button>
<img
src="https://raw.githubusercontent.com/ktquez/vue-social-chat/master/src/icons/whatsapp.svg"
alt="icon whatsapp"
aria-hidden="true"
>
</template>
<small slot="footer">Opening hours: 8am to 6pm</small>
</SocialChat>
</div>
</v-app>
</template>
<script>
import { SocialChat } from 'vue-social-chat'
export default {
name: 'DefaultLayout',
components: {
SocialChat
},
data() {
return {
attendants: [
{
app: 'whatsapp',
label: '',
name: '',
number: '',
avatar: {
src: '',
alt: ''
}
},
// ...
],
}
},
}
</script>
<style>
.container {
max-width: 1200px;
}
</style>
Opening hours: 8am to 6pm